Заглавия и структура на страницата

Модул 3: Техническата основа на една страница · Време за четене: 11 минути

Цел на урока: След този урок ще можете да изградите страница с ясно основно заглавие и логични подзаглавия, да обясните какво правят Google и екранните четци със заглавията и да пишете добри alt текстове и имена на файлове за изображенията.

Основни понятия: заглавие (<h1> до <h6>), основно заглавие, подзаглавие, прескачане на ниво, семантичен HTML, екранен четец, форматиран текст, който не е заглавие, alt текст, празен alt="" за декорация, име на файл, текст в изображения

Заглавията са съдържанието на Вашата страница

Никой не обича да чете дълъг текст без подзаглавия. В интернет това важи още повече: посетителите първо преглеждат страницата набързо и започват да четат едва когато видят, че отговорът е там. Заглавията помагат за това. Но заглавията са нещо повече от големи, удебелени букви. В HTML те са отделни елементи с ниво:

<h1>Булчински букети по поръчка</h1>
  <h2>Как работим</h2>
    <h3>Запознанството</h3>
    <h3>Пробният букет</h3>
  <h2>Примери</h2>
  <h2>Често задавани въпроси</h2>

(Примерът е от сайта на цветарка: „Булчински букети по поръчка“ с подзаглавия „Как работим“, „Запознанството“, „Пробният букет“, „Примери“ и „Често задавани въпроси“.) <h1> е основното заглавие: за какво е тази страница? Елементите <h2> са главите, <h3> са разделите в тях и така нататък до <h6>. Отстъпът по-горе е само за нагледност; в истинския HTML той няма значение.

Две групи наистина четат тази структура:

1. Хората с екранен четец. Незрящ или слабовиждащ посетител често първо оставя екранния четец да изброи всички заглавия и след това преминава към частта, която търси. Без истински заглавия страницата е един дълъг непрекъснат текст.
2. Търсачките. Google използва заглавията, за да разбере за какво са отделните части на една страница.

Какво казва Google за заглавията

За заглавията се разказват много митове. Ето какво казва самият Google:

• В ръководството на Google за начинаещи в SEO пише, че редът на заглавията няма значение за Google Search и че няма магически брой заглавия, които една страница трябва да има. Заглавия в логичен ред обаче са много полезни за екранните четци.
• John Mueller от Google каза във видео (2019), че системите на Google нямат проблем с няколко заглавия <h1> на една страница. Google се опитва да работи с HTML такъв, какъвто е: едно <h1>, няколко или само форматиран текст без истински заглавия.
• В документацията за връзките със заглавие (title links, урок 3.1) Google все пак посочва ситуация, в която нещо може да се обърка: липса на ясно основно заглавие. Ако в горната част има няколко големи, открояващи се заглавия и не е ясно кое е основното, Google може трудно да избере добра връзка със заглавие. Google препоръчва основното заглавие да се отличава ясно, например като първото видимо <h1>.

Изводът на този курс: едно ясно <h1> на страница е добър навик, не защото Google иначе ще Ви накаже, а защото тогава страницата ясно казва на всички за какво е. Читателите, екранните четци и Google не могат да го пропуснат. Затова проверката в задача A3.2 показва зелено при точно едно непразно <h1>, оранжево при повече от едно и червено, ако няма нито едно.

Какво често се обърква

Изграждане на страница, която дава отговор

Добър ред за почти всяка страница:

1. Основно заглавие (<h1>), което казва какво ще намери посетителят тук. Често прилича на заглавието (title) от урок 3.1, но не е нужно да е същото. Заглавието (title) се показва в резултатите от търсенето, а основното заглавие е на самата страница.
2. Кратко въведение, което веднага дава най-важния отговор.
3. Подзаглавия (<h2>) за всяка подтема, написани като нещо, което читателят търси: "Колко струва сватбен букет?" казва повече от "Цени".
4. При нужда <h3> под <h2>, а не самостоятелно.

Урок 7.3 разглежда по-подробно самото писане. Тук става дума за скелета.

Изображения: alt текст и име на файл

Търсачката не "вижда" снимката така, както я виждате Вие. Google използва компютърно зрение, но извлича много от текста около изображението. Самият Google посочва най-важния източник: alt текста.

<img src="/snimki/bulchinski-buket-bozhuri-bel.jpg"
     alt="Булчински букет с бели божури и евкалипт">

Alt текстът (алтернативен текст) има две задачи:

• Достъпност: екранният четец го прочита на онези, които не могат да видят изображението. Ако изображението не може да се зареди, браузърът показва текста вместо снимката.
• Разбиране: Google използва alt текста заедно с компютърното зрение, за да разбере какво има на изображението. Това помага най-вече в Google Images.

Ето как се пише добър alt текст:

• Опишете какво се вижда и защо е на тази страница, в едно кратко изречение.
• Използвайте ключови думи само ако пасват естествено. Google предупреждава, че alt текстове, натъпкани с ключови думи, създават лошо изживяване и могат да бъдат приети за спам.
• Изображение, което е само украса (линия, фонова шарка), получава празен alt: alt="". Тогава екранният четец го пропуска. Липсващ атрибут alt е нещо друго: тогава екранният четец понякога прочита името на файла.
• Ако в изображението има важен текст (работно време, цена, листовка), поставете този текст и като обикновен текст на страницата. Текст в картинка е труден за четене от екранен четец и от търсачка.

Името на файла също помага малко. Google препоръчва кратки, описателни имена и дава image1.jpg или pic.gif като пример за това, което е по-добре да избягвате. bulchinski-buket-bozhuri-bel.jpg казва повече от IMG_4032.jpg.

Скоростта и размерите на изображенията се разглеждат в урок 4.3.

На практика: заглавия в конструкторите на сайтове

• В AI Builder на WebOké първото заглавие на страницата автоматично става <h1>, а всички следващи заглавия стават <h2>. Така всяка страница има точно едно основно заглавие. За всяка снимка можете да въведете описание; то става alt текстът. SEO проверката предупреждава за снимки без описание.
• В WordPress в блоковия редактор избирате нивото (H1 до H6) в блока Заглавие. Темата обикновено вече прави самото заглавие на страницата <h1>; тогава в текста използвайте H2 и по-ниски нива. Alt текста въвеждате при изображението в медийната библиотека или в блока.

Другите конструктори на сайтове работят по подобен начин. Ако се колебаете, погледнете изходния код (Ctrl+U) или потърсете с Ctrl+F за <h1.

Обобщение

• Заглавията (<h1> до <h6>) са съдържанието на Вашата страница за читателите, екранните четци и търсачките.
• Google няма проблем с няколко <h1> или с различен ред, но все пак препоръчва ясно основно заглавие. Едно ясно <h1> е добър навик.
• Избирайте нивото според структурата, а не според размера на шрифта; по възможност не прескачайте нива.
• Добрият alt текст описва накратко какво се вижда; украсата получава alt=""; без натрупване на ключови думи.
• Важният текст трябва да е на страницата, а не само в изображение.

Тест

Задача

Задача A3.2: Едно основно заглавие и логична структура. Въведете адреса на страница от Вашия сайт. Програмата зарежда страницата, преброява заглавията <h1> и показва структурата на заглавията като съдържание. Ще видите дали има точно едно непразно основно заглавие, дали се прескачат нива и колко изображения нямат alt атрибут. Предварително въведете колко <h1> според Вас има. Нямате собствен сайт? Използвайте www.rijksoverheid.nl.

Прочетете още

• Google Search Central, ръководство за начинаещи в SEO (заглавия, alt текст): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, добри практики за изображения: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (достъпни заглавия): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, alt текстове: https://www.w3.org/WAI/tutorials/images/
• Безплатен курс по WordPress 4.4: Медия: изображения и алтернативен текст