Мы работаем не только в Моcкве, но и в других городах России:

Правильные метатеги страницы для социальных сетей – управляем расшариванием (перевод)

Подписаться
Больше интересностей из блога студии SEMANTICA
Получайте эффективные советы по интернет-рекламе и SEO-оптимизации вашего сайта
ВКонтакте:
Facebook:
Twitter:

правильные мета теги

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

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

Бывало ли так, что вставляя ссылку в Facebook или Twitter, вы получали пост с картинкой и описанием, которые никаким известным вам образом не могли быть связаны с содержанием страницы и больше походили на результат игры в Mad Lib?

Вы дважды подумаете, прежде чем поделиться таким постом, не так ли?

Но выход есть. Маркетологи могут влиять на пользовательский опыт, который создается их контентом в социальных сетях. Ваши профили в Google+, Facebook и Twitter больше не будут похожи на генератор случайных чисел. Контролируете посты в социальных медиа с помощью метатегов.

Но для начала проиллюстрирую, о чем я говорю.

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

Чтобы убедить пользователя кликнуть по ссылке, здесь нужно многое изменить.

В чем проблема? Во всем – изображении, заголовке, описании. Они не адаптированы под нечто убедительное и призывающее кликнуть. Честно говоря, некоторые пользователи даже могут удалить пост вместо того, чтобы расшарить. Их можно понять.

К счастью, title, описание (description) и изображение, которое автоматически всплывает, когда пользователь хочет поделиться ссылкой в популярных социальных сетях, могут задаваться создателем контента. Когда материал правильно оптимизирован, он хорошо выглядит при расшаривании и имеет больше шансов получить много кликов.

При оказании SMM услуг оптимизация под социальные сети – одна из наших приоритетных тактик.

Почему?

Посмотрите сами. Ведь вы кликнули бы на ссылку ниже с гораздо большим удовольствием, чем в случае выше. Не так ли?

Из этой статьи вы узнаете, как оптимизировать тайтл, дескрипшн и изображение страниц сайта под социальные сети.

Создаем метатеги страниц для социальных сетей. Советы от профессионала

Смысл использования метатегов для социальных сетей заключается в контроле отображения вашего контента в новостных лентах. Вы должны управлять тегами сами, а не позволять Facebook, Twitter и другим социальным платформам генерировать title, description и изображение самостоятельно.

Общие рекомендации:

  • Адаптируйте или переработайте неиспользованные идеи тайтлов, сделав их заголовками постов в социальных медиа.
  • Протестируйте разные варианты изображений. Используйте теги Open Graph и Twitter Cards в качестве тестового полигона для маркетинговой кампании в социальных сетях.
  • Настройте изображение и содержание контента в соответствии с уникальными интересам аудитории каждой социальной сети.
  • В твиттере используйте сразу две разметки – Open Graph и Twitter Card. Twitter по умолчанию предлагает разметку Open Graph, но если судить по нашему опыту, вы получаете больший контроль над результатом, используя две разметки одновременно.

Используете WordPress? Метатеги для социальных сетей в WordPress Plugins

Если вы используете WordPress, несколько плагинов помогут вам прописывать метатеги для социальных сетей без нервов – вам не придется прописывать код вручную.

Некоторые из них:

  • WPSSO для создания разметки на разных социальных платформах.
  • JM Twitter Cards для доступа к полному диапазону типов Twitter Cards.
  • WordPress SEO от Yoast для тегов Open Graph в Facebook и Twitter Cards.

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

Если вы используете другую систему управления контентом, почитайте, как управлять отображением постов в социальных медиа с помощью Open Graph и Twitter Cards.

Теги Open Graph

Протокол Open Graph  формирует метатеги для Facebook по умолчанию. Другие ключевые социальные платформы, в том числе, LinkedIn, Google+ и Twitter тоже признали, что по умолчании пользуются этой разметкой. Это означает, что Twitter, LinkedIn и Google+ в большинстве случаев вытягивают заголовок, описание и изображение, указанное в тегах Open Graph.

Главные теги Open Graph:

