Метатеги для поисковиков

Продвижение в Facebook и Twitter

Facebook предлагает разработчикам различные параметры настройки того, как будут выглядеть веб-страницы в новостной ленте пользователей социальной сети. Все сайты по умолчанию относятся к типу контента под названием “Веб-ресурс”, и именно его мы используем в примере.

Предположим, что кто-то поделился главной страницей сайта турфирмы. В ленте Facebook результат будет выглядеть следующим образом:

Twitter также предлагает несколько способов форматирования веб-страниц, но сегодня мы рассмотрим пример, схожий с приведенным выше примером для Facebook. Такой формат в Twitter называется «Summary Card with Large Image»:

В каждом примере имеется несколько атрибутов:

  • Большая картинка и заголовок;
  • Описание;
  • Домен.

Мета-теги

Каким образом разместить эти атрибуты? Например, при помощи мета тегов для HTML сайта. При публикации ссылки на ресурс Facebook и Twitter извлекают связанную веб-страницу и считывают ее meta-теги, что позволяет отображать соответствующую информацию.

Facebook использует meta-теги, используя протокол Open Graph. Это система классификации веб-страниц, которая на данный момент охватывает meta-теги, определенные в HTML5. Полный список доступных тегов можно просмотреть на сайте Open Graph. Но в работе пригодится всего четыре тега:

<meta property=»og:title» content=»European Travel Destinations»> <meta property=»og:description» content=»Offering tour packages for individuals or groups.»> <meta property=»og:image» content=»http://euro-travel-example.com/thumbnail.jpg»> <meta property=»og:url» content=»http://euro-travel-example.com/index.htm»>

Как Facebook, так и Twitter дают рекомендации относительно использования упомянутых выше тегов. Учтите, что Facebook ссылается на публикуемую веб-страницу при помощи термина «объект» (object):

Facebook Twitter
Title (Заголовок). Заголовок или название объекта. Продуманный заголовок для связанного контента (максимально 70 символов).
Description (Описание). Краткое описание или содержание объекта (2-4 предложения). Описание, которое несет в себе всю необходимую информацию. Не следует использовать одинаковые заголовки и описания для нескольких страниц (длина до 200 символов).
Image (Картинка). URL картинки объекта. Картинка должна быть как минимум 600 на 315 пикселей в размере, но лучше использовать 1200 на 630 и выше (объемом до 5Мб). Что касается соотношения сторон, то старайтесь укладываться в 1.91:1, чтобы избежать обрезки Ссылка на картинку, прикрепленную к контенту. Не следует использовать случайные картинки типа логотипа сайта, фотографию автора или другие картинки, которые встречаются на других ресурсах. Картинка должна иметь минимум 280 пикселей в ширину и 150 – в высоту. Вес картинки не должен превышать 1 Мб.
URL Канонический URL страницы. Ссылка должна быть прямой, без дополнительных параметров, переменных, данных идентификации пользователей и т. д.

Совмещаем теги <meta>

Ничего страшного, если вы задействуете лишние мета теги для сайта интернет магазина. Избыток информации еще никому не вредил, разве что это может негативно сказаться на весе HTML-документа. Но для нашей цели и исключительно ради краткости мы можем руководствоваться тем, что Twitter позволяет заменять мета-теги Open Graph на собственные. К тому же за исключением необходимости определить формат отображения нам не понадобятся уникальные мета-теги Twitter. В результате мы получаем следующий код, который стоит рассматривать как самый минимум с точки зрения тегов, необходимых для того, чтобы репост сайта выглядел достойно:

<meta property=»og:title» content=»European Travel Destinations»> <meta property=»og:description» content=»Offering tour packages for individuals or groups.»> <meta property=»og:image» content=»http://euro-travel-example.com/thumbnail.jpg»> <meta property=»og:url» content=»http://euro-travel-example.com/index.htm»> <meta name=»twitter:card» content=»summary_large_image»>

Универсальные рекомендации для использования картинок: старайтесь, чтобы размер картинок был не менее 1200 на 630 пикселей при соотношении сторон 1.91:1, но при этом не забывайте про ограничение Twitter в 1Мб.

Валидация тегов <meta>

Если у вас возникли сомнения относительно комбинирования мета тега description для сайта c другими тегами, то всегда можно воспользоваться специальными инструментами Facebook Sharing Debugger и Twitter Card Validator. Оба средства умеют извлекать любые веб-страницы с публичных серверов, используя релевантные мета-теги, и демонстрировать вам, как они будут смотреться при распространении в социальных сетях. Кроме этого они выводят список ошибок и дают советы. Как мы поступим с нашим примером? С Twitter, кажется, проблем не возникло, а вот проверка Facebook выдала предупреждение:

И это дает нам отличную тему для разговора.

Аналитика социальных сетей

Этой ошибкой Facebook указывает, что, если вы собираетесь использовать их аналитический инструмент Domain Insights, то нужно будет предоставить уникальный ID, привязанный к вашему аккаунту. Мета-тег должен выглядеть следующим образом:

