Не работают теги вконтакте

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

Делаем вашу страницу интересной и стимулируем подписчиков почаще заглядывать к вам на страницу или на сайт за покупками Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд». Подпишись на рассылку и получи книгу в подарок!

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

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

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

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

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

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

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

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

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

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

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

Почему?

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

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

Теги 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: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:image” content=”https://www.bruceclay.com/blog/wp-content/uploads/2016/08/SEO-Checklist.jpg” />

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

Совет

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

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

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

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

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

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

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

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

Что такое Open Graph и зачем он нужен?

На многих страницах сайта мы видим кнопки для соцсетей. При нажатии на них происходит репост анонса страницы сайта. При этом сниппет с этим анонсом формируется по правилам той соцсети, где происходит репост. То есть текст и картинка в анонс попадают автоматически со страницы сайта. Очень часто это бывает не самый понятный текст и не самая удачная картинка. В сниппет может попасть даже рекламный баннер, который в это время оказался на странице, совершенно далекий от темы статьи. Если «социальному» роботу попалась даже подходящая картинка, она может быть изуродована до неузнаваемости подгонкой под формат соцсети всякими обрезаниями и сжатиями.

Для того, чтобы анонс страницы выглядел информативно и привлекательно, чтобы на него хотелось кликнуть, а не скорее пролистнуть, и придумали специальные правила. Это — микроразметка для социальных сетей. Теперь вебмастер может определять вид анонса страницы сайта в соцсетях. Он указывает какой брать текст, изображение и анкор ссылки для сниппета.

Open Graph (OG)– это специальный словарь семантической разметки, который в свое время был разработан для Facebook. Сейчас этот словарь понимают и остальные соцсети – ВКонтакте, Twitter, Одноклассники, Pinterest и другие. Протокол Open Graph также поддерживают поисковики, в том числе Гугл и Яндекс. Наряду с schema.org это самый распространенный словарь для микроразметки.

Как внедрить OG на сайт?

Информация для соцсетей передается с помощью специальных тегов ОпенГраф. Они же, в свою очередь, прописываются в блоках html и head.

В теге html объявляем то, что на странице мы используем словарь OG.

<html xmlns:fb=»http://ogp.me/ns/fb#»>

Остальное прописываем в head. Вот основные мета теги Open Graph:

  • og:title – аналог обычного title, заголовок страницы или другого объекта, он же текст ссылки;
  • og:description – как и стандарный description, описание материала, которое будет выводиться под заголовком;
  • og:type – типы объектов, это может быть статья, видео или аудио трек;
  • og:image – ссылка на иллюстрацию материала;
  • og:url – собственно сама ссылка на материал.

Далее примеры как прописать теги OG.

1 2 3 4 5 6 7 8 <meta property=»og:title» content=» Внедрение разметки Open Graph на сайте»> <meta property=»og:type» content=»article»> <meta property=»og:description» content=»В этой статье узнаем, что такое разметка Open Graph, и как ее применить на сайте для улучшения его представления в социальных сетях. «> <meta property=»og:url» content=»http://myseosite.com/articles/opengraphinsite»> <meta property=»og:locale» content=»ru_RU»> <meta property=»og:image» content=»http://myseosite.com/img/img1.jpg»> <meta property=»og:image:width» content=»968″> <meta property=»og:image:height» content=»504″>

В примере встретилось еще несколько полезных тегов. Желательно указывать локализацию, можно задать размер изображения.

Вариантов значений тега type достаточно много. Для разных видов контента они свои. Кроме того, с этим связаны атрибуты в теге html. Подробное описание содержится в документации Фейсбук для разработчиков

или на сайте Open Graph.

Для каждой соцсети существуют отдельные теги. Особенно много специализированных тегов у Twitter. Например, у всех сетей разные требования к размерам картинок. И чтобы все это выглядело красиво можно прописать vk:image для VK, fb:image для Фейсбук, twitter:image для Твиттер. Каждая соцсеть будет брать параметры изображения из своего тега.

Особенности внедрения OG на сайт

После того как разместили микроразметку Open Graph на странице, ее следует проверить. Сделать это можно с помощью специального отладчика Facebook

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

Кроме того проверку микроразметки ОпенГраф умеет делать валидатор Yandex.

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

Микроразметку Open Graph в CMS можно подключить с помощью плагина, а можно прописывать руками без плагина. Первое, конечно, проще. Существуют плагины для всех популярных движков – WordPress, Joomla, Drupal. Для WordPress их достаточно много — плагин Yoast SEO, WP Facebook Open Graph protocol, Facebook, All in One SEO Pack. Есть плагины и для CMS интернет-магазинов – OpenCart, Magento, Zen Cart.

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

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

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