<h1> - Tác động ngữ nghĩa so với tác động SEO

Có rất nhiều tranh luận về kiến ​​trúc của cấu trúc tiêu đề trong html5. Sau khi đọc các bài viết khác nhau, tôi đã đến với ba kiến ​​trúc có thể có ý nghĩa logic với tôi, nhưng tôi không chắc đó là phương pháp tiếp cận đúng đắn thực sự. Tôi sẽ liệt kê chúng dưới đây với các ví dụ mã và hy vọng ai đó có thể làm sáng tỏ sự cân bằng phù hợp, hoặc tệ hơn / tốt hơn nữa, nói rằng "Bạn đang làm sai" và cho mượn một bàn tay.

Cách tiếp cận 1: Phiên bản A

Độc thân <h1>: Chỉ sử dụng các tiêu đề cho nội dung cụ thể của trang.

Điều này để lại <h1>là điều hướng cấp cao nhất cho tiêu đề cụ thể của trang trong khi chảy <h2-6>khi cần trong khu vực nội dung. Trong khi rời khỏi <header>, <nav>và <footer>như các yếu tố "tiêu đề".

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <section>
    <h2>
      <section>
        <h3>

<footer>
  <!-- no headings -->

Cách tiếp cận 1: Phiên bản 2

Nhiều <h1>: Chỉ sử dụng các tiêu đề cho nội dung cụ thể của trang.

Tương tự như 1A với việc bổ sung nhiều chủ đề nội dung trang, không kém phần quan trọng. (ví dụ: có thể cho blog hoặc chia trang chủ đề)

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <article>
    <h2>
  <article>
    <h1>

<footer>
  <!-- no headings -->

Cách tiếp cận 1 Đề cương: Hợp lý nhất cho SEO (ý kiến ​​của tôi từ nghiên cứu của tôi)

• CƠ THỂ
  • NAV không tên
• Nội dung tiêu đề
  • Mục tiêu
    • Tiểu mục
  • Phần không tên

Cách tiếp cận 2:

Nhiều <h1>'s: Nhấn mạnh cấu trúc phác thảo VÀ phân cấp nội dung

Điều này áp dụng các tiêu đề với các yếu tố trang web rộng <header>, <nav>và <footer>sử dụng nhiều <h1>là cho không có nội dung các yếu tố định hướng.

<header>
  <h1>
  <nav>
    <h2>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h1>
  <section>
    <h2>

Cách tiếp cận 2 Đề cương: Hợp lý nhất cho phác thảo ngữ nghĩa (một lần nữa, ý kiến ​​của tôi)

• Tiêu đề
  • Điều hướng
• Nội dung tiêu đề
  • Mục tiêu
    • Tiểu mục
• Chân trang
  • Mục tiêu

Cách tiếp cận 3

Đơn <h1>: Tập trung phân cấp nội dung; mức thấp hơn <h1-6>cho các yếu tố trên toàn trang web

Điều này áp dụng các tiêu đề với các yếu tố trang web rộng <header>, <nav>và <footer>KHÔNG sử dụng nhiều <h1>là cho không có nội dung các yếu tố định hướng.

<header>
  <h2>
  <nav>
    <h3>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h2>
  <section>
    <h3>

Cách tiếp cận 3 Đề cương: là sự kết hợp của cả hai phương pháp

• Tiêu đề
  • Điều hướng
• Nội dung tiêu đề
  • Mục tiêu
    • Tiểu mục
  • Chân trang
  • Mục tiêu

Vì vậy, với tất cả những gì đã nói, làm thế nào để tôi có ý nghĩa của tất cả điều này? Có cách tiếp cận nào mang nhiều giá trị ngữ nghĩa hơn phương pháp kia không? Có ai có ý nghĩa hơn về SEO? Có một sự cân bằng hạnh phúc có thể đạt được?

Nguồn: Còn nhiều nữa, đây là những thứ tôi có thể nhớ vào lúc này

• https://youtu.be/GIn5qJKU8VM
• http://accessiblehtmlheadings.com/
• http://html5doctor.com/outlines/
• http://webdesign.tutsplus.com/articles/the-truth-about-multipl-h1-tags-in-the-html5-era--webdesign-16824

Để bắt đầu, không có ví dụ nào của bạn có liên quan đến ngữ nghĩa. Câu hỏi của bạn hoàn toàn dựa trên mô hình trình phân tích cú pháp trong đó trang được đọc từ trên xuống dưới theo cách truyền thống.

Vì lý do này, ví dụ đầu tiên của bạn là chính xác. Các ví dụ sau đây sẽ không cung cấp cho bạn kết quả dự đoán và có thể khiến bạn bị bỏng tim nghiêm trọng.

