<h1> - Dampak semantik vs dampak SEO

Ada banyak perdebatan tentang arsitektur struktur heading di html5. Setelah membaca berbagai artikel, saya sampai pada tiga kemungkinan arsitektur yang masuk akal bagi saya, tetapi saya tidak yakin yang merupakan metode pendekatan yang tepat dan tepat. Saya akan mencantumkannya di bawah ini dengan contoh kode dan mudah-mudahan seseorang dapat menjelaskan keseimbangan yang tepat, atau lebih buruk / lebih baik lagi, katakanlah "Anda melakukan hal yang salah" dan bantu.

Pendekatan 1: Versi A

Tunggal <h1>: Menggunakan judul untuk konten khusus halaman saja.

Ini menjadikan <h1>navigasi tingkat atas sebagai tajuk khusus halaman sambil mengalir <h2-6>sesuai kebutuhan di dalam area konten. Sambil meninggalkan elemen <header>,, <nav>dan <footer>sebagai elemen "tanpa judul".

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

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

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

Pendekatan 1: Versi 2

Beberapa <h1>: Hanya menggunakan judul untuk konten khusus halaman saja.

Sama seperti 1A dengan penambahan beberapa topik konten halaman yang sama pentingnya. (mis. mungkin untuk blog atau membagi halaman topik)

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

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

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

Pendekatan 1 Garis Besar: Paling logis untuk SEO (pendapat saya dari penelitian saya)

• BODY Tanpa Judul
  • NAV tanpa judul
• pos utama
  • Tajuk Bagian
    • Tajuk Subbagian
  • BAGIAN Tanpa Judul

Pendekatan 2:

Multipel <h1>: Tekankan struktur kerangka DAN hierarki konten

Hal ini berlaku judul untuk elemen situs-lebar <header>, <nav>dan <footer>menggunakan beberapa <h1>'s untuk elemen yang berorientasi non-konten.

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

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

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

Approach 2 Outline: Paling logis untuk garis besar semantik (sekali lagi, menurut saya)

• Tajuk Tajuk
  • Judul Navigasi
• pos utama
  • Tajuk Bagian
    • Tajuk Subbagian
• Footer Heading
  • Tajuk Bagian

Pendekatan 3

Tunggal <h1>: Fokus hierarki konten; tingkat yang lebih rendah <h1-6>untuk elemen di seluruh situs

Hal ini berlaku judul untuk elemen situs-lebar <header>, <nav>dan <footer>TANPA menggunakan beberapa <h1>'s untuk elemen yang berorientasi non-konten.

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

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

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

Approach 3 Outline: agak campuran dari kedua pendekatan

• Tajuk Tajuk
  • Judul Navigasi
• pos utama
  • Tajuk Bagian
    • Tajuk Subbagian
  • Footer Heading
  • Tajuk Bagian

Jadi dengan semua yang dikatakan, bagaimana saya memahami semua ini? Apakah ada satu pendekatan yang membawa nilai lebih besar daripada yang lain? Apakah ada yang lebih masuk akal dalam hal SEO? Adakah keseimbangan bahagia yang bisa dicapai?

Sumber: Ada banyak lagi, ini adalah yang dapat saya ingat saat ini

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

Untuk memulai, tidak ada contoh Anda yang ada hubungannya dengan semantik. Pertanyaan Anda sepenuhnya didasarkan pada model parser di mana halaman dibaca dari atas ke bawah dengan cara tradisional.

Karena alasan ini, contoh pertama Anda benar. Contoh-contoh berikut akan gagal memberi Anda hasil yang dapat diprediksi dan dapat menyebabkan Anda serius membakar hati.

Harap mengerti bahwa halaman web Anda akan dilihat secara konseptual dalam beberapa cara: satu, mengikuti model DOM tradisional di mana HTML dan semacamnya dievaluasi dari perspektif pengguna; dua, teks hanya dengan mark-up sederhana untuk menunjukkan judul, sub-judul, konten, dan sebagainya; dan tiga, menggunakan tampilan semantik di mana benar-benar hanya sedikit bobot diterapkan ke tag header dalam indeks berdasarkan tempatnya di hierarki h1-6. Dari model DOM, Anda akan mendapatkan hal-hal seperti tag judul, deskripsi meta-tag, dan sebagainya yang akan hilang dalam dua tampilan lainnya. Namun, tampilan DOM tidak banyak berpengaruh pada konten Anda. Fungsi utamanya adalah untuk memahami halaman Anda, di mana navigasi Anda, di mana header dan footer Anda, di mana konten Anda dimulai dan berakhir, dll.

Yang benar-benar harus Anda perhatikan hanyalah teks dan tampilan semantik. Pandangan semantik sebagian besar berasal dari tampilan hanya teks, namun, ia disertai dengan berbagai linguistik, psikosemantika, semanit, dan analisis lain dari konten Anda.

Saya tidak akan menjelaskan semantik lagi, tetapi saya akan mengarahkan Anda ke jawaban yang saya tulis beberapa waktu lalu yang merupakan tutorial mini tentang subjek: Mengapa situs web dengan peringkat isian kata kunci lebih tinggi dari satu tanpa di hasil pencarian google?

Karena web didasarkan pada halaman yang dicetak dan parser dari masa awal mengikuti tradisi ini dan sebagian besar tidak berubah, tidak mungkin untuk menghindarinya. Berikut ini adalah jawaban yang menjelaskan urutan baca judul yang tetap merupakan strategi terbaik berdasarkan model parser: Meningkatkan peringkat Google untuk kata kunci umum vs. spesifik

