Nội dung siêu dữ liệu trong tài liệu HTML

26/05/2019 | Mai Đức Thạch | 35 xem

Trong bài trước, chúng ta đã tìm hiểu cấu trúc trang web HTML và phân loại các phần tử HTML. Trong bài này sẽ tìm hiểu về nhóm phần tử siêu dữ liệu trong tài liệu HTML. Nhóm phần tử siêu dữ liệu là những phần tử được sử dụng chủ yếu trong nội dung phần tử head của tài liệu HTML. Những nội dung này không được hiển thị trực tiếp trên giao diện đồ họa người dùng, mà nó được sử dụng để thiết lập những mô tả hay hành động về những nội dung còn lại của tài liệu HTML, hoặc là mô tả quan hệ giữa tài liệu với các tài liệu khác, hoặc những truyền tải ngoài dải thông tin.

Phần tử title

Phần tử title dùng để đặt tiêu đề hoặc tên của tài liệu; đây là phần tử đặc biệt quan trọng trong SEO, vì vậy nên được sử dụng ngay sau thẻ mở của phần tử head của tài liệu html.

<title>Thiết kế Website</title>

Nội dung của phần tử title  được hiển thị trên thanh trạng thái của trình duyệt Web, và thường xuất hiện ở phần tiêu đề trong các kết quả tìm kiếm của các công cụ tìm kiếm. Nội dung trong phần tử này nên:

▪ Gồm từ 5 – 15 chữ, không quá 57 ký tự, dài khoảng 500px (theo font chữ Arial và font là 22px). Không đặt nội dung thẻ title trùng lặp nhiều trang trên website.

▪ Là một cụm từ hoàn chỉnh về nội dung, tránh dùng phụ từ và phải liên quan 100% nội dung đề cập trong trang web.

▪ Từ khóa quan trọng nhất của trang nên đặt tại vị trí bắt đầu của nội dung phần tử title. Không nhồi nhét quá 10 từ khóa được phân cách bởi dấu (,).

▪ Tên thương hiệu có thể được đặt ở cuối nội dung phần tử title và được phân cách với phần còn lại bởi dấu (-) hoặc (|). Tránh trường hợp đặt nội dung phần tử title chỉ bao gồm tên thương hiệu.

Phần tử base

Phần tử base dùng để chỉ đường dẫn cơ bản của tài liệu. Khi sử dụng phần tử này bắt buộc sử dụng thuộc tính href hoặc target để chỉ ra đường dẫn cơ bản của website.

<base href=“https://topwebviet.com”  />

Phần tử meta

Phần tử meta được sử dụng với các cặp kiểu và giá trị, để mô tả thông tin trang hay cài đặt cấu hình hiển thị trang.

Phần tử meta description: được sử dụng để khái quát mô tả nội dng của trang. Nội dung thuộc tính content của phần tử này nên:

▪ Gồm 14 – 30 chữ, trong khoảng 80 – 160 ký tự, dài khoảng 510px (theo font chữ Arial và font là 22px).

▪ Tránh nhồi nhét từ khóa, không đặt thẻ mô tả trùng nhau nhiều trang trên website. Nội dung mô tả phải liên quan trên 86% nội dung trang web.

▪ Nội dung phải dễ đọc, không sử dụng ký tự đặc biệt; tập trung hướng vào đúng mục tiêu của trang, mô tả cho nội dung của trang và từ khóa chính.

Tháng 9/2009, Google tuyên bố phần tử meta description không tác động đến thứ hạng từ khóa trên Google, thường hiển thị ở phần mô tả trong các kết quả tìm kiếm với khoảng 70 – 80 ký tự mỗi dòng và có tác động khi người xem chia sẻ lên các trang mạng xã hội.

<meta name=“description” content=“Thiết kế Web chuyên nghiệp, đẳng cấp hàng đầu Việt Nam”  />

Phần tử meta robot: được sử dụng để xác định giới hạn phạm vi truy cập của công cụ tìm kiếm đối với trang web hiện tại. Trong đó, nội dung thuộc tính content có thể là:

all Không hạn chế việc lập chỉ mục.
index | noindex Cho phép | Ngăn chặn việc lập chỉ mục cho trang
follow | nofollow Cho phép | Ngăn chặn robot của công cụ tìm kiếm đi vào bất kỳ liên kết nào trong trang.
noarchive Không hiển thị một liên kết Cached trong kết quả tìm kiếm.
nosnippet Ngăn chặn một mô tả xuất hiện bên dưới trong trang kết quả tìm kiếm, đồng thời ngăn chặn bộ nhớ đệm của trang.
noodb Ngăn chặn hiển thị mô tả Dự án thư mục mở (Open Directory Project) sử dụng trong các mô tả xuất hiện bên dưới trang kết quả tìm kiếm.
notranslate Không cung cấp một kịch bản dịch của trang trong kết quả tìm kiếm.
noimageindex Không lập chỉ mục cho hình ảnh trong trang.
none Bao gồm noindex và nofollow.
<meta name=“robot” content=“noodb, index, follow”  />

Các phần tử meta Open Graph:

Các trang mạng xã hội cung cấp những cách thức khác nhau để phân tích nội dung  trang web khi người dùng chia sẻ mỗi liên kết lên. Trong đó, Open Graph phân tích nội dung trang web khi chia sẻ lên mạng xã hội như Facebook hoặc Google Plus.

<meta property="og:title" content=="Tin tức topwebviet"  />
<meta property="og:type" content="text/html" />
<meta property="og:url" content="https://topwebviet.com/tin-tuc.html" />
<meta property="og:image" content="https://topwebviet.com/avatar-tin-tuc.jpg" />

Ngoài ra có thể tham khảo thêm giá trị một số thuộc tính khác như sau:

– Đối với Không gian tên og: http://ogp.me/ns#

+ Thuộc tính cơ bản trong trang
og:title
og:type
og:image
og:url
+ Một số thuộc tính chung khác của trang có thể sử dụng:
og:audio
og:description
og:determiner
og:locale
og:locale:alternate
og:site_name
og:video
+ Một số định dạng thêm cho image, audio, video:

og:image
og:image:secure_url
og:image:type
og:image:width
og:image:height
og:audio
og:audio:secure_url
og:audio:type
og:video
og:video:secure_url
og:video:type
og:video:width
og:video:height

Trong đó:
→ Những thuộc tính image, video, audio là chỉ định đường dẫn đến tập tin.
→ Định dạng sercure_url là đường dẫn thay thế trong trường hợp dùng HTTPS.
→ Định dạng width, height quy định chiều rộng và chiều cao của đối tượng là số.
→ Định dạng type: là kiểu của đối tượng dưới dạng kiểu MIME Types. Xem chi tiết tại: https://www.sitepoint.com/web-foundations/mime-types-complete-list/.

– Đối với Không gian tên http://ogp.me/ns/profile# để chỉ định thông tin tác giả trang web:

profile:first_name
profile:last_name
profile:username
profile:gender

– Đối với Không gian tên http://ogp.me/ns/article# để chỉ định thông tin bài viết:

article:published_time
article:modified_time
article:expiration_time
article:author
article:section
article:tag

– Ngoài ra còn có các không gian tên khác như:

Website:  http://ogp.me/ns/website#
Sách:  http://ogp.me/ns/book#
Âm nhạc:  http://ogp.me/ns/music#
Phim:  http://ogp.me/ns/video#

❹ Các phần tử meta Twitter Card: cũng tương tự như Open Graph, nhưng Twitter Card phân tích nội dung trang web khi chia sẻ lên mạng xã hội Twitter.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="topwebviet" />
<meta name="twitter:title" content="Tin tức topwebviet" />
<meta name="twitter:description" content="Thông tin cập nhật nhất về công nghệ phát triển website trên thị trường hiện nay" />
<meta name="twitter:image" content=" https://topwebviet.com/avatar-tin-tuc.jpg" />

Ngoài ra có thể tham khảo thêm giá trị một số thuộc tính khác như sau:

twitter:card
twitter:site
twitter:site:id
twitter:creator
twitter:creator:id
twitter:title
twitter:description
twitter:image
 
twitter:player
twitter:player:width
twitter:player:height
twitter:player:stream
 

twitter:app:name:iphone
twitter:app:id:iphone
twitter:app:url:iphone
twitter:app:name:ipad
twitter:app:id:ipad
twitter:app:url:ipad
twitter:app:name:googleplay
twitter:app:id:googleplay
twitter:app:url:googleplay

❺ Các phần tử meta định nghĩa trang khác:

<meta http-equiv=“Content-Type”  content=“text/html; charset=utf-8”  />
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”  />
<meta name=“viewport” content=“width=device-width, initial-scale=1”  />
<meta name=“author” content=“Mai Đức Thạch”  />
<meta name=“generator” content=“Frontweaver 8.0”  />
<meta name=“revisit-after” content=“1 days”  />

Phần tử link và style

Phần tử link dùng để liên kết một tài nguyên khác vào trong trang.

Phần tử link stylesheet dùng để liên kết đến các trang bộ định kiểu CSS đưa vào trang web để định nghĩa các thức hiển thị nội dung bộ chọn cho các phần tử html.

<link href=“https://topwebviet.com/styles/bootstrap.css” rel=“stylesheet” type=“text/css”  />

Phần tử style được sử dụng gồm nội dung các bộ định kiểu CSS để định dạng cách thức hiển thị nội dung bộ chọn cho các phần tử html.

<style>
     p{color:red; font-size:12px;}
</style>
<p>Nội dung đoạn văn bản.</p>

Phần tử link canonical trong trường hợp phiên bản mobile và phiên bản desktop sử dụng URL khác nhau, khi đó sử dụng phần tử link canonical để trỏ về đường dẫn trên phiên bản desktop:

<link href=“https://topwebviet.com/” rel=“canonical” />

❸ Phần tử link shortcut icon: được sử dụng để định nghĩa đường dẫn hình ảnh icon thể hiện cho trang. Trên nhiều trình duyệt, hình ảnh này được hiển thị trên thanh trạng thái của trình duyệt trước nội dung phần tử title của trang.

<link href=”https://topwebviet.com/images/icon.ico” rel=“shortcut icon” />

Các phần tử link khác như

<link rel="profile" href="https://gmgp.org/xfn/11">
<link rel="pingback" href="https://topwebviet.com/xmlrpc.php">
<link rel="dns-prefetch" href="//s.w.org">
<link rel="alternate" type="application/rss+xml" title="Dịch vụ phát triển website toàn diện" href="https://topwebviet.com/feed/">
<link rel="https://api.w.org/" href="https://topwebviet.com/wp-json/">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://topwebviet.com/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://topwebviet.com/wp-includes/wlwmanifest.xml">

Phần tử script, noscript và template

Phần tử script thường được sử dụng để  bao gồm nội dung kịch bản phía máy khách hoặc liên kết đến các trang kịch bản javascript thực thi trong quá trình trang web chạy.

<script type=“text/javascript” src=“https://topwebviet.com/scripts/jquery-min.js” ></script>
<script type=“text/javascript”> alert(“Thông báo trang”); </script>
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Phần tử noscript được sử dụng và chỉ hoạt động khi trình duyệt của phía người dùng không cho phép thực hiện các đoạn mã được đưa ra trong phần tử script.

<noscript> Trình duyệt của bạn hiện không hỗ trợ chạy Javascript. </noscript>

Phần tử template được sử dụng để khai báo việc lồng ghép HTML có thể được nhân bản bằng cách chèn dữ liệu từ kịch bản javascript.

<script>
    var data = [
        { hovaten: 'Mai Đức Thạch', gioitinh: 'Nam', tuoi: 30 },
        { hovaten: 'Trần Kim Duyên', gioitinh: 'Nữ', tuoi: 28 },
    ];
</script>
<template id="row"><span></span><span></span><span></span></template>
<script>
    var template = document.querySelector('#row');
    for (var i = 0; i < data.length; i += 1) {
        var cat = data[i];
        var clone = template.content.cloneNode(true);
        var cells = clone.querySelectorAll('span');
        cells[0].textContent = cat.hovaten;
        cells[1].textContent = cat.gioitinh;
        cells[2].textContent = cat.tuoi;
        template.parentNode.appendChild(clone);
    }
</script>