Sử dụng đúng cách <title>, <title>, <h1> và <h2> trong trang web HTML5?

15

Tôi đã nghiên cứu chủ đề này trong vài ngày và đã tìm thấy nhiều đề xuất mâu thuẫn liên quan đến lập chỉ mục tìm kiếm. Tôi đang làm việc trên một dự án có rất nhiều trang khác nhau, từ mô tả sản phẩm đơn giản đến tài liệu người dùng chuyên sâu.

Tôi đã chia câu hỏi này thành nhiều phần vì tôi cảm thấy rằng điều này sẽ giúp nó hữu ích hơn cho những độc giả tương lai của câu hỏi này.

Một số phát hiện của tôi

Một số trang web dường như đã giả định phác thảo tài liệu như sau:

1. Programmer's Guide  (https://www.dartlang.org/docs/)
    1. Getting Started
    2. Concepts
        1. Libraries
        2. Fundamental classes
        etc.

Tôi thấy thú vị khi ví dụ trên không sử dụng <nav>phần tử với tiêu đề phù hợp. Tôi thích sự đơn giản của phác thảo và là Google Tôi khá chắc chắn rằng họ biết họ đang làm gì khi nói đến điều này.

Nhưng tôi bối rối vì các phác thảo ở trên không đề cập đến "Phi tiêu". Việc đề cập duy nhất về "Phi tiêu" theo nghĩa ngữ nghĩa dường như nằm trong thành <title>phần tài liệu chính "Hướng dẫn lập trình viên | Phi tiêu: Ứng dụng web có cấu trúc".

MDN (Mozilla Developer Network) là một ví dụ tuyệt vời khác về một trang web tuân theo nguyên tắc này. Nhiều <h1>tiêu đề cung cấp ngữ cảnh đầy đủ ( Phần và Đề cương của Tài liệu HTML5 ):

1. Sections and Outlines of an HTML5 Document
    1. Untitled Section (nav)
    2. Untitled Section (nav)
    3. Structure of a Document in HTML 4
    4. Problems Solved by HTML5

Trong khi những người khác không có ý nghĩa nhiều về bối cảnh (Các thực tiễn lỗi thời để tránh ). Ví dụ: phác thảo HTML5 sau có liên quan đến CSS, HTML5 hoặc C # ... chỉ với phác thảo tài liệu đi qua, ai biết được!

1. Obsolete practices to avoid
    1. Untitled Section (nav)
    2. Untitled Section (nav)
    3. Doctype
    4. <meta> element and charset attribute

Để làm cho vấn đề trở nên tồi tệ nhất, điều gì sẽ xảy ra nếu MDN chứa 2 chủ đề có cùng tiêu đề (hoặc rất giống nhau) "Các thực tiễn lỗi thời cần tránh" trong đó một là một phần của hướng dẫn CSS của họ và một là một phần của hướng dẫn HTML của họ ...

Ở đầu bên kia của các trang web phổ dường như sử dụng <body>tiêu đề -level chính cho tên sản phẩm (Foo) hoặc thùng chứa chủ đề (Hướng dẫn sử dụng cho Foo). Trường hợp tất cả các trang tiếp theo sau đó sử dụng <h2>cho tiêu đề trang thực tế.

Câu hỏi

Làm cách nào để các công cụ tìm kiếm suy ra ngữ cảnh của một trang web giống như các công cụ tìm thấy trên trang web MDN bằng cách sử dụng DOM và phác thảo HTML5?

Cách đúng để đánh dấu trang HTML5 sau đây để Google có thể lập chỉ mục trang trong ngữ cảnh phù hợp? Điều này bao gồm việc sử dụng <title>, <header>và <h1>các yếu tố.

  • Tên công ty
  • tên sản phẩm
  • Hướng dẫn sử dụng
  • Bắt đầu

Tiêu đề quan trọng nhất trong HTML được xem trong trình duyệt web, nên tiêu đề này thể hiện bối cảnh của toàn bộ trang web (Tên công ty hoặc Tên sản phẩm), bộ sưu tập các chủ đề (Hướng dẫn sử dụng) hoặc chủ đề thực tế trong tay (Bắt đầu) ?

Dự đoán tốt nhất của tôi

<!DOCTYPE html>
<html>
<head>
    <title>Getting Started | User Guide | Product Name - Company Name</title>