Meskipun saya akan mengakui bahwa mungkin ada sedikit efek memindahkan tag header, saya bertanya, Apakah itu hal yang bijaksana untuk dilakukan? Tidak! Bagaimana hal-hal tertimbang hari ini mungkin bukan bagaimana mereka tertimbang besok. Mengikuti format tradisional menjamin hasil yang dapat diprediksi di mana sebagai perubahan sederhana dalam bobot dapat membuat situs Anda berputar-putar.

Berikut ini adalah perspektif tentang cara kerjanya: Manfaat nama domain dalam SEO Abaikan judul dan lewati bagian paling atas dari jawaban dan dapatkan ke perspektif pemrogram.

Jika Anda membaca tiga jawaban ini, Anda dapat dengan mudah memahami efek dari tag header. Sangat mungkin untuk merusak kinerja halaman / situs Anda menjadi lucu dengan cara Anda mengatur ini. Bahkan mengikuti tradisi, Anda dapat membatalkan tag judul dan tag h1 dengan sangat cepat dengan mengoptimalkan beberapa tag tajuk yang lebih rendah. Keseimbangan yang cermat adalah kuncinya.

Terakhir, saya akan memperingatkan Anda tentang semua saran SEO online ini dari orang-orang yang bukan insinyur. Ini adalah raket untuk menghasilkan uang dan bersaing untuk perhatian Anda. Cara kerja mesin pencari bukanlah rahasia. Itu ada di luar sana jika Anda tahu ke mana harus mencari. Hampir semua pakar SEO sama sekali bukan ahli karena mereka tidak bisa memberi tahu Anda internal tentang bagaimana teknologi pencarian disatukan. Pendek menjadi insinyur untuk Google atau Bing, kita tidak pernah bisa benar-benar tahu persis bagaimana mesin pencari ini bekerja. Untungnya, Google telah memberi tahu kami cukup (dan mereka benar-benar telah memberi tahu kami hampir semua yang perlu kami ketahui- dan tidak, itu tidak datang dari seorang pria bernama Matt) bahwa jika Anda mengetahui sains dan teknologi, serangkaian asumsi yang cukup masuk akal dapat dibuat. Dari sudut pandang saya, sebagian besar SEO lebih salah daripada benar sementara beberapa memiliki hit rate lebih tinggi daripada rata-rata.

Berikut ini adalah dari perspektif spesifikasi HTML5, berdasarkan pada asumsi bahwa konsumen (seperti mesin pencari) akan mengharapkan dan bekerja dengan apa yang ditentukan dalam standar HTML. Dalam praktik saat ini, detail markup seperti itu mungkin tidak terlalu menjadi masalah bagi SEO, tetapi ini penting bagi konsumen dan aksesibilitas lainnya.

Saya akan menggunakan judul dari peringkat yang sesuai, karena inilah yang didorong oleh HTML5 , tetapi juga memungkinkan untuk digunakan di h1mana-mana (jika Anda selalu menggunakan elemen konten bagian bila perlu).

Anda tidak dapat "menerapkan" tajuk headeratau footerelemen, karena mereka tidak membagi konten (mereka hanya bisa berisi tajuk, tetapi tajuk ini tidak akan terbatas pada lingkup header/ footer).

Setiap elemen konten sectioning ( section, article, nav, aside) dan setiap elemen sectioning akar ( body, blockquote, dll) dapat memiliki judul diterapkan.

Elemen pemisah ini / elemen root dan elemen heading h1- h6adalah satu-satunya elemen yang penting untuk garis besar dokumen .

Sementara setiap bagian "merindukan" suatu tajuk, ia tidak diharuskan untuk menyediakan tajuk (dalam kasus seperti itu, ia mendapat tajuk "tersirat", tanpa judul). Meskipun sering berguna untuk menyediakannya, ada beberapa kasus yang sebenarnya tidak perlu. Misalnya, jika Anda hanya memiliki satu navigasi, memiliki navtanpa judul akan cukup. Tetapi jika situs Anda akan memiliki beberapa navigasi, mungkin masuk akal untuk menggunakan judul yang menjelaskan tujuan yang berbeda.

Dalam pendekatan Anda 1, bodyini adalah bagian tanpa judul (tapi ini hanya kasus karena Anda navmuncul sebelum elemen heading pertama; jika tidak, ini h1akan menjadi heading untuk seluruh dokumen).
Saya tidak berpikir bahwa memiliki bodybagian tanpa judul adalah pilihan yang baik. Ini adalah entri pertama dalam garis besar, dan, idealnya (tetapi tidak harus), segala sesuatu yang mengikuti adalah dalam ruang lingkup entri ini.

Untuk situs web tipikal yang memiliki navigasi global, masuk akal ( penjelasan lebih panjang ) untuk menggunakan nama situs untuk bodytajuk bagian, karena navigasi global adalah milik seluruh situs , bukan hanya ke dokumen saat ini:

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

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

</body>

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

Konten utama untuk dokumen ini juga harus dalam lingkup tajuk situs, karena situs tersebut adalah konteks konten utama dokumen ini, yaitu, itu bagian dari situs Anda:

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

Jika Anda memiliki beberapa bagian konten utama, misalnya, daftar posting blog, sering kali masuk akal untuk menggunakan sectionyang berisi semua ini article, alih-alih memiliki articleanak langsung dari 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"
-->

Jika Anda memiliki footer seluruh situs yang sangat kompleks sehingga perlu elemen pemisah, itu harus lagi pada tingkat yang sama seperti navdan konten utama (karena itu milik situs, bukan konten utama):

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

(Dalam semua contoh ini, navigasi dilakukan sebelum konten utama, tetapi sering kali masuk akal untuk memiliki konten utama terlebih dahulu. Bertukar ini mungkin. Anda hanya perlu memastikan bahwa h1dengan nama situs muncul sebelum bagian / judul lain.)