การใช้ <title>, <header>, <h1> และ <h2> ที่เหมาะสมในเว็บไซต์ HTML5 หรือไม่

15

ฉันศึกษาเรื่องนี้มาหลายวันแล้วและพบข้อเสนอแนะที่ขัดแย้งกันมากมายเกี่ยวกับการค้นหาการจัดทำดัชนี ฉันกำลังทำงานในโครงการที่มีหน้าต่างๆมากมายตั้งแต่คำอธิบายผลิตภัณฑ์อย่างง่ายไปจนถึงเอกสารคู่มือผู้ใช้ในเชิงลึก

ฉันแบ่งคำถามนี้ออกเป็นส่วน ๆ เนื่องจากฉันคิดว่าสิ่งนี้จะทำให้มีประโยชน์มากขึ้นสำหรับผู้อ่านในอนาคตของคำถามนี้

บางส่วนของการค้นพบของฉัน

เว็บไซต์หลายแห่งดูเหมือนว่าจะมีการจัดเค้าร่างเอกสารดังต่อไปนี้:

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

ฉันคิดว่ามันน่าสนใจที่ตัวอย่างด้านบนไม่ได้ใช้<nav>องค์ประกอบที่มีหัวเรื่องที่เหมาะสม ฉันชอบความเรียบง่ายของโครงร่างและเป็น Google ฉันค่อนข้างแน่ใจว่าพวกเขารู้ว่าพวกเขากำลังทำอะไรเมื่อพูดถึงเรื่องนี้

แต่ฉันสับสนเนื่องจากโครงร่างด้านบนไม่ได้กล่าวถึง "Dart" การกล่าวถึงเพียง "Dart" ในแง่ความหมายดูเหมือนว่าจะอยู่ใน<title>องค์ประกอบเอกสารหลัก"โปรแกรมเมอร์ของคู่มือ | Dart: โครงสร้างเว็บแอป"

