Це звичайна практика для розробників інтерфейсу, щоб розміщувати назву або логотип веб-сайту у тезі H1, а заголовок - у H2. Але більшу частину часу назва сторінки / статті важливіша, оскільки вона несе змістовне значення. Тож моє питання - який найкращий підхід з точки зору семантики та SEO. Приклади:
Надайте інші варіанти, якщо ви думаєте, що вони матимуть більший ефект.
Відповіді:
Зазвичай я не ставлю логотип чи назву сайту в H1. Те, як я люблю на це дивитися, - це те, що кожна сторінка є документом. Цей документ стосується певної теми, відображеної в заголовку сторінки, а також в головному заголовку. Сам веб-сайт є лише видавцем документа. Отже, семантично неправильно використовувати логотип або ім’я сайту як основний заголовок кожної сторінки. Логотипи відображаються на чільному місці, щоб нагадати користувачеві, де вони знаходяться та з метою брендування, але насправді вони не є частиною вмісту чи документа.
Я маю на увазі, коли ви дивитесь сюжет новин, ви можете побачити невеликий логотип каналу новин у кутку, але історія новин не буде називатися "CNN" або "BBC News". Заголовок буде про історію, а не про мережу, яка публікує історію. Так само, коли ви читаєте журнал, у заголовку використовується лише назва статті, а не назва публікації.
Також семантично неправильно використовувати тег H1 для логотипу / імені сайту та один для заголовка документа. Заголовки визначають ієрархічну структуру вмісту на сторінці; використання одного для імені сайту та іншого для заголовка документа, як сказати, ця сторінка має 2 основних розділи: "mydomain.com" та "зв'яжіться з нами".
h1, але лише на головній сторінці . Перейдіть до певного списку, а назва лістингу зараз у h1.
Див. Сторінку № 37 документа Google SEO Card Report Report :
Більшість головних сторінок продукту мають можливість використовувати один
<h1>тег, як на прикладі вище, але в даний час вони використовують лише інші теги заголовків (<h3>у даному випадку) або більш стильні шрифти. Хоча стилізація тексту так, щоб він виглядав більшим, може досягти однакової візуальної презентації, він не надає такому ж семантичному значенню пошуковій системі, що<h1>тег. Найменування продукту та / або кілька слів про його особливості чудово містять у<h1>тегу на головній сторінці продукту.
На основі власного аналізу своїх пропозицій я б прийшов до висновку, що Google очікує , що в H1 з'явиться унікальне значення, характерне для певної сторінки (ілюстрація цього пов'язаного документа).
Ось добре обгрунтування: ваш логотип - це зображення, а не <h1>
Семантично <h1>слід використовувати заголовок сторінки, а заголовок сторінки повинен бути унікальним на кожній сторінці. Ваш логотип чи назва сайту - це не назва сторінки (окрім, можливо, домашньої сторінки).
Ваш логотип / назва сайту має містити звичайний знак, можливо, з ідентифікатором 'заголовок'. Або <header>тег, якщо використовується HTML5.
<img>тегом, воно може бути фоном, тільки не фоном для <h1>тегу. Однак, як свідчить пов'язана стаття, ваш логотип може розглядатися як вміст сторінки.
ІМО на сторінці має бути лише одна Н1. І H1 повинен бути завжди перед H2 - щоб підтримувати правильну ієрархію вашого вмісту.
Логотип часто повторюється на кожній сторінці, і, як ви кажете, на більшості сторінок назва майже завжди важливіша.
На домашній сторінці я б міг використовувати:
логотип / заголовок - H1 [, заголовок - H2]
Хоча, на вашій домашній сторінці логотип міг би бути вашим заголовком.
Однак на всіх наступних сторінках я б хотів:
логотип - інший тег, заголовок - H1
Навіть якщо логотип є фоновим зображенням, якщо це доречно.
Те, що ви дійсно шукаєте в своєму тезі H1, - це назва сторінки або те, що робить цю сторінку унікальною. Якщо ви використовуєте зображення в ньому, вам потрібно зробити це за допомогою резервного методу для деградабельності:
<style>
h1{background: url('imagePathHere.gif');width:60px;height:10px;}
h1 span{display:none}
</style>
<h1><span>Unique Page Title</span></h1>
Таким чином, ви можете встановити зображення, яке відображатиметься для H1 (який люди часто зловживають як область логотипу) і все ще має хороший вміст всередині нього для людей, які користуються погіршеним інтернетом. Це також робить вашу цінність SEO щасливою.
Це надзвичайне питання, пов'язане з практикою (і шаблонами), які там знаходяться.
Особисто мені подобається посилатися на логіку "Виклади 101", враховуючи наступне:
H1 - це як заголовок (звичайно, ви хочете доповнити свій HTML-заголовок), і на сторінці має бути лише один, так як сторінка має лише один заголовок
Н2 є на зразок римських цифр у контурах: I., II., III. Та ін.
Н3 був би контурним еквівалентом А., Б., С.
Часто практичне використання цієї логіки важко застосувати саме на веб-сторінці - існує стільки випадкових бітів інформації, які просто не згортаються в цю ієрархію. Однак, якщо ви сідаєте і намагаєтесь розбити її за цією логікою, я відчуваю, що користь для дисципліни.
Я h1за головного титулу. І головна назва - це прикрашене ім’я сайту, або, як ви його називаєте, логотип. Ось сенс - у заголовку веб-сайту логотип насправді не є логотипом, це ілюстрований заголовок сайту. Дизайнери просто люблять оформляти його як логотип.
Що з LOGO -> H1?
<div>Google</div>
<h1>About Us</h1>
Тепер, як h1це найважливіший розділ, оскільки він повідомляє відвідувачеві, про що йдеться, відвідувач не може зрозуміти сторінку, оскільки h1вона занадто конкретна. Про кого?
<h1>Google</h1>
<h2>About Us</h2>
Ця сторінка про Google. Ось розділ про нас. Бачите - немає питання? Все зрозуміло.
Структура сторінки Якщо ви помістите головний заголовок сайту в div або p, з цим нічого не можна асоціювати.
<p>Google</p>
<h1>About us</h1>
Як я можу пов’язати "About U" з Google, якщо h1з'явиться після? Тому що все, що відбувається ПІСЛЯ H1, пов'язане з ним, а не те, що стає раніше.
<h1>Google</h1>
<h2>About Us</h2>
"Про нас" належить Google. Ніяких питань.
HTML - це ОПИСАННЯ інформації. Тому ви не відображаєте інформацію, а описуєте її. І кожна сторінка незалежна. Тому ви описуєте одну сторінку, оскільки немає ніяких асоціацій між сторінками. Просто посилання, що посилаються на окремі сторінки.
<p>Google</p>
<h1>About us</h1>
ЦЕ сторінка - Про нас. Хто / що це? Незрозуміло. Він просто описує щось, що називається "Про нас".
<h1>Google</h1>
<h2>About Us</h2>
Цей сайт описує Google. І є розділ Про нас. Us = швидше за все, google, тому що структура описує його так.
Я сподіваюся, що я зробив свою думку :)
PS! Ви не можете використовувати h2- h1- h3як це нелогічно, тому великий провал. Тільки тому, що w3c не сказав, що це заборонено, це не робить його дійсним. Це нелогічно, подумайте.
Логотип як тег h2?
Я просто переглядав SitePoint (www.sitepoint.com), що є блогом WordPress із поєднанням звичайних сторінок та блогів. Взагалі я виявив, що вони мають заголовок сторінки як тег h1, а логотип - як h2. Ви можете побачити це на такій сторінці блогу, як www.blogs.sitepoint.com/category/design/. Круїз навколо сайту ви знайдете різні налаштування. Я часто не міг знайти тег h1, як приклад на головній сторінці продукту (http://products.sitepoint.com/). Хоча з цієї сторінки, якщо натиснути який-небудь конкретний продукт для отримання додаткової інформації www.sitepoint.com/books/design2/, ви знову виявите, що h1 - назва сторінки, h2 - логотип. Типова веб-сторінка схожа на блог (див. Www.sitepoint.com/help/). У цьому випадку темою FAQ є всі теги h2.
Том Роджерс
Ваш логотип не потрібно вкладати в заголовок - достатньо простого пов'язаного зображення в полі header. Але має бути як назва вашого сайту, так і назва сторінки / статті <h1>. Ця стаття є інформативною: Правда про кілька тегів H1 в епоху HTML5 .