og:title Title или альтернативный title страницы, который отображается в качестве заголовка
og:url URL страницы
og:description Описание страницы (Facebook показывает не более 300 символов
og:image URL уникального изображения (рекомендуемое расширение 1200х630 пикселей)
og:type Cтатья (по умолчанию «website»)

Чтобы посты в Facebook были с нужными вам заголовками, изображениями и описаниями, метатеги должны выглядеть так:

<meta property=”og:title” content=”The Always-Up-to-Date SEO Checklist from Bruce Clay, Inc.” />

<meta property=”og:url” content=”https://www.bruceclay.com/blog/seo-checklist/” />

<meta property=”og:description” content=”Just getting started optimizing websites? Here’s a time-tested SEO checklist to keep on-hand during your projects.” />

<meta property=”og:image” content=”https://www.bruceclay.com/blog/wp-content/uploads/2016/08/SEO-Checklist.jpg” />

<meta property=”og:type” content=”article” />

Чтобы убедиться в корректности конфигурации тегов Open Graph, используйте Facebook’s Open Graph Debugger – отладчик перепостов. После ввода URL в специальное поле, вы увидите информацию, которая используется при расшаривании URL через эту социальную платформу.

Совет:

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

Разметка Twitter Card

Twitter Cards позволяет прикрепить к твитам фотографии или видео с помощью всего нескольких строк кода. Есть несколько типов Twitter Cards, но Summary Cards и Photo Summary Cards наиболее используемые.

Основные теги разметки для Twitter:

twitter:card Тип карточки, который вы используете
twitter:title Title или альтернативный title страницы, отображаемый в заголовке
twitter:url URL страницы
twitter:description Короткое описание (менее 200 символов)
twitter:image URL уникального изображения (рекомендуемое расширение не менее 440×220 пикселей)

Метатеги для Twitter могут выглядеть следующим образом:

<meta name=”twitter:card” content=”summary_large_image” />

<meta name=”twitter:title” content=” The Always-Up-to-Date SEO Checklist from @BruceClayInc” />

<meta name=”twitter:url” content=”https://www.bruceclay.com/blog/seo-checklist/” />

<meta name=”twitter:description” content=”Just getting started optimizing websites? Here’s a time-tested SEO checklist to keep on-hand during your projects.” />

<meta name=”twitter:image” content=”https://www.bruceclay.com/blog/wp-content/uploads/2016/08/SEO-Checklist.jpg” />

Как и в Facebook, здесь есть возможность узнать, как ваша страница будет выглядеть при вставке в твит. Все, что для этого нужно – ввести URL в валидатор Twitter Card и в режиме предварительного просмотра убедиться, что вы настроили размету для социальных сетей правильно.

Совет

Если вы обновите теги Twitter Cards, используйте валидатор для форсирования подтягивания новых тегов.

Готовим статьи к расшариванию на LinkedIn, Google+ и Pinterest

Как упоминалось выше, теги Open Graph считываются LinkedIn, Google+ и Twitter. Когда речь идет о разметке, большинство социальных сетей признает и поддерживает Open Graph по умолчанию. Но есть и другое решение для Google+, Pinterest и LinkedIn – семантическая микроразметка.

Чтобы использовать семантическую микроразметку для контроля постов в социальных медиа Google+ или Pinterest, метатеги должны выглядеть следующим образом:

<html itemscope itemtype=”http://schema.org/Article”>

<meta itemprop=”name” content=”Blog Post Title”>

<meta itemprop=”description” content=”This a description of blog post”>

<meta itemprop=”image” content=”http://www.domain.com/image.jpg”>

Семантическая разметка пойдет в HTML-код, связанный с вашим постом, непосредственно перед закрывающим тегом.

Вы можете проверить семантическую микроразметку с помощью Google Structured Data Testing Tool.

Продвижение с помощью метатегов

Начните думать о своем контенте на популярных платформах как о социальной рекламе.

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

Теги title и description позитивно сказываются на естественном ранжировании в поисковой системе. Метатеги для социальных сетей выполняют ту же роль – они повышают социальное воздействие, увеличивают трафик из социальных медиа и улучшают CTR.

Ирина Винниченко
Контент-маркетолог SEMANTICA

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

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

Задать вопрос по статье
Подпишись на нашу группу в VK и получай экспертные статьи прямо в ленту!
  • Элина Новикова

    Добрый день! У меня такая проблема: по какому алгоритму подтягивать картинки в тег og:image? Хотим сделать opengraph для каждой страницы сайта, но у нас нет таких больших картинок, которые для этого нужны, а на некоторых страницах их слишком много или вообще нет. Какой алгоритм прописать?

Продвижение по трафику от 50 копеек за переход.
от 12 000 руб.
Похвально, что вы решили сами заниматься своим сайтом. В среднем, нулевой сотрудник обучается примерно год. Если у вас есть время на ошибки, то желаем вам удачи в учебе.

Продажи нужны уже сейчас? Мы готовы помочь.
Заказать

Мы работаем не только в Моcкве, но и в других городах России: