Penggunaan <title>, <header>, <h1> dan <h2> dengan benar di situs web HTML5?

15

Saya telah mempelajari subjek ini selama beberapa hari dan telah menemukan banyak saran yang saling bertentangan berkaitan dengan pengindeksan pencarian. Saya sedang mengerjakan proyek yang memiliki banyak halaman berbeda mulai dari deskripsi produk sederhana hingga dokumentasi pengguna yang mendalam.

Saya telah memecah pertanyaan ini menjadi beberapa bagian karena saya merasa ini akan membuatnya lebih berguna bagi pembaca masa depan dari pertanyaan ini.

Beberapa temuan saya

Beberapa situs web tampaknya memiliki garis besar dokumen seperti berikut ini:

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

Saya merasa menarik bahwa contoh di atas tidak memanfaatkan <nav>elemen dengan tajuk yang sesuai. Saya suka kesederhanaan garis besar dan menjadi Google saya cukup yakin bahwa mereka tahu apa yang mereka lakukan ketika sampai pada hal ini.

Tapi saya bingung karena garis besar di atas tidak menyebutkan "Dart". Satu-satunya penyebutan "Dart" dalam arti semantik tampaknya berada dalam <title>elemen dokumen utama "Panduan Programmer | Dart: Aplikasi web terstruktur".

MDN (Jaringan Pengembang Mozilla) adalah contoh cemerlang lain dari situs web yang mengikuti prinsip ini. Banyak <h1>judul yang menyediakan konteks lengkap ( Bagian dan Garis Besar Dokumen 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

Sementara yang lain tidak masuk akal di luar konteks ( Praktek usang untuk dihindari ). Sebagai contoh, apakah garis besar HTML5 berikut berhubungan dengan CSS, HTML5 atau C # ... hanya dengan garis besar dokumen yang harus dilalui, siapa tahu!

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

Untuk memperburuk keadaan, bagaimana jika MDN berisi 2 topik dengan judul yang sama (atau sangat mirip) "Praktek usang untuk dihindari" di mana satu adalah bagian dari panduan CSS mereka dan yang lainnya adalah bagian dari panduan HTML mereka ...

Di ujung lain spektrum situs web tampaknya menggunakan <body>tajuk tingkat- utama untuk nama produk (Foo) atau wadah topik (Panduan Pengguna untuk Foo). Di mana semua halaman selanjutnya kemudian digunakan <h2>untuk judul halaman yang sebenarnya.

Pertanyaan

Bagaimana mesin pencari menyimpulkan konteks halaman web seperti yang ditemukan di situs web MDN menggunakan DOM dan garis besar HTML5?

Apa cara yang tepat untuk menandai halaman HTML5 berikut sehingga Google dapat mengindeks halaman dalam konteks yang sesuai? Ini termasuk penggunaan <title>, <header>dan <h1>elemen.

  • Nama Perusahaan
  • nama Produk
  • Panduan pengguna
  • Mulai

Judul paling penting dalam HTML yang dilihat di browser web, haruskah ini mewakili konteks seluruh situs web (Nama Perusahaan atau Nama Produk), kumpulan topik (Panduan Pengguna) atau topik aktual di tangan (Memulai) ?

Tebakan terbaik saya

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

Menuju garis besar:

1. Getting Started
seo  html  google-search  html5  semantic-web 
— Lea Hayes
sumber
Apakah saya mengerti Anda dengan benar bahwa Anda mencari dokumentasi jika & bagaimana mesin pencari menggunakan garis besar? (dan bukan untuk saran yang markup digunakan, tidak terkait dengan SEO)
— unor
@unor Saya ingin mempelajari mengapa teknik yang digunakan pada dokumentasi MDN / Dart berfungsi dan jika saya kehilangan pengetahuan kunci. Mereka tampaknya mengandalkan <title>untuk memberikan konteks. Sebagai contoh, apakah itu ide yang buruk untuk memasukkan yang sama <h1>User Guide for Ubermachine</h1>pada setiap halaman di mana judul topik disajikan dengan <h2>Getting Started</h2>... atau harus garis besar dimulai <h1>Getting Started</h1>dengan yang menyertainya <title>Getting Started | User Guide for Ubermachine</title>untuk memberikan konteks yang berguna untuk mesin pencari. Ini pertanyaan SEO.
— Lea Hayes
Jika ada 2 produk terpisah, maka sangat mungkin bahwa akan ada 2 panduan pengguna yang berisi topik "Memulai". Oleh karena itu bagian dari keprihatinan saya dengan pendekatan MDN dan mengapa saya ingin tahu apakah <title>menyediakan konteks yang cukup.
— Lea Hayes
2
Saya tidak akan khawatir tentang mesin pencari. Jika Anda berpikir pada tingkat ini, sisa situs Anda mungkin akan baik secara teknis, dan cukup baik untuk mesin pencari. Pikirkan pengguna Anda sebagai gantinya.
— John Mueller
1
Anda tidak menyebutkan URL. Itu juga merupakan mekanisme penting untuk keramahan manusia dan robot. Misalnya, sedangkan dua contoh MDN Anda <h1> tidak konsisten kembali. konteks, kedua URL mereka termasuk / web / guide / html / sebelum judul halaman.
— Martin F

Jawaban:

8

Selama pencarian web ekstensif saya, saya telah menemukan kutipan yang saya temukan berguna dan curiga bahwa pembaca masa depan dari pertanyaan ini juga akan.

Gunakan <h1>untuk tajuk tingkat atas

<h1> adalah elemen HTML untuk tajuk tingkat pertama dari dokumen:

  • Jika dokumen pada dasarnya berdiri sendiri, misalnya Things to See dan Do di Jenewa, judul tingkat atas mungkin sama dengan judulnya.
  • Jika itu adalah bagian dari koleksi, misalnya bagian tentang Anjing dalam kumpulan halaman tentang hewan peliharaan, maka judul tingkat atas harus mengasumsikan sejumlah konteks tertentu; tulis saja <h1>Dogs</h1>sementara judulnya bisa digunakan dalam konteks apa pun: Anjing - Panduan Anda untuk Hewan Peliharaan.

Sumber Asli: http://www.w3.org/QA/Tips/Use_h1_for_Title

Kutipan di atas tampaknya menunjukkan bahwa <h1>elemen level dokumen dapat mengasumsikan bahwa konteks halaman saat ini yang didefinisikan menggunakan <title>dirinya sendiri. Jadi mungkin jika ada beberapa halaman dengan yang sama persis <h1>maka ini akan baik-baik saja ...

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

Lihat Juga : <title>: elemen paling penting dari halaman Web berkualitas

Sebelum menerima jawaban, saya ingin menunggu dan melihat apa yang dipikirkan orang lain.

— Lea Hayes
sumber
Pembaruan pertanyaan yang bagus dan jawaban tindak lanjut. Mungkin orang lain akan berbunyi, jika tidak menerima jawaban Anda jika Anda pikir itu jawaban yang benar.
— dan
1

Saya akan membantah penggunaan H1 atau level tajuk apa pun untuk 'Nama Produk' di header.
H1 mewakili judul halaman bukan produk, aplikasi atau situs.
Baik untuk Aksesibilitas dan keperluan SEO, pengulangan H1 pada setiap halaman akan merugikan. Sayangnya dalam hal ini tidak ada tag HTML semantik yang berarti 'judul situs' sehingga satu-satunya pilihan adalah <div>atau <p>atau bahkan mungkin <strong>tag untuk memberikan penekanan semantik.

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

Tidak ada satu jawaban yang benar, ada beberapa pilihan.

Berikut adalah beberapa opsi, tetapi semuanya memiliki pro dan kontra:

Opsi ini kurang lebih yang Anda sajikan, tetapi menunjukkan sedikit lebih banyak judul dan ke mana konten akan pergi, ditambah gagasan bahwa logo, akan menjadi elemen yang lebih kompleks daripada hanya gambar / teks, itu akan memiliki semua yang terkait elemen membuat kesan sebagai kepribadian perusahaan, itu sebabnya bagian. Lagi. itu tidak bisa menjadi bagian, tetapi hanya sebuah 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>

Ini berikutnya memperkenalkan tag utama untuk menunjukkan apa yang merupakan bagian yang relevan dari halaman. Tag ini masih samar tentang dukungan dan masa depan, tetapi memberikan indikasi yang jelas bahwa navigasi tidak ada hubungannya dengan produk atau halaman. Tag bagian bisa berupa wadah lain dan utama bisa menjadi artikel untuk sebagian orang.

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

Yang berikutnya menggunakan artikel karena kebanyakan orang cenderung menggunakannya.

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

Saya akan menggunakan sesuatu seperti yang berikutnya, karena saya sangat modular dan berorientasi blok, sehingga setiap elemen akan independen dari perspektif basis data hanya terkait dengan kunci yang relevan. Meskipun saya kemungkinan besar akan melewatkan tag bagian.

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

dan masih, ada lebih banyak opsi.

— Patoma
sumber
2
Mereka semua terlihat terlalu rumit bagiku.
— Martin F
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.