</head>
<body>
    <header role="banner"> <!-- Note: Lack of <h1> in here -->
        <a id="logo" href="http://example.com">Company Name</a>
        <nav>
            <h1>Site Navigation</h1>
            <ul> ... </ul>
        </nav>
    </header>
    <main role="main">
        <div class="product-name">Product Name</div>
        <div class="document">User Guide</div>

        <h1>Getting Started</h1>

        <p>blah</p>
    </main>
</body>
</html>

Dẫn đến phác thảo:

1. Getting Started
seo  html  google-search  html5  semantic-web 
— Lea Hayes
nguồn
Tôi có hiểu chính xác bạn rằng bạn đang tìm tài liệu nếu & cách các công cụ tìm kiếm sử dụng phác thảo không? (và không cho lời khuyên nên sử dụng đánh dấu nào, không liên quan đến SEO)
— unor
@unor Tôi muốn tìm hiểu lý do tại sao kỹ thuật được sử dụng trên tài liệu MDN / Dart hoạt động và nếu tôi thiếu bất kỳ kiến ​​thức chính nào. Họ dường như dựa vào <title>để cung cấp bối cảnh. Ví dụ: có phải là một ý tưởng tồi khi bao gồm giống nhau <h1>User Guide for Ubermachine</h1>trên mỗi trang nơi tiêu đề chủ đề được trình bày với <h2>Getting Started</h2>... hoặc nếu phác thảo bắt đầu <h1>Getting Started</h1>bằng một đi kèm <title>Getting Started | User Guide for Ubermachine</title>để cung cấp ngữ cảnh hữu ích cho các công cụ tìm kiếm. Đây là một câu hỏi SEO.
— Lea Hayes
Nếu có 2 sản phẩm riêng biệt thì rất có thể sẽ có 2 hướng dẫn sử dụng chứa chủ đề "Bắt đầu" của riêng họ. Do đó một phần mối quan tâm của tôi với phương pháp MDN và lý do tại sao tôi muốn biết liệu có <title>cung cấp đủ ngữ cảnh hay không.
— Lea Hayes
2
Tôi sẽ không lo lắng về công cụ tìm kiếm. Nếu bạn đang suy nghĩ ở cấp độ này, phần còn lại của trang web của bạn có thể sẽ ổn về mặt kỹ thuật và đủ tốt cho các công cụ tìm kiếm. Thay vào đó hãy nghĩ về người dùng của bạn.
— John Mueller
1
Bạn đã không đề cập đến URL. Đó cũng là một cơ chế quan trọng cho sự thân thiện của con người và robot. Ví dụ: trong khi hai ví dụ MDN <h1> của bạn không nhất quán lại. bối cảnh, cả hai URL của họ bao gồm / web / guide / html / trước tiêu đề trang.
— Martin F

Câu trả lời:

8

Trong các tìm kiếm trên web rộng lớn của tôi, tôi đã tìm thấy một trích dẫn mà tôi thấy hữu ích và nghi ngờ rằng những người đọc tương lai của câu hỏi này cũng sẽ.

Sử dụng <h1>cho tiêu đề cấp cao nhất

<h1> là thành phần HTML cho tiêu đề cấp đầu tiên của tài liệu:

  • Nếu tài liệu về cơ bản là độc lập, ví dụ Những điều cần xem và làm ở Geneva, tiêu đề cấp cao nhất có thể giống như tiêu đề.
  • Nếu nó là một phần của bộ sưu tập, ví dụ như một phần về Chó trong bộ sưu tập các trang về thú cưng, thì tiêu đề cấp cao nhất sẽ đảm nhận một số lượng bối cảnh nhất định; chỉ cần viết <h1>Dogs</h1>trong khi tiêu đề sẽ hoạt động trong bất kỳ bối cảnh nào: Chó - Hướng dẫn về Thú cưng của bạn.

Nguồn gốc: http://www.w3.org/QA/Tips/Use_h1_for_Title

Trích dẫn ở trên dường như gợi ý rằng <h1>phần tử cấp tài liệu có thể giả định rằng bối cảnh của trang hiện tại được xác định bằng <title>chính nó. Vì vậy, có lẽ nếu có nhiều trang giống hệt nhau <h1>thì điều này sẽ ổn thôi ...

<title>Getting Started | Guide | Uber Product - Company Name</title>
<h1>Getting Started</h1>

<title>Getting Started | Guide | Other Uber Product - Company Name</title>
<h1>Getting Started</h1>

Xem thêm : <title>: yếu tố quan trọng nhất của trang Web chất lượng

Trước khi chấp nhận một câu trả lời tôi muốn chờ xem người khác nghĩ gì.