Vui lòng hiểu rằng trang web của bạn sẽ được xem xét về mặt khái niệm theo nhiều cách: một, theo mô hình DOM truyền thống trong đó HTML và như vậy được đánh giá từ góc độ người dùng; hai, văn bản chỉ với đánh dấu đơn giản để chỉ tiêu đề, tiêu đề phụ, nội dung, v.v. và ba, sử dụng chế độ xem ngữ nghĩa trong đó thực sự chỉ áp dụng trọng lượng nhẹ cho các thẻ tiêu đề trong chỉ mục dựa trên vị trí của nó trong phân cấp h1-6. Từ mô hình DOM, bạn sẽ nhận được những thứ như thẻ tiêu đề, thẻ meta mô tả, v.v. sẽ bị thiếu trong hai chế độ xem khác. Tuy nhiên, chế độ xem DOM không ảnh hưởng nhiều đến nội dung của bạn. Chức năng chính của nó là hiểu trang của bạn, nơi điều hướng của bạn, nơi tiêu đề và chân trang của bạn, nơi nội dung của bạn bắt đầu và kết thúc, v.v.

Những gì bạn thực sự phải chú ý là văn bản chỉ và quan điểm ngữ nghĩa. Chế độ xem ngữ nghĩa chủ yếu xuất phát từ chế độ chỉ xem văn bản, tuy nhiên, nó mang theo nhiều ngôn ngữ học, tâm lý học, semanitcs và phân tích nội dung khác của bạn.

Tôi sẽ không mô tả ngữ nghĩa một lần nữa, nhưng tôi sẽ chỉ cho bạn một câu trả lời tôi đã viết trước đây, đó là một hướng dẫn nhỏ về chủ đề: Tại sao một trang web có thứ hạng nhồi nhét từ khóa cao hơn một mà không có kết quả tìm kiếm google?

Bởi vì web dựa trên trang in và các trình phân tích cú pháp từ những ngày đầu theo các truyền thống này và phần lớn không thay đổi, nên không thể thoát khỏi chúng. Dưới đây là câu trả lời giải thích thứ tự đọc tiêu đề vẫn là chiến lược tốt nhất dựa trên mô hình trình phân tích cú pháp: Cải thiện thứ hạng của Google cho các từ khóa chung so với các từ khóa cụ thể

Mặc dù tôi sẽ thừa nhận rằng có thể có một phần hiệu ứng di chuyển các thẻ tiêu đề xung quanh, tôi hỏi, Có phải đó là một việc làm khôn ngoan? Trời ơi không! Làm thế nào mọi thứ có trọng lượng ngày hôm nay có thể không phải là làm thế nào họ có trọng lượng vào ngày mai. Theo một định dạng truyền thống đảm bảo các kết quả có thể dự đoán được khi mà một thay đổi đơn giản về trọng số có thể khiến trang web của bạn rơi vào vòng xoáy.

Đây là một viễn cảnh về cách thức hoạt động của nó: Lợi ích tên miền trong SEO Bỏ qua tiêu đề và bỏ qua phần đầu của câu trả lời và đến với quan điểm của các lập trình viên.

Nếu bạn đọc ba câu trả lời này, bạn có thể dễ dàng hiểu được tác dụng của thẻ tiêu đề. Rất có thể làm hỏng hiệu suất trang / trang web của bạn trở nên dễ thương với cách bạn sắp xếp những thứ này. Ngay cả theo truyền thống, bạn có thể hoàn tác thẻ tiêu đề và thẻ h1 cực kỳ nhanh chóng bằng cách tối ưu hóa một vài thẻ tiêu đề thấp hơn. Cân bằng cẩn thận là chìa khóa.

Cuối cùng, tôi sẽ cảnh báo bạn về tất cả lời khuyên SEO trực tuyến này từ những người không phải là kỹ sư. Nó là một cây vợt để kiếm tiền và vie cho sự chú ý của bạn. Làm thế nào công cụ tìm kiếm hoạt động không phải là một bí mật. Nó ở ngoài đó nếu bạn biết nơi để tìm. Hầu hết tất cả các chuyên gia SEO hoàn toàn không phải là chuyên gia về việc họ không thể nói cho bạn biết nội bộ về cách công nghệ tìm kiếm được kết hợp với nhau. Không phải là kỹ sư của Google hay Bing, chúng tôi không bao giờ có thể thực sự biết chính xác cách thức các công cụ tìm kiếm này hoạt động. May mắn thay, Google đã nói với chúng tôi đủ (và thực sự họ đã nói với chúng tôi hầu hết mọi thứ chúng tôi cần biết - và không, nó không đến từ một người tên Matt) rằng nếu bạn biết về khoa học và công nghệ, một giả định khá hợp lý có thể được thực hiện. Theo quan điểm của tôi, hầu hết các SEO đều sai nhiều hơn đúng trong khi một số ít có tỷ lệ trúng cao hơn nhiều so với trung bình.

