Người Viết : ViKiMi Editor

Sử dụng Phần tử HTML Head một cách hiệu quả tạo một nền tảng SEO tốt nhất cho Website
Thiết kế một Website thật hoàn hảo chắc hẳn là mục tiêu của bất kỳ một nhà phát triển nào. Gắn liền với yêu cầu này thì các ngôn ngữ lập trình đã và đang được hoàn thiện để đáp ứng lại. HTML cũng như vậy, nó là một ngôn ngữ chứa nhiều đáp ứng phù hợp. Tất cả thật dễ hiểu và đơn giản nhất có thể, nó dễ dàng với tất cả mọi người.
Mọi nhà phát triển hoặc bất kỳ lập trình viên nào cũng có thể làm được điều này.
+ HTML cung cấp các thành phần cơ bản nhất giúp trang Web có thể tối ưu hoá những gì nó có và mang đến người sử dụng.
+ Lập trình SEO và đem tất cả những gì bạn muốn tới người dùng.
+ Ngôn ngữ HTML có thể cung cấp tất cả những nền móng để bạn kết hợp cùng các ngôn ngữ lập trình. Cuối cùng mục tiêu sẽ được hoàn thành.
Và để làm rõ điều này, trong phần này chúng ta sẽ nói những gì cần thiết.
Nội dung sẽ liên quan đến HTML <head> Element
Phần tử HTML <Head> chứa tất cả các phần tử giúp tối ưu hoá Website. Điều này thật tốt để bạn tiến hành SEO mọi thứ thuộc Website của bạn.
HTML <head> Element chứa các phần tử sau : <Title>, <Style>, <Meta>, <Link>, <Script> và <Base>.
HTML <head> Element là nơi chứa siêu dữ liệu.
+ Siêu dữ liệu HTML là dữ liệu về tài liệu HTML. Siêu dữ liệu không được hiển thị trên khung nhìn của bất ký trình duyệt, nhưng nó lại chính là nhân tối quan trọng tạo nên một Website hoàn hảo.
+ Metadata / Siêu dữ liệu thường xác định document title / Tiêu đề tài liệu, character set / Bộ ký tự, styles, scripts, and other meta information / Thông tin Meta khác.
1 ] Phần tử HTML <Title>
Phần tử <title> xác định tiêu đề của tài liệu.
Phần tử <title> là bắt buộc trong tài liệu HTML! Nếu bạn có quên thì cũng không sao nhưng nó được xem như một lỗi trong lập trình.
Tiêu đề là dạng văn bản và được hiển thị trên thanh tiêu đề của trình duyệt hoặc trong tab của trang.
Tiêu đề trang rất quan trọng để tối ưu hóa công cụ tìm kiếm ( / SEO )! Tiêu đề trang được thuật toán của công cụ tìm kiếm sử dụng để quyết định thứ tự khi liệt kê các trang trong kết quả tìm kiếm. Nếu bạn tối ưu nó thì sẽ giúp kết quả tìm kiếm của bạn có thứ tự cao.
Buộc lòng để có các tiêu đề tốt nhất thì bạn phải kết hợp HTML Title và một ngôn ngữ lập trình khác để có được kết quả tốt cho SEO và phân phát tốt nhất đến người dùng.
TƯƠNG TỰ CHO MỌI THÀNH KHÁC CỦA TRANG WEB.
Example : VỀ HTML HEAD
<!DOCTYPE html> <html> <head> <title> Đây là tiêu đề Trang Web </title> </head> <body> Nội dung của Tài liệu tại đây ...... </body> </html>
2 ] Phần tử HTML <Style>
Phần tử <style> được sử dụng để xác định thông tin biểu định kiểu / CSS cho một trang HTML. Điều này giúp tạo kiểu cho các phần tử của Website.
Example :
<!DOCTYPE html>
<html>
<head>
<title> Đây là tiêu đề Trang Web </title>
<style>
body {background-color: blue;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
<body>
Nội dung của Tài liệu tại đây ......
<h1> Tài liệu về HTML </h1>
</body>
</html>
3 ] Phần tử HTML <Link>
Phần tử <Link> xác định mối liên kết giữa tài liệu hiện tại và tài nguyên bên ngoài.
Điều này cho phép bạn liên kết với tài liệu bên ngoài.
Thẻ <Link> thường được sử dụng nhất để liên kết tới các CSS style sheet bên ngoài. Và nó giúp bạn quản lý Web tốt hơn với nguyên tắc chia để trị.
Example : Thực hiện tới một File CSS chứa các định nghĩa kiểu cho các phần tử Website. Nhờ vậy các thiết kế trong đơn giản và dễ quản lý.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="mystyle.css">
<style>
body {background-color: blue;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
<body>
Nội dung của Tài liệu tại đây ......
<h1> Tài liệu về HTML </h1>
</body>
</html>
4 ] Phần tử HTML <Meta>
Phần tử <Meta> thường được sử dụng để chỉ định bộ ký tự / character set, mô tả trang / page description, từ khóa / keywords, tác giả / author của tài liệu và cài đặt chế độ xem / viewport settings.
Metadata / Siêu dữ liệu sẽ không được hiển thị trên trang mà được sử dụng bởi các trình duyệt giúp tạo cách hiển thị nội dung hoặc tải lại trang etc, được sử dụng bởi các công cụ tìm kiếm (từ khóa) và các dịch vụ web khác.
Nhờ vậy khiến Website hoàn thiện mọi mặt.
+ Define the character set / Xác định bộ ký tự
<meta charset=”UTF-8″>
+ Define keywords for search engines / Xác định từ khóa cho công cụ tìm kiếm
<meta name=”keywords” content=”HTML, CSS, JavaScript”>
+ Define a description / Xác định mô tả trang web
<meta name=”description” content=”Free Web tutorials”>
+ Define the author / Xác định tác giả
<meta name=”author” content=”John Doe”>
+ Refresh document / Làm mới tài liệu sau 30 s ( Ít sử dụng )
<meta http-equiv=”refresh” content=”30″>
Example : Tối ưu hoá thông tin siêu dữ liệu Website giúp phân phát Website tốt hơn.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Mô tả của một Website, thường kết hợp với ngôn ngữ lập trình khác để tạo phần này">
<meta name="keywords" content="HTML, CSS, JavaScript, Những từ khoá quan trong cho bài Báo">
<meta name="author" content="mr Wao">
</head>
<body>
<p> Tất cả thông tin metadât nằm trong phần HEAD.</p>
</body>
</html>
5 ] Setting The Viewport / Cài đặt khung nhìn
Cài đặt này cho phép Website hiển thị tương thích trên các thiết bị và nó là không thể thiếu nếu bạn cần đền nó.
Viewport là khu vực hiển thị của người dùng trên trang web.
Viewport thay đổi tùy theo thiết bị – sẽ nhỏ hơn trên điện thoại di động và so với trên màn hình máy tính.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ Điều này cung cấp hướng dẫn cho trình duyệt về cách kiểm soát kích thước và tỷ lệ của trang.
+ Phần width = device-width đặt chiều rộng của trang theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo thiết bị).
+ Phần init-scale = 1.0 đặt mức thu phóng ban đầu khi trang được trình duyệt tải lần đầu tiên.
6 ] Phần tử HTML <script>
Bạn có thể sử dụng Phần tử <script> được sử dụng để xác định JavaScript phía máy khách.
Nó giúp bạn cải thiện các hiển thị của Website bằng cách chạy JavaScript ngay trên trình duyệt của máy khách.
+ Bạn có thể đặt đoạn code ở phía cuối BODY
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
7 ] Phần tử HTML <Base>
Phần tử <Base> chỉ định URL cơ sở hoặc thuộc tính Target cho tất cả các URL tương đối trong một trang ( Nó ảnh hưởng chung tới tất cả ).
Example :
<!DOCTYPE html>
<html>
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<a href="tags/tag_base.php"> HTML base Tag </a>
</body>
</html>
Chỉ có thể có một phần tử <base> duy nhất trong tài liệu!
Như vậy, bạn có thể làm việc dễ dàng với HTML để tạo ra mục đích có một Website tốt nhất và dễ dàng phân phát tới người dùng. Cách mà bạn có thể làm khi tạo một Website động là kết hợp nó với các ngôn ngữ lập trình Website khác để thiết kế một Website động cho bạn.
Sử kết hợp giữa các ngôn ngữ lập trình luôn cần thiết.