Đó là một thực tế phổ biến cho các nhà phát triển front-end để đặt tiêu đề hoặc logo trang web trong thẻ H1 và tiêu đề trong H2. Nhưng hầu hết thời gian tiêu đề của trang / bài viết quan trọng hơn vì nó mang giá trị nội dung. Vì vậy, câu hỏi của tôi là cách tiếp cận tốt nhất từ quan điểm ngữ nghĩa và SEO. Ví dụ:
Cung cấp các biến thể khác nếu bạn nghĩ rằng chúng sẽ có hiệu ứng lớn hơn.
Câu trả lời:
Tôi thường không đặt logo hoặc tiêu đề trang web trong một H1. Cách tôi muốn nhìn là mỗi trang là một tài liệu. Tài liệu đó là về một chủ đề cụ thể, như được phản ánh trong tiêu đề trang và cũng là tiêu đề chính. Bản thân trang web chỉ là nhà xuất bản của tài liệu. Vì vậy, về mặt ngữ nghĩa, việc sử dụng logo hoặc tên trang web làm tiêu đề chính của mỗi trang là không chính xác. Logo được hiển thị nổi bật để nhắc nhở người dùng về vị trí và mục đích xây dựng thương hiệu, nhưng thực tế chúng không phải là một phần của nội dung hoặc tài liệu.
Ý tôi là, khi bạn xem một câu chuyện tin tức, bạn có thể thấy một logo kênh tin tức nhỏ ở góc, nhưng câu chuyện tin tức sẽ không có tiêu đề "CNN" hoặc "BBC News". Tiêu đề sẽ là về câu chuyện, không phải mạng xuất bản câu chuyện. Tương tự như vậy, khi bạn đọc một tạp chí, chỉ có tiêu đề bài viết được sử dụng trong tiêu đề, không phải tên của ấn phẩm.
Về mặt ngữ nghĩa, việc sử dụng thẻ H1 cho tên logo / trang web và một tên cho tiêu đề tài liệu cũng không chính xác. Tiêu đề xác định cấu trúc phân cấp của nội dung trên trang; sử dụng một cho tên trang web và một cái khác cho tiêu đề tài liệu giống như nói, trang này có 2 phần chính: "mydomain.com" và "liên hệ với chúng tôi".
h1, nhưng chỉ trên trang chính của họ . Đi đến một danh sách cụ thể và tiêu đề danh sách hiện đang ở trong h1.
Xem Trang 37 của tài liệu Thẻ Báo cáo SEO của Google :
Hầu hết các trang chính của sản phẩm đều có cơ hội sử dụng một
<h1>thẻ, như ví dụ ở trên, nhưng hiện tại chúng chỉ sử dụng các thẻ tiêu đề khác (<h3>trong trường hợp này) hoặc kiểu chữ lớn hơn. Trong khi tạo kiểu cho văn bản của bạn để nó trông lớn hơn có thể đạt được cùng một bản trình bày trực quan, nó không cung cấp cùng một ý nghĩa ngữ nghĩa cho công cụ tìm kiếm mà<h1>thẻ thực hiện. Tên của sản phẩm và / hoặc một vài từ về các tính năng<h1>của sản phẩm rất tuyệt vời để có trong thẻ cho trang chính của sản phẩm.
Theo phân tích riêng của Google về các dịch vụ của mình, tôi sẽ đi đến kết luận rằng Google hy vọng một giá trị duy nhất, cụ thể theo trang sẽ xuất hiện trong một H1 (hình minh họa trong tài liệu được liên kết minh họa điều này).
Đây là một lý do hợp lý: Logo của bạn là một hình ảnh, không phải là <h1>
Về mặt ngữ nghĩa, <h1>nên được sử dụng cho tiêu đề trang và tiêu đề trang phải là duy nhất trên mỗi trang. Logo hoặc tên trang web của bạn không phải là tiêu đề trang (có lẽ ngoài trang chủ).
Logo / tên trang web của bạn phải ở dạng div đơn giản, có thể có ID của 'tiêu đề'. Hoặc, <header>thẻ nếu sử dụng HTML5.
<img>thẻ, nó có thể là nền, chỉ không phải là nền trên <h1>thẻ. Tuy nhiên, như bài viết được liên kết lập luận, logo của bạn có thể được xem là nội dung trang.
IMO chỉ nên có một H1 trên trang. Và H1 phải luôn luôn trước H2 - để duy trì phân cấp chính xác cho nội dung của bạn.
Logo thường được lặp lại trên mỗi trang và, như bạn nói, trên hầu hết các trang, tiêu đề gần như luôn luôn quan trọng hơn.
Trên trang chủ tôi sẽ xem xét sử dụng:
logo / title - H1 [, title - H2]
Mặc dù, trên trang chủ của bạn, logo cũng có thể là tiêu đề của bạn.
Tuy nhiên, trên tất cả các trang tiếp theo tôi sẽ sử dụng:
logo - thẻ khác, tiêu đề - H1
Thậm chí có logo làm hình nền nếu thích hợp.
Những gì bạn thực sự tìm kiếm trong thẻ H1 của bạn là tiêu đề trang hoặc điều gì làm cho trang này trở nên độc đáo. Nếu bạn đang sử dụng một hình ảnh trong đó, bạn cần thực hiện nó với phương pháp dự phòng để phân hủy:
<style>
h1{background: url('imagePathHere.gif');width:60px;height:10px;}
h1 span{display:none}
</style>
<h1><span>Unique Page Title</span></h1>
Bằng cách này, bạn có thể thiết lập một hình ảnh để hiển thị cho H1 (mà mọi người thường sử dụng sai làm khu vực logo) và vẫn có nội dung tốt bên trong nó cho những người sử dụng trải nghiệm internet bị xuống cấp. Nó cũng làm cho giá trị SEO của bạn hạnh phúc.
Đây là một câu hỏi tuyệt vời, do các thực tiễn (và mẫu) hiện có.
Cá nhân, tôi muốn đề cập đến logic "Phác thảo 101", xem xét các điều sau:
H1 giống như một tiêu đề (chắc chắn bạn muốn bổ sung cho tiêu đề HTML của mình) và chỉ nên có một tiêu đề trên mỗi trang, giống như một trang chỉ có một tiêu đề
H2 là loại giống như Chữ số La Mã trong đề cương: I., II., III., V.v.
H3 sẽ là đại cương tương đương với A., B., C.
Thông thường, việc sử dụng thực tế logic này rất khó để thực thi chính xác trên một trang web - có rất nhiều thông tin ngẫu nhiên không được đưa vào hệ thống phân cấp đó. Tuy nhiên, nếu bạn ngồi xuống và cố gắng phá vỡ nó bằng logic đó, tôi cảm thấy có một lợi ích cho ngành học.
Tôi là người h1chính. Và tiêu đề chính được trang trí tên trang web, hoặc như bạn gọi nó, logo. Đây là điểm chính - trong tiêu đề của trang web, logo không thực sự là logo, đó là tiêu đề của trang web được minh họa. Các nhà thiết kế chỉ thích thiết kế nó như logo.
Có gì sai với LOGO -> H1?
<div>Google</div>
<h1>About Us</h1>
Bây giờ, h1là phần quan trọng nhất vì nó cho khách truy cập biết tất cả những gì về nó, khách truy cập không thể hiểu trang này, vì h1quá cụ thể. Về ai?
<h1>Google</h1>
<h2>About Us</h2>
Trang này là về Google. Đây là phần về chúng tôi. Xem - không có câu hỏi? Tất cả đều rõ ràng.
Cấu trúc trang. Nếu bạn đặt tiêu đề chính của trang web vào div hoặc p, sẽ không có gì để liên kết với nó.
<p>Google</p>
<h1>About us</h1>
Làm cách nào tôi có thể liên kết "Giới thiệu về U" với Google nếu h1đến sau? Bởi vì tất cả những gì đến SAU H1đều được liên kết với nó, không phải những gì trở thành trước đó.
<h1>Google</h1>
<h2>About Us</h2>
"Giới thiệu" thuộc về Google. Không có câu hỏi.
HTML là ngôn ngữ để thông tin MÔ TẢ. Vì vậy, bạn không hiển thị thông tin, bạn mô tả nó. Và mỗi trang là độc lập. Do đó, bạn mô tả một trang vì không có liên kết giữa các trang. Chỉ cần liên kết liên kết các trang cá nhân.
<p>Google</p>
<h1>About us</h1>
Trang NÀY là về chúng tôi. Ai / cái gì vậy? Không rõ. Nó chỉ mô tả một cái gì đó gọi là "Giới thiệu về chúng tôi".
<h1>Google</h1>
<h2>About Us</h2>
Trang web này mô tả google. Và có một phần Giới thiệu về chúng tôi. Chúng tôi = rất có thể là google, vì cấu trúc mô tả nó theo cách đó.
Tôi hy vọng tôi đã đưa ra quan điểm của mình :)
Tái bút Bạn không thể sử dụng h2- h1- h3vì nó phi logic, do đó, một thất bại lớn. Chỉ vì w3c chưa nói nó không được phép, không làm cho nó hợp lệ. Thật phi lý, hãy nghĩ về nó.
Logo như một thẻ h2?
Tôi chỉ duyệt qua SitePoint (www.sitepoint.com) là một blog WordPress với sự kết hợp của các trang và blog thông thường. Nói chung, tôi thấy rằng họ có tiêu đề trang là thẻ h1 và logo được đặt là h2. Bạn có thể thấy điều này tại một trang blog như www.bloss.sitepoint.com/carget/design/. Du lịch trên trang web bạn tìm thấy các thiết lập khác nhau. Tôi thường không thể tìm thấy thẻ h1, như một ví dụ tại trang sản phẩm chính (http://products.sitepoint.com/). Mặc dù từ trang đó, nếu bạn nhấp vào bất kỳ sản phẩm cụ thể nào để biết thêm thông tin www.sitepoint.com/books/design2/, bạn sẽ thấy rằng h1 là tiêu đề trang, h2 là logo. Một trang web điển hình tương tự như blog, (xem www.sitepoint.com/help/). Trong trường hợp này, các chủ đề của FAQ là tất cả các thẻ h2.
Tom Rogers
Logo của bạn không cần phải được lồng trong một tiêu đề - một hình ảnh được liên kết đơn giản trong đó headerlà đủ. Nhưng cả tiêu đề trang web của bạn và tiêu đề trang / bài viết nên được <h1>. Bài viết này là thông tin: Sự thật về nhiều thẻ H1 trong kỷ nguyên HTML5 .