Dưới đây là từ góc độ của đặc tả HTML5, dựa trên giả định rằng người tiêu dùng (như công cụ tìm kiếm) sẽ mong đợi và làm việc với những gì được chỉ định trong các tiêu chuẩn HTML. Trong thực tế hiện nay, các chi tiết đánh dấu như vậy có thể không quan trọng đối với SEO, nhưng nó có thể quan trọng đối với người tiêu dùng và khả năng tiếp cận khác.

Tôi sẽ sử dụng các tiêu đề của thứ hạng phù hợp, vì đây là điều mà HTML5 khuyến khích , nhưng cũng có thể sử dụng h1ở mọi nơi (nếu bạn luôn sử dụng các yếu tố nội dung phân chia khi thích hợp).

Bạn không thể "áp dụng" các tiêu đề cho headerhoặc footercác thành phần, vì chúng không phân chia nội dung (chúng chỉ có thể chứa các tiêu đề, nhưng tiêu đề này sẽ không bị giới hạn trong phạm vi của header/ footer).

Mỗi phần tử nội dung sectioning ( section, article, nav, aside) và mỗi phần tử gốc cắt- ( body, blockquote, vv) có thể có tiêu đề một áp dụng.

Các phần tử nội dung / phần tử gốc và các phần tử tiêu đề h1- h6là các phần tử duy nhất quan trọng đối với phác thảo tài liệu .

Trong khi mỗi phần "chờ đợi" cho tiêu đề một, nó được không cần thiết để cung cấp một (trong trường hợp này, nó được một "ngụ ý", tiêu đề tiêu đề). Mặc dù việc cung cấp một cái thường rất hữu ích, nhưng có những trường hợp không thực sự cần thiết. Ví dụ: nếu bạn chỉ có một điều hướng, navkhông có tiêu đề sẽ là đủ. Nhưng nếu trang web của bạn có nhiều điều hướng, có thể có ý nghĩa khi sử dụng các tiêu đề giải thích các mục đích khác nhau.

Trong cách tiếp cận 1 của bạn, bodyphần này không có tiêu đề (nhưng đây chỉ là trường hợp vì bạn navxuất hiện trước phần tử tiêu đề đầu tiên; nếu không đây h1sẽ là tiêu đề cho toàn bộ tài liệu).
Tôi không nghĩ rằng có một bodyphần không có tiêu đề là một lựa chọn tốt. Đây là mục đầu tiên trong đề cương, và, lý tưởng nhất (nhưng không nhất thiết), mọi thứ tiếp theo đều nằm trong phạm vi của mục này.

Đối với một trang web điển hình có điều hướng toàn cầu, sẽ có ý nghĩa ( giải thích dài hơn ) để sử dụng tên trang web cho bodytiêu đề của phần, bởi vì điều hướng toàn cầu thuộc về toàn bộ trang web , không chỉ trong tài liệu hiện tại:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
-->

Nội dung chính của tài liệu này cũng phải nằm trong phạm vi của tiêu đề trang web, vì trang web là bối cảnh của nội dung chính của tài liệu này, tức là, đó là một phần của trang web của bạn:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <article> <!-- document content -->
    <h2>My blog post</h2>
  </article>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "My blog post"
-->

Nếu bạn có nhiều phần nội dung chính, ví dụ, một danh sách các bài đăng trên blog, thường sử dụng một mục sectioncó chứa tất cả những điều này article, thay vì có các phần tử articletrực tiếp của body:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- document content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
-->

Nếu bạn có một phần chân trang web phức tạp đến mức nó cần các phần tử phân chia, thì nó sẽ lại ở cùng cấp độ navvới nội dung chính và nội dung chính (vì nó thuộc về trang web, không phải nội dung chính):

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- main content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

  <section> <!-- site footer -->
    <!-- this section should be the child of a 'footer' element -->
  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
    1.3. Untitled section
-->

(Trong tất cả các ví dụ này, điều hướng đi trước nội dung chính, nhưng thường có ý nghĩa là phải có nội dung chính trước. Hoán đổi những điều này là có thể. Bạn chỉ nên đảm bảo rằng h1tên trang web xuất hiện trước bất kỳ phần / tiêu đề nào khác.)