Bir HTML5 web sitesinde <title>, <header>, <h1> ve <h2> kullanımı doğru mu?

Birkaç gündür bu konuyu inceliyorum ve arama endeksleme konusunda birçok çelişkili öneri buldum. Basit ürün açıklamalarından derinlemesine kullanıcı belgelerine kadar birçok farklı sayfası olan bir proje üzerinde çalışıyorum.

Bu soruyu bölümlere ayırdım, çünkü bunun bu sorunun gelecekteki okuyucuları için daha yararlı olacağını düşünüyorum.

Bulgularımdan bazıları

Bazı web sitelerinin aşağıdaki gibi ana hatlar olduğu varsayılmaktadır:

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

Yukarıdaki örneğin <nav>elemanı uygun bir başlık ile kullanmaması ilginç buluyorum . Anahatların sadeliğini ve Google olmaktan hoşlanıyorum. Bu konuda ne yaptıklarını bildiklerinden oldukça eminim.

Ama yukarıdaki ana hat "Dart" dan bahsetmediği için kafam karıştı. Anlamsal anlamda "Dart" ın tek sözü, " <title>Programcı Kılavuzu | Dart: Yapısal web uygulamaları" ana belge öğesinde görünmektedir .

MDN (Mozilla Geliştirici Ağı), bu prensibi takip eden bir web sitesinin mükemmel bir örneğidir. <h1>Başlıkların çoğu tam bağlam sağlar ( HTML5 Belgesinin Bölümleri ve Ana Hatları ):

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

Diğerleri bağlamdan fazla anlam ifade etmese de ( Kaçınılması gereken eski uygulamalar ). Örneğin, aşağıdaki HTML5 taslağı CSS, HTML5 veya C # ... ile ilgilidir, sadece belge taslağı ile, kim bilir!

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

Daha da kötüsü, MDN aynı (ya da çok benzer) "Kaçınılması gereken eski uygulamalar" başlıklı 2 konu içeriyorsa, biri CSS kılavuzunun ve diğeri HTML kılavuzunun bir parçasıysa ...

Spektrumun diğer ucunda web siteleri <body>, ürün adı (Foo) veya konu kabı (Foo için Kullanıcı Kılavuzu) için ana düzey başlığını kullanıyor gibi görünüyor . Sonraki tüm sayfaların <h2>gerçek sayfa başlığı için kullandığı yer .

Soru

Arama motorları, DOM ve HTML5 anahatlarını kullanarak MDN web sitesinde bulunanlar gibi bir web sayfasının içeriğini nasıl belirler?

Google'ın sayfayı uygun bağlamda dizine ekleyebilmesi için aşağıdaki HTML5 sayfasını biçimlendirmenin doğru yolu nedir? Bu kullanımını içerir <title>, <header>ve <h1>elemanları.

Şirket Adı
Ürün adı
Kullanici rehberi
Başlangıç

Bir web tarayıcısında görüntülenen HTML'deki en önemli başlık, bunun tüm web sitesinin bağlamını (Şirket Adı veya Ürün Adı), konuların toplanmasını (Kullanıcı Kılavuzu) veya gerçek konuyu (Başlarken) temsil etmesi gerekir ?

En iyi tahminim

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

Taslağa öncülük etmek:

1. Getting Started

— Lea Hayes
kaynak

Arama motorlarının anahatları nasıl ve nasıl kullandığını belgelemek istediğinizi doğru anladım mı? (ve SEO ile ilgisi olmayan hangi biçimlendirmenin kullanılacağı konusunda tavsiye için değil)

— Şubat'ta

@ unor MDN / Dart belgelerinde kullanılan tekniğin neden işe yaradığını ve herhangi bir önemli bilgiyi kaçırıp kaybetmediğimi öğrenmek istiyorum. <title>Bağlam sağlamaya güveniyor gibi görünüyorlar . Örneğin, aynı içerecek şekilde kötü bir fikir olduğunu <h1>User Guide for Ubermachine</h1>konu başlığı ile sunulan her sayfada <h2>Getting Started</h2>... ya anahat ile başlamalıdır <h1>Getting Started</h1>bir eşliğinde <title>Getting Started | User Guide for Ubermachine</title>arama motorları için yararlı içerik sağlamak için. Bu bir SEO sorusu.

— Lea Hayes

2 ayrı ürün olsaydı, kendi "Başlarken" konusunu içeren 2 kullanıcı kılavuzu olması muhtemeldir. Bu nedenle MDN yaklaşımı ve neden <title>yeterli bağlam sağlayıp sağlamadığını bilmek istiyorum .

— Lea Hayes

Arama motorları için endişelenmezdim. Bu düzeyde düşünüyorsanız, sitenizin geri kalanı teknik olarak iyi ve arama motorları için yeterince iyi olacaktır. Bunun yerine kullanıcılarınızı düşünün.

