Переваги та переваги семантичної розмітки HTML5 для SEO

  1. Отже, що таке відповідь?
  2. Як дізнатися, що використовують веб-переглядачі Мої сайти?
  3. Так як я можу почати роботу з HTML5?
  4. Чому розробникам слід хвилюватися про семантичну розмітку?
  5. Елемент <header>
  6. Елемент <footer>
  7. Елемент <nav>
  8. Елемент <menu>
  9. Елемент <article>
  10. Елемент <section>
  11. Елемент <aside>
  12. Так що ж велика справа для SEO?
  13. І звичайно…. Недоліки
  14. Резюме

Якщо ви ще не помітили, то мережа - це постійно мінлива середовище.

Нові ідеї змінюють спосіб перегляду веб-сайтів. Але як ці зміни змінюють спосіб перегляду вашого веб-сайту Google та інших популярних пошукових систем?

Багато чого було написано про те, чи повинні більшість розробників починати включення використання HTML5 на веб-сайти своїх клієнтів. Деякі, як я, відповіли звуковим «так», тоді як інші, схоже, хочуть почекати, поки HTML5 буде оголошено офіційним веб-стандартом W3C (World Wide Web Consortium).

Отже, що таке відповідь?

На жаль, відповіді немає, а переваги HTML5 варіюються від проекту до проекту. Наприклад, якщо більшість веб-трафіку веб-сайтів надходить з веб-переглядачів, таких як старі браузери, такі як Internet Explorer 7/8, це може бути не найкращий підхід до використання. Однак, якщо більшість трафіку сайту є технологічно підкованою аудиторією, яка використовує сучасні браузери, такі як Chrome, Safari і Firefox, ви повинні охоплювати ці нові технології, щоб не тільки поліпшити їх досвід перегляду, але й встановити темп для інших пізніх користувачів.

Як дізнатися, що використовують веб-переглядачі Мої сайти?

Google Analytics на допомогу! На щастя, ви можете отримати всі необхідні дані з набору даних Audience> Technology> Browser & OS у Analytics. Див. Нижче знімок екрана області, на яку я посилаюся нижче:

Нижче знімок екрана області, на яку я посилаюся нижче:

Так як я можу почати роботу з HTML5?

Початок роботи досить простий.

Якщо ви вже знайомі з використанням HTML, то настав час зрозуміти, чому семантична розмітка, яку пропонує HTML5, є настільки привабливою з точки зору SEO.

Чому розробникам слід хвилюватися про семантичну розмітку?

Семантичну розмітку найкраще визначати як використання спеціальних тегів HTML, які описують, який вміст він містить. У дуже простих словах: він пропонує вам дуже чистий код - те, що люблять всі SEO і розробники.

Щоб проілюструвати переваги, які пропонує HTML5, розгляньте, як елементи <h1> і <p> використовуються для диференціації окремих типів тексту на сторінці. Ці теги <h1> & <h2> мають вирішальне значення для SEO на сторінці. Вони знаходяться на вершині харчового ланцюга розмітки HTML і теоретично повинні описувати поточну тему сторінок.

HTML5 перетворює семантику на новий рівень за допомогою нових тегів HTML для більшої частини веб-сайтів. Погляньте на деякі з них нижче:

<header> </header> <nav> </nav> <menu> </menu> <article> </article> <section> </section> <aside> </aside> <footer> </footer>

Швидше за все, ви можете здогадатися, для чого на веб-сторінці слід використовувати деякі з наведених вище тегів.

Якщо ні, то це дуже короткий виклад:

Елемент <header>

Елемент заголовка використовується, щоб містити елементи заголовка будь-якого блоку відповідного вмісту. Наприклад, глобальний заголовок для веб-сайту, який містить логотип сайтів або навігацію, буде основним прикладом того, де використовувати цей тег.

Елемент <footer>

Цей елемент використовується таким же чином, як і елемент заголовка, але для загальних елементів нижнього колонтитула блоку відповідного вмісту. Прикладом цього можуть слугувати комунікаційні посилання на нижньому колонтитулі сайту.

Елемент <nav>

Цей досить простий, але він також може зловживати. Це призначено для визначення основних областей навігації на сторінці, і в більшості випадків це будуть групи посилань. Майте на увазі, що тільки через те, що декілька посилань можуть бути близькими один до одного, не можна використовувати елемент <nav> .

Елемент <menu>

Цей елемент схожий на елемент <nav>, але є більш спокійним. Цей елемент може використовуватися для групування посилань, які діють як підна навігація. Іншим користувачем можна вважати іконки соціальних медіа, які посилаються на сторінки соціальних медіа на сайті.

Елемент <article>

Цей елемент використовується для автономних композицій веб-сторінки. Наприклад, список блоґів вашого сайту буде містити тег <article> . Це також можна використовувати для інших типів контенту. Просто майте на увазі його автономне використання.

Елемент <section>

Елемент <section> зазвичай використовується неправильно. Більшість людей припускає, що використовувати тег розділу як елемент рівня блоку контейнера, щоб містити частину сайту. Це неправильно.

Справжній спосіб використання елемента секції - думати про нього з точки зору групування конкретних частин вмісту. Усередині розділу ви можете мати декілька заголовків для подальшого звуження фокусу розділу, і може бути декілька розділів у межах певного вмісту. Ух! Якщо ви відчуваєте себе збентеженим цим (я знаю, що я спочатку), то не хвилюйтеся. Ви можете ознайомитися з цією статтею Брюса Лоусона для більш глибокого перегляду елемента розділу: Прогноз елемента розділу HTML5 .

Елемент <aside>

Це ще один неправильно вживаний елемент. Більшість людей вважає цей елемент контейнером на бічній панелі. Кращим способом розуміння того, як використовувати елемент <aside>, є резервування його для тангенціально пов'язаного вмісту за межами статті. Одним із способів, яким ви можете скористатися, є елемент бічної панелі, який містить елементи рекламного блоку над панеллю blogroll. Blogroll пов'язаний із статтею блогу, але рекламний блок не пов'язаний з даною статтю тангенціально. Тому використання тега <aside> для всієї бічної панелі не точно описує його вміст.

Так що ж велика справа для SEO?

Це не просто для нас зрозуміти, але й набагато простіше для Google Bot для сканування та індексування через його чистої розмітки. Традиційні методи визначення контейнерів верхнього та нижнього колонтитулів складалися з тегів <div> з унікальними ідентифікаторами, які спрямовували їх на CSS для укладання стилів. Хоча це ефективний спосіб робити речі, це набагато складніше, ніж використання конкретних тегів для кожної області вмісту.

Дивіться наведений нижче приклад того, скільки поточних веб-сайтів використовує теги <div>, щоб створити базовий макет із двома колонками з верхньою та нижньою частиною сторінки:

<div id = ”заголовок”> <ul id = ”nav”> </ul> <! - Кінець #nav -> </div> <! - Кінець #header -> <div id = ”вміст ”> <Div id =" blogpost "> <h1> Це мій блог </h1> <p> Це мій перший абзац. </p> </div> <! - Кінець #blogpost -> </ div> <! - End #content -> <div id = ”sidebar”> <div id = "blogroll"> <p> Мій вміст блогу. </p> </div> <! - End #blogroll -> </div> <! - End #sidebar -> <div id = ”footer”> <p> Мій вміст нижнього колонтитула. </p> </div> <! - Кінець #footer ->

Нижче наводиться одна і та ж розкладка за допомогою розмітки HTML5:

<header> <nav> </nav> </header> <div id = "зміст"> <article id = "blogpost"> <section> <h1> Це мій блог </h1> <p> Це мій перший абзац. </p> </section> </article> <! - End #blogpost -> </div> <! - End #content -> <div id = "sidebar"> <id id = "blogroll"> <p> Мій вміст блогу. </p> </aside> <! - Кінець #blogroll -> </div> <! - Кінець #sidebar -> <footer> <p> Мій вміст нижнього колонтитула. </p> </footer>

Хоча розмітка може здаватися не коротшою, вона, безумовно, є більш семантичною. Елементи <div> у першому прикладі не мають семантичного значення поза їх даними атрибутами. В той час як другий приклад використовує нові елементи семантичної розмітки HTML5 для кращого опису змісту та загальної компонування сторінки. Це буде набагато легше зрозуміти за допомогою Google Bot або програми для читання з екрана через логічну розмітку.

І звичайно…. Недоліки

На жаль, зробити з відсутністю стандартизації між браузерами в даний час ці теги можуть бути інтерпретовані по-різному або повністю ігноруються всі разом. Це найчастіше трапляється в старих версіях Internet Explorer. На щастя, існують способи "навчити" браузеру те, що ці нові теги для того, щоб належним чином стилювати їх за допомогою CSS. Просто вставте цей сценарій у розділ <head> розмітки, щоб увімкнути використання нових тегів для старих веб-переглядачів:

<! - [якщо IE]> <script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <! [endif] ->

** Код, наданий Remy Sharp Проект HTML5 Shiv

Не набуваючи занадто технічного характеру, коли виконується вищезазначений скрипт jQuery, він створює нові елементи в об'єктній моделі документів Internet Explorer (DOM), так що він розуміє нову розмітку. Суть у тому, що вона працює, і це все, що має значення для більшості людей. Єдине занепокоєння, яке мають деякі люди щодо вищезгаданого патча, полягає в тому, що він залежить від JavaScript. Проте відсоток користувачів, які переглядають заблокований JavaScript, скорочується протягом декількох років, і це дуже невелика частина загальних користувачів у мережі.

Коротше кажучи, неможливо задовольнити кожне середовище в Інтернеті. Отже, залежно від аудиторії, настав час зупинитися на обслуговуванні людей, які продовжують використовувати застарілі технології, такі як IE6, і починають нагороджувати користувачів, які не відстають від часу: D.

Резюме

Будучи прихильниками оптимізації, очищення коду та передових веб-сайтів, ми пропонуємо використовувати розмітку HTML5, коли це можливо.

Чому? Щоб залишатися попереду кривої і починати впроваджувати рано, щоб повністю скористатися гарячою новою технологією, яку ми можемо уточнити задовго до того, як вона стане стандартом.

Зрозуміло, що люди можуть бути втомлені від використання цих нових технологій, побоюючись, що їхні веб-переглядачі не будуть грати з ними. Однак існує багато інструментів, які допомагають приборкати різні способи використання старими браузерами елементів HTML5.

Отже, що таке відповідь?
Як дізнатися, що використовують веб-переглядачі Мої сайти?
Так як я можу почати роботу з HTML5?
Чому розробникам слід хвилюватися про семантичну розмітку?
Але як ці зміни змінюють спосіб перегляду вашого веб-сайту Google та інших популярних пошукових систем?
Отже, що таке відповідь?
Як дізнатися, що використовують веб-переглядачі Мої сайти?
Чому розробникам слід хвилюватися про семантичну розмітку?
Так що ж велика справа для SEO?
Чому?
IRC (Internet Relay Chat)