— Lea Hayes
nguồn
Cập nhật câu hỏi hay và trả lời tiếp theo. Có thể những người khác sẽ hô vang, nếu không chấp nhận câu trả lời của bạn nếu bạn nghĩ đó là câu trả lời đúng.
— dan
1

Tôi sẽ tranh chấp việc sử dụng H1 hoặc bất kỳ cấp tiêu đề nào cho 'Tên sản phẩm' trong tiêu đề.
H1 đại diện cho tiêu đề của trang không phải là sản phẩm, ứng dụng hoặc trang web.
Cả mục đích truy cập và SEO, một H1 lặp đi lặp lại trên mỗi trang sẽ gây bất lợi. Unfortunetaly trong trường hợp này không có tag HTML ngữ nghĩa có nghĩa là 'tiêu đề trang web' để lựa chọn duy nhất là một <div>hoặc <p>hoặc thậm chí một <strong>thẻ để cung cấp cho nó một số nhấn mạnh ngữ nghĩa.

<main>
  <header>
    <div>Logo</div>
    <div>Product name</div>
    <nav>
      <ul> ... </ul>
    </nav>
  </header>
  <section>
    <h1>Getting started</h1>
    ...content
  </section>
</main>
— davidelrizzo
nguồn
0

Không có một câu trả lời đúng, có nhiều lựa chọn khác nhau.

Dưới đây là một vài lựa chọn, nhưng tất cả chúng đều có ưu và nhược điểm:

Tùy chọn này ít nhiều là tùy chọn bạn đã trình bày, nhưng hiển thị nhiều tiêu đề hơn một chút và nội dung sẽ đi đến đâu, cộng với ý tưởng rằng logo sẽ là một yếu tố phức tạp hơn chỉ hình ảnh / văn bản, nó sẽ có tất cả các liên quan yếu tố để tạo ấn tượng như tính cách của công ty, đó là lý do tại sao. Lần nữa. nó không thể là một phần, mà chỉ là một div.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <section>
            <a id="logo" href="http://example.com">Company Name</a>
        </section>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product Name</h1>
            </header>
            <p>...</p>
            <header>
                <h1>User Guide</h1>
                <p>...</p>
            </header>
            <p>...</p>
        </main>
    </body>
</html>

Cái tiếp theo này giới thiệu thẻ chính để hiển thị phần có liên quan của trang. Thẻ này vẫn còn sơ sài về hỗ trợ và tương lai, nhưng đưa ra một dấu hiệu rõ ràng rằng điều hướng không liên quan gì đến sản phẩm hoặc trang. Thẻ phần có thể là container khác và chính có thể là bài viết cho một số người.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <section>
            <a id="logo" href="http://example.com">Company Name</a>
        </section>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product Name</h1>
            </header>
            <section>
                <header>
                    <h1>User Guide</h1>
                    <p>...</p>
                </header>
                <p>...</p>
            </section>
        </main>
    </body>
</html>

Bài tiếp theo sử dụng bài viết vì hầu hết mọi người đều có xu hướng sử dụng bài viết đó.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <article>
            <a id="logo" href="http://example.com">Company Name</a>
            <nav>
                <ul> ... </ul>
            </nav>
            <main>
                <header>
                    <h1>Product Name</h1>
                </header>
                <section>
                    <header>
                        <h1>User Guide</h1>
                        <p>...</p>
                    </header>
                    <p>...</p>
                </section>
            </main>
        </article>
    </body>
</html>

Tôi sẽ sử dụng một cái gì đó giống như cái tiếp theo, vì tôi rất mô đun và hướng khối, vì vậy mỗi phần tử sẽ độc lập với quan điểm cơ sở dữ liệu chỉ liên quan bởi các khóa có liên quan. Mặc dù tôi hầu hết có thể sẽ bỏ qua các thẻ phần.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Getting Started | User Guide | Product Name - Company Name</title>
    </head>
    <body>
        <nav>
            <ul> ... </ul>
        </nav>
        <main>
            <header>
                <h1>Product name</h1>
            </header>
            <section>
                <header>
                    <h1>description of product</h1>
                </header>
                <p>...</p>
            </section>
            <section>
                <header>
                    <h1>user guide</h1>
                </header>
                <p>...</p>
            </section>
            <section>
                <header>
                    <h1>Getting started</h1>
                </header>
                <p>...</p>
            </section>
        </main>

    </body>
</html>

và vẫn còn nhiều lựa chọn hơn

— Bằng sáng chế
nguồn
2
Tất cả đều có vẻ quá phức tạp đối với tôi.
— Martin F
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.