— John Mueller

URL'den bahsetmediniz. Bu aynı zamanda insan ve robot dostu için önemli bir mekanizmadır. Örneğin, iki MDN örneğiniz <h1> ler tutarsızken. bağlamında, her iki URL'si de sayfa başlığından önce / web / guide / html / içerir.

— Martin F

Yanıtlar:

Kapsamlı web aramalarım sırasında faydalı bulduğum bir alıntı buldum ve bu sorunun gelecekteki okuyucularının da bundan şüpheleneceğinden şüpheleniyorum.

<h1>Üst düzey başlık için kullanın

<h1> bir dokümanın birinci düzey başlığı için HTML öğesidir:

Belge temel olarak bağımsızsa, örneğin Cenevre'de Görülecekler ve Yapılacaklar ise, üst düzey başlık muhtemelen başlıkla aynıdır.

Bir koleksiyonun parçasıysa, örneğin evcil hayvanlar hakkındaki sayfalar koleksiyonundaki Köpekler hakkındaki bir bölümse, üst düzey başlık belirli bir bağlam varsaymalıdır; <h1>Dogs</h1>başlık herhangi bir bağlamda çalışması gerekirken yazmanız yeterlidir : Köpekler - Evcil Rehberiniz.

Orijinal Kaynak: http://www.w3.org/QA/Tips/Use_h1_for_Title

Yukarıdaki alıntı, belge düzeyindeki <h1>öğenin, geçerli sayfanın <title>kendisi kullanılarak tanımlanan bağlamın olduğunu varsayabileceğini düşündürmektedir . Yani muhtemelen aynı ile birden fazla sayfa varsa <h1>o zaman bu iyi olurdu ...

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

Ayrıca Bakınız : <title>: kaliteli bir Web sayfasının en önemli unsuru

Bir cevabı kabul etmeden önce beklemek ve başkalarının ne düşündüğünü görmek istiyorum.

— Lea Hayes
kaynak

Güzel soru güncellemeleri ve takip cevabı. Belki de doğru olduğunu düşünüyorsanız, cevabınızı kabul etmezseniz, diğerleri gelecektir.

— dan

Başlıktaki 'Ürün Adı' için bir H1 veya herhangi bir başlık seviyesinin kullanılmasına itiraz ederim.
H1, ürünün, uygulamanın veya sitenin değil sayfanın başlığını temsil eder.
Hem Erişilebilirlik hem de SEO amaçlı olarak, her sayfada tekrarlanan bir H1 zararlı olacaktır. Unfortunetaly bu durumda anlamı 'sitesi başlığı' öylesine tek seçenek bir olduğuna hiç semantik HTML etiketi vardır <div>veya <p>hatta belki bir <strong>o bazı semantik vurgu vermek etiketi.

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

— davidelrizzo
kaynak

Doğru bir cevap yok, farklı seçenekler var.

Aşağıda birkaç seçenek vardır, ancak hepsinin artıları ve eksileri vardır:

Bu seçenek az çok sunduğunuz seçenektir, ancak biraz daha fazla başlık ve içeriğin nereye gideceğini, ayrıca logonun yalnızca resim / metinden daha karmaşık bir öğe olacağı fikrini gösterir. şirketin kişiliği gibi bir izlenim bırakmak için unsurlar, bu yüzden bölüm. Tekrar. bir bölüm değil, sadece bir div olabilir.

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

Bu sırada, sayfanın alakalı bölümünün ne olduğunu göstermek için ana etiket tanıtılır. Bu etiket hala destek ve gelecek konusunda kabataslak olmakla birlikte, navigasyonun ürün veya sayfa ile ilgisi olmadığını açıkça belirtmektedir. Bölüm etiketi başka bir kap olabilir ve ana bazı insanlar için makale olabilir.

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

Bir sonraki makale makaleyi kullanır, çünkü çoğu insan bunu kullanmaya eğilimlidir.

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

Çok modüler ve blok odaklı olduğum için, bir sonraki gibi bir şey kullanırdım, bu yüzden her öğe sadece ilgili anahtarlarla ilgili bir veritabanı perspektifinden bağımsız olacaktır. Her ne kadar büyük olasılıkla bölüm etiketlerini atlasam da.

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

ve yine de, daha fazla seçenek var.

— PatomaS
kaynak

Hepsi benim için aşırı karmaşık görünüyor.

— Martin F

Bir HTML5 web sitesinde <title>, <header>, <h1> ve <h2> kullanımı doğru mu?

Bulgularımdan bazıları

Soru

En iyi tahminim

<h1>Üst düzey başlık için kullanın

`<h1>`Üst düzey başlık için kullanın