MDN (Mozilla Developer Network) เป็นอีกตัวอย่างที่ยอดเยี่ยมของเว็บไซต์ที่ตามหลักการนี้ หนังสือหลาย<h1>เล่มมีเนื้อหาครบถ้วน ( ส่วนและโครงร่างของเอกสาร 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

ในขณะที่คนอื่นไม่เข้าใจบริบทมากนัก ( แนวทางปฏิบัติที่ล้าสมัยเพื่อหลีกเลี่ยง ) ตัวอย่างเช่นเค้าร่าง HTML5 ต่อไปนี้เกี่ยวข้องกับ CSS, HTML5 หรือ C # ... หรือไม่โดยมีเพียงแค่เค้าร่างเอกสารที่จะไปโดยใครจะรู้!

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

เพื่อให้เรื่องเลวร้ายที่สุดจะเกิดอะไรขึ้นถ้า MDN มี 2 หัวข้อที่มีชื่อเรื่องเดียวกัน (หรือคล้ายกันมาก) "แนวทางปฏิบัติที่ล้าสมัยเพื่อหลีกเลี่ยง" โดยที่หนึ่งเป็นส่วนหนึ่งของคู่มือ CSS ของพวกเขาและอีกส่วนหนึ่งเป็นส่วนหนึ่งของคู่มือ HTML ...

อีกด้านหนึ่งของเว็บไซต์สเปกตรัมดูเหมือนจะใช้<body>หัวเรื่องระดับหลักสำหรับชื่อผลิตภัณฑ์ (Foo) หรือคอนเทนเนอร์หัวข้อ (คู่มือผู้ใช้สำหรับ Foo) โดยที่หน้าถัดไปทั้งหมดใช้<h2>สำหรับชื่อหน้าจริง

คำถาม

เครื่องมือค้นหาอนุมานบริบทของหน้าเว็บเหมือนกับที่พบในเว็บไซต์ MDN โดยใช้โครงร่าง DOM และ HTML5 อย่างไร

วิธีที่ถูกต้องในการทำเครื่องหมายหน้า HTML5 ต่อไปนี้คืออะไรเพื่อให้ Google สามารถจัดทำดัชนีหน้าเว็บในบริบทที่เหมาะสม ซึ่งรวมถึงการใช้งานของ<title>, <header>และ<h1>องค์ประกอบ

  • ชื่อ บริษัท
  • ชื่อผลิตภัณฑ์
  • คู่มือผู้ใช้
  • เริ่มต้นใช้งาน

หัวข้อที่สำคัญที่สุดใน HTML ที่ได้รับการดูในเว็บเบราว์เซอร์นี้ควรแสดงบริบทของเว็บไซต์ทั้งหมด (ชื่อ บริษัท หรือชื่อผลิตภัณฑ์), การรวบรวมหัวข้อ (คู่มือผู้ใช้) หรือหัวข้อจริงในมือ (เริ่มต้นใช้งาน) ?

เดาที่ดีที่สุดของฉัน

<!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>

นำไปสู่โครงร่าง:

1. Getting Started
seo  html  google-search  html5  semantic-web 
— ทุ่งหญ้าแห้ง
แหล่งที่มา
ฉันเข้าใจคุณถูกต้องหรือไม่ว่าคุณกำลังมองหาเอกสารหาก & วิธีเครื่องมือค้นหาใช้โครงร่าง? (และไม่ได้ให้คำแนะนำที่มาร์กอัปเพื่อการใช้งานที่ไม่เกี่ยวข้องกับ SEO)
— UNOR
@unor ฉันต้องการเรียนรู้ว่าทำไมเทคนิคที่ใช้กับเอกสาร MDN / Dart ทำงานอย่างไรและหากฉันขาดความรู้หลัก ๆ พวกเขาดูเหมือนจะพึ่งพา<title>บริบท ตัวอย่างเช่นมันเป็นความคิดที่ดีหรือไม่ที่จะรวม<h1>User Guide for Ubermachine</h1>ไว้ในทุก ๆ หน้าซึ่งหัวเรื่องจะถูกนำเสนอด้วย<h2>Getting Started</h2>... หรือโครงร่างควรเริ่มต้น<h1>Getting Started</h1>ด้วยการประกอบ<title>Getting Started | User Guide for Ubermachine</title>เพื่อให้บริบทที่เป็นประโยชน์สำหรับเครื่องมือค้นหา นี่คือคำถาม SEO
— Lea Hayes
หากมีผลิตภัณฑ์ 2 รายการแยกกันเป็นไปได้มากที่จะมีคู่มือผู้ใช้ 2 รายการที่มีหัวข้อ "เริ่มต้นใช้งาน" ดังนั้นส่วนหนึ่งของความกังวลของฉันกับแนวทาง MDN และทำไมฉันต้องการทราบว่า<title>มีบริบทเพียงพอหรือไม่
— Lea Hayes
2
ฉันจะไม่กังวลเกี่ยวกับเครื่องมือค้นหา หากคุณกำลังคิดที่ระดับนี้ส่วนที่เหลือของเว็บไซต์ของคุณอาจจะดีในทางเทคนิคและดีพอสำหรับเครื่องมือค้นหา คิดถึงผู้ใช้ของคุณแทน
— John Mueller
1
คุณไม่ได้พูดถึง URL นั่นเป็นกลไกสำคัญสำหรับความเป็นมิตรของมนุษย์และหุ่นยนต์ ตัวอย่างเช่นในขณะที่ MDN สองตัวอย่างของคุณ <h1> นั้นไม่สอดคล้องกัน บริบททั้งสอง URL ประกอบด้วย / web / guide / html / ก่อนหน้าชื่อเรื่อง
— Martin F

คำตอบ:

8

ในระหว่างการค้นหาเว็บที่กว้างขวางของฉันฉันได้พบคำพูดที่ฉันพบว่ามีประโยชน์และสงสัยว่าผู้อ่านในอนาคตของคำถามนี้ก็จะ

ใช้<h1>สำหรับหัวเรื่องระดับบนสุด

<h1> เป็นองค์ประกอบ HTML สำหรับส่วนหัวระดับแรกของเอกสาร:

  • หากเอกสารนั้นเป็นแบบสแตนด์อะโลนตัวอย่างเช่น Things to See and Do ในเจนีวาหัวเรื่องระดับบนอาจเป็นชื่อเดียวกับชื่อ
  • หากเป็นส่วนหนึ่งของคอลเลกชันตัวอย่างเช่นส่วนของ Dogs ในคอลเลกชันของหน้าเกี่ยวกับสัตว์เลี้ยงดังนั้นหัวข้อระดับบนสุดควรเป็นจำนวนบริบท เพียงแค่เขียน<h1>Dogs</h1>ในขณะที่ชื่อควรทำงานในบริบทใด ๆ : สุนัข - คู่มือสัตว์เลี้ยงของคุณ

แหล่งต้นฉบับ: http://www.w3.org/QA/Tips/Use_h1_for_Title

ข้อความข้างต้นดูเหมือนว่าจะแนะนำว่า<h1>องค์ประกอบระดับเอกสารสามารถสมมติว่าบริบทของหน้าปัจจุบันซึ่งกำหนดโดยใช้<title>ตัวเอง น่าจะเป็นไปได้ว่าถ้ามีหลาย ๆ หน้าด้วยเหมือนกัน<h1>นี่ก็โอเค ...

<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>

ดูเพิ่มเติมที่ : <title>: องค์ประกอบที่สำคัญที่สุดของหน้าเว็บที่มีคุณภาพ

ก่อนที่จะยอมรับคำตอบฉันต้องการรอดูว่าคนอื่นคิดอย่างไร

— ทุ่งหญ้าแห้ง
แหล่งที่มา
อัปเดตคำถามที่ดีและคำตอบติดตาม บางทีคนอื่นจะพูดสอดถ้าไม่ยอมรับคำตอบของคุณถ้าคุณคิดว่ามันเหมาะสม
— แดน
1

ฉันจะโต้แย้งการใช้ H1 หรือระดับหัวเรื่องสำหรับ 'ชื่อผลิตภัณฑ์' ในส่วนหัว
H1 แสดงถึงชื่อของหน้าไม่ใช่ผลิตภัณฑ์แอปพลิเคชันหรือเว็บไซต์
ทั้งเพื่อการเข้าถึงและวัตถุประสงค์ SEO ทำซ้ำ H1 ในทุกหน้าจะเป็นอันตราย Unfortunetaly ในกรณีนี้ไม่มีแท็กความหมายที่หมายถึง 'ชื่อเว็บไซต์' ดังนั้นทางเลือกเดียวที่เป็น<div>หรือ<p>หรือบางทีก็<strong>แท็กให้มันบางเน้นความหมาย

<main>
  <header>
    <div>Logo</div>
    <div>Product name</div>
    <nav>
      <ul> ... </ul>
    </nav>
  </header>
  <section>
    <h1>Getting started</h1>
    ...content
  </section>
</main>
— davidelrizzo
แหล่งที่มา
0

ไม่มีคำตอบที่ถูกต้องมีตัวเลือกต่าง ๆ

ด้านล่างเป็นตัวเลือกเล็กน้อย แต่ทั้งหมดมีข้อดีและข้อเสีย:

ตัวเลือกนี้มีมากหรือน้อยที่คุณนำเสนอ แต่แสดงส่วนหัวอีกเล็กน้อยและเนื้อหาจะไปที่ใดรวมถึงแนวคิดที่ว่าโลโก้จะเป็นองค์ประกอบที่ซับซ้อนกว่าภาพ / ข้อความเท่านั้นมันจะมีสิ่งที่เกี่ยวข้องทั้งหมด องค์ประกอบเพื่อสร้างความประทับใจเป็นบุคลิกภาพของ บริษัท ที่ว่าทำไมส่วน อีกครั้ง มันไม่สามารถเป็นส่วนได้ แต่เป็นแค่กอง

<!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>

แท็กถัดไปนี้จะแนะนำแท็กหลักเพื่อแสดงว่าส่วนใดที่เกี่ยวข้องของหน้า แท็กนี้ยังคงร่างสนับสนุนและในอนาคต แต่มีข้อบ่งชี้ชัดเจนว่าการนำทางไม่เกี่ยวข้องกับผลิตภัณฑ์หรือหน้า แท็กส่วนอาจเป็นคอนเทนเนอร์อื่นและหลักอาจเป็นบทความสำหรับบางคน

<!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>

บทความถัดไปใช้บทความเนื่องจากคนส่วนใหญ่มีแนวโน้มที่จะใช้บทความนั้น

<!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>

ฉันจะใช้บางอย่างเช่นอันถัดไปเนื่องจากฉันเป็นแบบแยกส่วนและเชิงบล็อกดังนั้นแต่ละองค์ประกอบจะเป็นอิสระจากมุมมองฐานข้อมูลที่เกี่ยวข้องกับคีย์ที่เกี่ยวข้องเท่านั้น แม้ว่าฉันอาจจะข้ามแท็กส่วน

<!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>

และยังมีตัวเลือกเพิ่มเติม

— PatomaS
แหล่งที่มา
2
พวกเขาทั้งหมดดูซับซ้อนเกินไปสำหรับฉัน
— Martin F
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.