<meta property=»fb:app_id» content=»your_app_id» />

У Twitter имеется нечто похожее — Twitter Card Analytics. Twitter рекомендует использовать следующий мета-тега, который должен содержать ваш логин в Twitter, привязанный к публикуемой веб-странице:

<meta name=»twitter:site» content=»@website-username»>

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

Что мы упустили?

В документации Facebook есть еще одна рекомендация о дополнительном мета-теге. Он отвечает за название сайта:

<meta name=»og:site_name» content=»European Travel, Inc.»>

Twitter рекомендует использовать другой мета-тег, но он также не обязателен:

<meta name=»twitter:image:alt» content=»Alt text for image»>

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

Что у нас получилось

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

<!— Essential META Tags —> <meta property=»og:title» content=»European Travel Destinations»> <meta property=»og:description» content=»Offering tour packages for individuals or groups.»> <meta property=»og:image» content=»http://euro-travel-example.com/thumbnail.jpg»> <meta property=»og:url» content=»http://euro-travel-example.com/index.htm»> <meta name=»twitter:card» content=»summary_large_image»> <!— Non-Essential, But Recommended —> <meta name=»og:site_name» content=»European Travel, Inc.»> <meta name=»twitter:image:alt» content=»Alt text for image»> <!— Non-Essential, But Required for Analytics —> <meta property=»fb:app_id» content=»your_app_id» /> <meta name=»twitter:site» content=»@website-username»>

Перевод статьи “The Essential Meta Tags for Social Media” был подготовлен дружной командой проекта Сайтостроение от А до Я.

Еще не голосовали рейтинг из ХорошоПлохо Ваш голос принят

Когда речь заходит о мета-тегах и мета-данных, нередко возникает путаница — начинающие специалисты бросаются оптимизировать все содержимое в рамках тега HEAD с элементом META. Давайте разберемся, какие мета-данные действительно важны для SEO-оптимизации, а какие можно обойти вниманием.

Мета-теги для SEO

Description

Description — это мета-описание страницы. Для SEO этот тег один из ключевых.

Синтаксис следующий:

<meta name=»description» content=»Описание страницы»>

Раньше Google и Яндекс при формировании сниппета в результатах поиска выводили информацию из description. Но оптимизаторы быстро поняли, что с помощью description можно манипулировать выдачей. Кроме того, многие владельцы сайтов недобросовестно подходили к заполнению этого мета-тега: вставляли первый абзац из текста, копировали title или вообще игнорировали его.

Поэтому поисковики перестали формировать описания только лишь на основе description — теперь учитывается весь контент страницы. Но это вовсе не означает, что description утратил свою значимость для SEO. Роботы Яндекса и Google по-прежнему сканируют содержимое description и учитывают его при определении релевантности документа.

Какова длина мета-тега description

В руководствах для вебмастеров Яндекса и Google вы не найдете ни единого слова по поводу длины мета-описаний. Более того, отображаемая длина описаний в сниппетах постоянно меняется: например, в декабре 2017 года Google расширил ее до 300 символов, а в мае 2018 года — укоротил до 160.

Поэтому при определении оптимальной длины мета-тега description приходится опираться на эмпирические данные и здравый смысл.

Состоянием на октябрь 2018 года отображаемая длина мета-описания (в символах с пробелами):

  • Google: десктопный поиск — 120-140; мобильный поиск — 100-120;
  • Яндекс: десктопный поиск — 120-220; мобильный поиск — 110-200.

Чтобы сделать сниппеты информативными для пользователей обеих поисковиков, лучше самую важную информацию добавлять в первые 100-140 символов мета-тега description, а не 160-170 — как принято считать.

Фактическая длина description может превышать и 300, и 500 символов — но нет смысла тратить ресурсы на увеличение мета-описаний, поскольку пользователи все равно не увидят эту информацию (поисковики же могут воспринять ее как спам). Лучше направьте усилия на SEO-оптимизацию контента и повышение его качества.

Как правильно составлять description

Для того чтобы мета-описание помогло продвинуть сайт, придерживайтесь таких правил:

  • заполните уникальные description для всех URL сайта (если нет возможности расставить мета-теги сразу на всех страницах, начните с главной, страниц каталога, самых важных товаров);
  • описание должно быть точным и содержать полезную информацию. Например, описывая товар в интернет-магазине, укажите его характеристики, назначение, цену. Фраза вроде «купите сапоги у нас, потому что мы лучшие» в качестве описания исключена;
  • не превращайте description в спам-лист (недопустимо перечисление ключевых фраз, особенно в прямом вхождении).

«Наличие мета-тегов с некачественным содержанием может стать причиной удаления страницы из результатов поиска» — справка Яндекса.

Больше рекомендаций по заполнению dеscription и управлению сниппетом вы найдете в этом выпуске нашей рассылки.

