Навигация по сайту

Популярные статьи

SEO для розробників: Переваги HTML5 Semantics + Schema Microdata

  1. Семантичні елементи HTML5:
  2. Як використання семантичних елементів HTML5 допоможе з SEO?
  3. Думаєте, ніхто не використовує семантичні елементи? Подумати ще раз.
  4. Мікродані семантичної схеми
  5. Заключні думки

Це перший у серії блогів A-Team, що стосуються передового досвіду SEO.

Коли HTML5 з'явився на сцені в період 2011-2014 років, з боку спільноти веб-розробників сталося дещо виклик, що він «надто складний», і його частини були непотрібні. Зокрема, розробники чіпали голови про так звані семантичні елементи HTML5 - врешті-решт, що було неправильно з гарним старим <div id = “xxx”> конструювати? Перемотаємо вперед кілька років і сьогодні ми маємо всілякі легітимні способи використання семантичних елементів HTML5, і розробникам було б доцільно розпочати їх впровадження у всіх нових проектах, що йдуть вперед.

Семантичні елементи HTML5:

< article > зміст, позначений як "синдикований" - повинен бути сам по собі "повний", оскільки він може бути зібраний довільно і представлений у стрічці <в сторону >, тобто "бічній панелі", лише для підтримки основного вмісту, периферійного для вмісту. Примітка: тепер ми можемо використовувати H1 всередину осторонь без наслідків щодо SEO. < details > являє собою віджет розкриття, з якого користувач може отримати додаткову інформацію або керувати < figcaption > підпис для малюнка (див. нижче) < figure > вміст, позначений як "синдикований" (наприклад, фотографії, ілюстрації, відео тощо) .) < footer > вміст нижнього колонтитула веб-сторінки < header > вміст заголовка веб-сторінки < main > основний вміст веб-сторінки, за винятком глобальних елементів, таких як верхній та нижній колонтитули, а також <nav> < re > автор хоче, щоб ви зосередилися на цьому вмісті, не наголошуючи , щоб відрізнити <em> або <strong> < nav > посилання для навігації веб-сторінки < розділ > групування відповідного вмісту < summary > визначає видимий заголовок для елемента <details>. Можна натиснути, щоб переглянути / приховати деталі < time > time time з машиночитаними властивостями часу < hgroup > група тегів заголовків

Як використання семантичних елементів HTML5 допоможе з SEO?

Кілька способів:

  • це допомагає пошуковим системам і машинним читачам визначати ключові частини сторінки. Зокрема, пошукова система Hummingbird від Google (на відміну від Google Panda або пошукових систем Google Penguin) призначена для того, щоб зосередитися на розмовному значенні вмісту на вашій веб-сторінці. Використання семантичних тегів HTML5 покращить “розуміння” Hummingbird ваших веб-сторінок.
  • Крім того, семантичні елементи HTML5 допоможуть певній кількості відвідувачів вашого сайту довше взаємодіяти з вашою сторінкою (наприклад, ті, хто використовує програми для читання з екрана). І чим довше відвідувачі сайту залишаються на ваших сторінках, тим вище рейтинг сторінки.
  • І, нарешті, HTML-семантичні елементи, такі як <article> і <figure> допомагають синдикувати / повторно використовуючи ваш контент через різні канали. Заохочуючи синдикацію, до вашого веб-сайту надійшло більше "зовнішніх" надійних посилань. І більше довірених посилань назад до вашої веб-сторінки (незалежно від того, звідки вони походять) є головним драйвером рейтингу сторінки.

Думаєте, ніхто не використовує семантичні елементи? Подумати ще раз.

Facebook зараз просуває популярну назву "Миттєві статті" (див.: https://developers.facebook.com/docs/instant-articles/reference ), які вони вважають новим каналом для видавців для створення швидких, інтерактивних статей, які відображаються на мобільному додатку Facebook. Фейсбук тут чітко нагадує HTML5. Створення миттєвої статті просто: просто відформатуйте свої веб-сторінки до їхніх рекомендацій HTML5, і вони дозволять вам публікувати / просувати такі інтерактивні статті, які оптимально реагують на їх мобільний канал. Коротше кажучи, це ідеальний спосіб повторного використання існуючого веб-вмісту. І знову більше надійних посилань на ваш сайт (незалежно від того, звідки вони походять) збільшують ваш рейтинг сторінки.

Нижче наведено лише короткий приклад того, як виглядає форматування. Зверніть увагу на використання елемента HTML5, який явно використовується тут для синдикації.

<! doctype html> <html lang = "en" prefix = "op: http://media.facebook.com/op#"> <head> <meta charset = "utf-8"> <link rel = "canonical "href =" http://example.com/article.html "> <meta property =" op: markup_version "content =" v1.0 "> </head> <body> <article> <header> <! - - Заголовок і субтитри відображаються у Вашій миттєвій статті -> <h1> Заголовок статті </h1> <h2> Підзаголовок статті </h2> <! - Дата та час, коли ваша стаття була опублікована -> <час class = "op-published" datetime = "2014-11-11T04: 44: 16Z"> 11 листопада, 16:44 </time> <! - Дата й час останнього оновлення вашої статті -> < time class = "op-modified" dateTime = "2014-12-11T04: 44: 16Z"> 11 грудня, 16:44 </time> <! - Автори вашої статті -> <адреса> <a rel = "facebook" href = "http://facebook.com/brandon.diamond"> Брендон Діаманд </a> Брендон - завзятий мисливець на зомбі. </address> <адреса> <a> TR Vishwanath </a> Vish - вчений і джентльмен. </address> <! - Зображення обкладинки, показано у вашій статті -> <figure> <img src = "http://mydomain.com/path/to/img.jpg" /> <figcaption> Це зображення дивовижна </figcaption> </figure> <! - Кікер за вашу статтю -> <h3 class = "op-kicker"> Це ударник </h3> </header> <! тут -> <! - Текст для вашої статті -> <p> Зміст статті </p> <! - Відео у вашій статті -> <figure> <video> <source src = "http: //mydomain.com/path/to/video.mp4 "type =" video / mp4 "/> </video> </figure> <! - Оголошення у вашій статті -> <class class =" op- ad "> <iframe src =" https://www.adserver.com/ss;adtype=banner320x50 "height =" 60 "width =" 320 "> </iframe> </figure> <! - Код Analytics для Ваша стаття -> <figure class = "op-tracker"> <iframe src = "" приховано> </iframe> </figure> <footer> <! - Кредити для вашої статті -> <aside> Подяка < / aside> <! - Інформація про авторські права для вашої статті -> <small> Правові примітки </small> </footer> </article> </body> </html>

Мікродані семантичної схеми

Хоча розробники сперечалися про переваги / недоліки HTML5, під радаром і без особливих фанфарів, www.schema.org (ініціатива, що фінансується Google, Microsoft, Yahoo, Yandex) опублікувала безліч документованих схем для майже кожен тип вмісту: продукти, події, організації, місцеві підприємства, огляди фільмів і книг тощо (див www.schema.org ). Практично за добу це стало фактичним стандартом для розмітки вмісту.

Чому потрібно намагатися форматувати веб-вміст за допомогою Schema Microdata? Простий випадок пов'язаний з тим, як Google форматує вашу сторінку, коли вона з'являється на сторінці результатів пошукової системи (SERP) - інакше як «багаті фрагменти» (див. Малюнок нижче). Доведено, що веб-сторінки, які форматуються за допомогою специфічних атрибутів Schema Microdata, отримують більше кліків (CTR), коли вони видаються в SERP проти їхньої конкуренції, якої бракує такого форматування. Зайве говорити, що високий CTR є ще одним основним драйвером рейтингу сторінок.

Основні атрибути, які використовуються при форматуванні "багатих фрагментів", залежать від типу схеми - приклад: список фільмів "багатий фрагмент" відображає відгуки, розташування та сеанси. Продукт «багатий фрагмент» надасть відгуки, ціни та доступність. І так далі.

Нижче наведено простий приклад використання схемних мікроданих при форматуванні вмісту HTML:

<body>… <article> <div itemscope itemtype = "http://schema.org/Product"> <h1 itemprop = "назва"> Преміум темний шоколадний бальзамічний оцет </h1> <p itemprop = "description"> Dark Шоколадний бальзамічний оцет з Модени Італії багатий, товстий, і звучить зі складністю трьох різних цукерок. </p> <p itemscope itemtype = "http://schema.org/AggregateRating"> Середня оцінка: <img src = " 4stars.png "alt =" 4 зірки з 5 "> (<span itemprop =" ratingCount "> 120 </span> голосів) <meta itemprop =" ratingValue "content =" 4 "/> <meta itemprop =" bestRating " content = "5" /> </p> </div> </article> ... </body>

Слід зауважити, що замість форматування стилів мікросхеми схеми можна додатково використовувати RDFa Lite форматування (обидва можуть використовувати ті ж схеми www.schema.org). Google стверджує, що вони підтримують обидва стилі форматування. Подивитися: https://www.w3.org/TR/xhtml-rdfa-primer/

А якщо це не зовсім зрозуміло: ви можете і повинні змішувати обидві семантики HTML5 і Schema Microdata в одній веб-сторінці!

Також тут наведено посилання на інструмент "помічник розмітки структуризованих даних Google", який допоможе вам побачити, як він працює з вашим поточним вмістом, до якого ви можете отримати доступ тут: https://www.google.com/webmasters/markup-helper/

Заключні думки

Припускаючи, що наші веб-проекти використовують MVC або якийсь варіант, залишається питання про те, як найкраще відобразити вміст на рівні презентації. Мені здається, що в ідеалі, що обслуговує додаток (наприклад, контролер) буде виводити корисне навантаження, яке буде надавати однозначні підказки у корисному навантаженні відповіді щодо того, яка конкретна схема вмісту візуалізується. Зроблено таким чином, фронт-енд-фрейм не потребує нічого, крім того, щоб перетворити підказки в HTML5 та / або схеми Microdata, не вимагаючи багато чого на шляху складних пошуків.

Враховуючи це, мені здається, що ми маємо можливість продуктувати цю SEO-бажану поведінку контенту, прийнявши www.schema.org для всього відомого вмісту під нашим контролем. Очевидними прикладами для Eloqua Landing Pages та електронними листами (наприклад, www.schema.org/event, www.schema.org/InviteAction, www.schema.org/RsvpAction, schema.org/EmailMessage) або сторінок комерційного продукту (наприклад, www .schema.org / product, www.schema.org/offer, www.schema.org/Review) або сайти маркетингу Cloud Services, FAQ, рецепт або місцеві бізнес-сторінки (наприклад, schema.org/NewsArticle, schema.org/Question , schema.org/Recipe, schema.org/LocalBusiness). Зрозуміло, у нашій екосистемі Red Stack існує багато інших можливостей, які чекають, щоб ми принесли додаткову користь нашим клієнтам, орієнтованим на SEO (тобто всі наші клієнти).

Думаєте, ніхто не використовує семантичні елементи?
Зокрема, розробники чіпали голови про так звані семантичні елементи HTML5 - врешті-решт, що було неправильно з гарним старим <div id = “xxx”> конструювати?
Думаєте, ніхто не використовує семантичні елементи?
Чому потрібно намагатися форматувати веб-вміст за допомогою Schema Microdata?