Практические решения

Добавляем расширенное описание к результатам поиска используя семантический HTML и другие доработки

Joomla
Добавление в избранное
Сохранить

Добавляем расширенное описание к результатам поиска используя семантический HTML и другие доработки

Как только дело доходит до восприятия информации, компьютеры становятся глупыми, и полагаются только на правильную интерпретацию данных. Много усилий вкладывается в разработку структуры, для того, чтобы обеспечить лучшую интерпретацию веб-сайта и его контента, и следовательно определения ключевой информации.

Понятно, что большой пользой поисковой системы является возможность быстро и точно установить основные факты о веб-странице - кто ее написал, о каких темах идет речь, это предложение или отзыв и т.д., для того, чтобы обеспечить этой информацией инициатора поиска.

Понимание семантического HTML

Семантический HTML - это термин, которым часто бросаются в кругах веб-дизайна, при этом, не до конца понимая его смысл. Семантика означает:

“значение или относящееся к значению, часто по отношению к языку; значение или отношение значений класса языковых единиц”. Подробнее в Википедии.

Когда веб-разработчики говорят об использовании “семантического HTML”, они имеют в виду HTML-разметку для добавления структуры страницы или, возможно, для укрепления структурного значения части страницы. На базовом уровне это может означать использование классов, идентификаторов и тегов для усиления значения того, что находится между этими тегами, но специальные дополнительные данные продвигают все это на один шаг вперед.

На базовом уровне мы уже используем H1, H2, H3 для того, чтобы показать структуру заголовков и подзаголовков страницы. Мы используем параграфы и разрывы строк для обозначения структуры нашего текста. Если у нас есть неупорядоченный список, то мы используем тег UL, если у нас есть упорядоченный список, то мы используем тег OL. Я часто использовала неверную HTML-разметку для того, чтобы сделать текст более привлекательным. Например, я использовала теги заголовков для того, чтобы текст казался более жирным и большим, или я использовала size/colour для того, чтобы заголовок выглядел более красивым, вместо того, чтобы просто изменить CSS. Но ни один из этих подходов не предоставляет полезной семантической информации о контенте. Урок, который стоит здесь усвоить - HTML контролирует значение и структуру, в то время как CSS контролирует то, как это выглядит.

Зачем беспокоиться о семантическом HTML?

Семантический HTML добавляет дополнительный уровень понимания для поисковых машин. Он направляет их непосредственно на то, что мы хотим им дать знать о нашем контенте. Обычного Васю Пупкина вообще не беспокоит, в правильном ли порядке расположены теги заголовков, а вот поисковые системы это очень даже беспокоит!

Семантический HTML:

  • Полезен для доступности, так как скрин-ридеры интерпретируют вашу страницу так же как и боты-пауки!
  • Ясен и легок для чтения/слежения по возвращению к вашему коду
  • Дружелюбен к поисковым системам - логически упорядочен с четким обозначением того, что содержит контент

Что такое Microdata, RDFa, Open Graph и прочее?

Microdata (микроданные), microformats (микроформаты), RDFa (язык RDFa) и Open Graph (разметка Open Graph) являются расширением семантического HTML. Это еще один способ структурирования вашего сайта для активного пихания контента под нос поисковых систем, говоря при этом "вот, это то, что вы ищите!" - другими словами добавление интересных фишек для результатов поиска (если вы делаете это должным образом!).

Например, представьте себе, что кто-то ищет "распродажу сумок" - он конечно пытается отыскать предложения, которые есть у компаний по сумкам. Есть возможность отметить ваш контент с помощью микроданных для определения того, что он относится к предложению. Это, конечно, укажет поисковым системам на то, что это возможно высоко релевантная ссылка для поиска. Для усиления можно добавить микроданные, относящиеся к товару, например название бренда (и не только).

Мир веба все ещё до конца не определился с типом расширения, которое он хотел бы адаптировать как стандарт, поэтому множество сайтов используют все, в попытке угодить всем поисковым системам и удаляют те, которые устаревают со временем. Примером может служить Ecademy - если вы посмотрите на мой профиль, вы обратите внимание на большое использование семантической разметки. Только в конце октября W3C выпустила рабочий драфт по внедрению RDFa в HTML4 и HTML5 - легкое чтение перед сном для страдающих бессонницей. Стоит отметить, что Google на данный момент рекомендует использовать Microdata.

Какие изменения я должен сделать для улучшения отображения в поисковых системах?

Для начала, посмотрите на то, что у вас есть на данный момент - вы можете это сделать либо просмотрев исходных код страницы, либо вы можете пропустить вашу страницу через инструмент Rich Snippets Tool (инструмент проверки структурированных данных) от Google - обратите внимание на то, что вы можете проверить и отдельные куски HTML.

Свяжите места, для которых вы предоставляете контент

Например, если я проверю мой Ecademy профиль через Rich Snippets, я увижу, что он показывает мне отображение моего фото при поиске через Google (оно берется из профиля Google+). Он также показывает мне ссылку на мою страницу автора и показывает ее как проверенную, что означает двустороннюю ссылку между моей страницей Google+ и моей страницей Ecademy. На моей странице Ecademy я поставила ссылку на профиль G+, а в профиле G+ мой профиль Ecademy внесен в раздел "Мои публикации". Также он показывает другие места, где я считаюсь автором или я предоставляю контент, и которые залинкованы с этой страницы - например, моя лента Twitter.

Если мы проверим мой профиль Google+ через Rich Snippets, он покажет места, гдя я автор согласно профилю G+. Авторство становится довольно важной частью рейтинговых позиций поисковой системы и плотно связано с Google+.

Добавляем дополнительные данные

Очень интересно почитать руководства на schema.org (ruschema.org), RDFa/RDFa Lite, microformats.org (микроформаты - Wiki) и следуя им, применить их к вашему сайту, редактируя шаблоны или модифицируя переопределения для включения дополнительных данных, при этом наблюдая за тем, как это сказывается на том, что возвращает инструмент Rich Snippets.

Буквально через несколько дней после связывания моего G+ аккаунта с другими аккаунтами, я заметила картинку профиля, которая отобразилась во многих ссылках, где я считаюсь автором.

Заключение

Важность семантического HTML растет, и несмотря на тот факт, что еще не существует принятого пути по внедрению микроданных в ваш веб-сайт, существует несколько способов для погружения вашей игрушки в глубокий океан под названием “микроданные, микроформаты и RDFa”.

Оставляйте в комментариях свой опыт внедрения этих подходов. Будет очень интересно посмотреть.

Оригинальная статья: Ruth Cheesley
Dmitry Rekun
Работаю в банковской сфере, а с веб-разработкой (непосредственно с Joomla) столкнулся в 2007 году. Теперь это моё хобби, а в редких случаях и вторая работа. Какое-то время вёл свой блог, но решил попробовать работать в команде. И вот c 2012 года я здесь :)

Подпишитесь на рассылку новостей CMScafe