Robots

С помощью этого мета-тега можно разрешать или запрещать поисковым роботам индексировать страницы и переходить по размещенным ссылкам.

Мета-тег robots может принимать такие значения:

  • index (или noindex) — разрешена (запрещена) индексация страницы;
  • follow (или nofollow) — разрешена (запрещена) индексация ссылок; вот интересный материал о noindex и nofollow;
  • all — аналог одновременного использования index и follow;
  • none — аналог одновременного использования noindex и nofollow;
  • noarchive — в результатах поиска не будет выводиться ссылка на сохраненную в кэше копию.

Синтаксис такой:

<meta name=»robots» content=»index,follow» />

Изменяя значения мета-тега robots, можно управлять индексацией, причем поисковые системы следуют указаниям в этом теге, в отличие от директив в robots.txt, которые носят рекомендательный характер.

Значения мета-тега robots понимают все поисковые системы. Также можно задать правила индексирования только для:

  • Google — в этом случае используется мета-тег googlebot вместо robots (значения можно задавать те же);
  • Яндекс — вместо robots указывается yandex.

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

Keywords

На заре развития поисковых систем этот мета-тег играл важную роль в ранжировании. Интересно, что Яндекс до сих пор учитывает содержимое этого мета-тега при определении соответствия страницы поисковым запросам, хотя по факту влияния на позиции keywords не оказывает. Вместе с тем Яндекс предупреждает о том, что если заполнить его откровенным спамом — большим числом ключевых слов — это может привести к пессимизации страницы или исключению ее из индекса.

Если вы решили заполнять keywords, учитывайте синтаксис:

<meta name=»keywords» content=»ключ 1, ключ 2, ключ 3…» />

Не указывайте более 10 ключевых слов. Кроме того, прописанные ключевые слова должны присутствовать в тексте страницы.

Viewport

Этот мета-тег стал особенно актуальным после начала учета поисковиками мобильной адаптации в качестве фактора ранжирования. В обычной практике SEO-специалисту вряд ли придется прописывать этот мета-тег — это задача разработчиков шаблона. Но знать о его существовании все же нужно.

Итак, если сайт адаптирован под просмотр на мобильных, в разделе HEAD будет прописан мета-тег viewport такого вида:

<meta name=»viewport» content=»width=device-width, initial-scale=1″>
Здесь значение device-width атрибута width дает команду браузеру подогнать ширину окна под ширину экрана устройства. Значение 1 атрибута initial-scale запрещает масштабирование окна (например, при повороте экрана). Больше узнать о мобильной адаптации вы можете из статьи «10 правил оптимизации сайта под мобильные устройства».

Title — не мета-тег, но для SEO очень важен

Формально title — это не мета-тег, но он работает по аналогичному принципу и играет ключевую роль в SEO, поэтому о нем нельзя не упомянуть.

Информация из title учитывается поисковыми системами при определении релевантности документа. На странице она не выводится, но всегда отражается в результатах поиска, а также в качестве заголовка в браузере — в этом принципиальное отличие от description, информация из которого выводится на усмотрение поисковика.

Синтаксис тега title:

<title>Заголовок страницы</title>

Как и мета-теги, title размещается внутри раздела HEAD.

Отображаемая длина title (символов с пробелами):

  • Google — около 60;
  • Яндекс — около 50.

Заголовок должен быть информативным, точно описывать содержание страницы, включать главное ключевое слово, но без переспама.

О принципах составления title мы подробно писали в выпуске рассылки «Эффективные заголовки для SEO-продвижения». Рекомендуем ознакомиться для получения дополнительного преимущества в поисковой выдаче.

Title и description должны выгодно выделять ваш сайт на фоне конкурентов. Узнать, какие мета-теги используют конкуренты, можно в один клик с помощью специального парсера. Первые 500 запросов — бесплатно!

H1-H6 — полезные для SEO теги

Это не мета-теги. Они прописываются в разделе BODY — то есть их значения являются контентом и видны пользователям. Но раз уже речь идет о SEO, их нельзя обойти стороной.

H1-H6 — это теги логической структуры документа. На каждой странице обязательно должен быть один заголовок, заключенный в тег H1. Подзаголовки заключаются в теги H2-H6 и добавляются на страницу опционально (если того требует логика построения документа и изложения).

Синтаксис такой:

<h1>Заголовок первого уровня</h1>

<h2>Заголовок второго уровня </h2>

<h3>Заголовок третьего уровня</h3> и т. д.

При расстановке тегов H1-H6 обязательно должна соблюдаться очередность: например, после H1 идет только H2, а после H2 — только H3.

Часто у начинающих SEO-специалистов возникает вопрос: title и H1 — это одно и то же? Нет — тег title прописывается в разделе HEAD, а не BODY, и именно его используют роботы при формировании сниппета. Вместе с тем текст, заключенный в теги title и H1, обычно частично (реже — полностью) дублируется.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *