Возьмите под контроль ваши социальные сниппеты

Опубликовал: 6 лет назад SEO

Социальные сети и их роли в современном мире с каждым днем становится все более значимыми и в мире SEO. Facebook Shares,  твиты в Twitter и +1 Google Plus набрали огромный потенциал для того, чтобы быть мерой качества контента. Именно поэтому поисковые системы начали рассматривать данные социальные сигналы при ранжировании страниц.

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

Социальные сниппеты?

Социальные сниппеты (фрагменты) — это предпросмотр ваших записей, в момент, когда вы делитесь через социальные медиа. Вместо того, чтобы предоставлять пользователям просто ссылку на ресурс, сниппеты передают короткое описание, изображение и многое другое из этой ссылки.  Все это придает вашим ссылкам — некий расширенный предпросмотр. Пользователи уже в социальных сетях  будут иметь некоторое представление о том, что же находится по оставленной вами или иными пользователями заветной ссылке. Я считаю это чудесный шаг вперед. Вы наверное уже видели сниппеты и не раз на просторах социальных сетей. Пришло время познакомится по ближе. К примеру:  хотим мы рассказать о чудесной статье «15 лучших расширений для Chrome для веб дизайнеров и разработчиков» дочитываем статью до конца видим кнопки «поделится» выбираем лучший вариант для Вас (а лучше все варианты сразу) и жмем поделится. Получается у нас вот такой вот вид

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

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

Почему сниппеты так важны?

Часто веб разработчики не правильно оформляют вывод социальных сниппетов. Это приводит к проблемам с отображением. Если есть проблемы ожидайте некорректного отображения в социальных сетях. Главной целью социальных сниппетов является то, чтобы как можно больше пользователей увидели ваше содержимое и у них появилось желание пройти по данной ссылке на ваш ресурс. Вы должны относится к сниппетам как к бесплатной рекламе. Чтобы реклама была успешной — ваша ссылка должна иметь хороший приятный вид, отличное интригующее изображение и интересное описание (что я зачастую не делаю). Если к примеру изображение не корректно отображается и имеет не приятный вид — это может сказаться на приросте новых посетителей.

[NOTE] world of zombie — я до сих пор не сделал нормальное отображение сниппетов! Надеюсь после этой статьи мне станет стыдно и я разберусь со своим сервисом. Не повторяйте моих ошибок!. [/NOTE] 

[WARNING]Еще раз повторюсь — относитесь к сниппетам очень внимательно и осторожно! И тогда вы получите дополнительных пользователей на свой сервис![/WARNING]

Протокол Open Graph

Социальные сниппеты базируются на работе протокола Open Graph. Данный протокол позволяет добавлять в социальные медиа — расширенные данные с  веб страниц. Этот протокол позволяет социальным сетям и медиа, таким как Facebook, Twitter, Google Plus и другим получать данные в расширенном виде.

ogp

 

Протокол Open Graph основан на базе RDF.

[TIP]Что такое RDF?

Resource Description Framework (RDF, «среда описания ресурса») — это разработанная консорциумом Всемирной паутины модель для представления данных, в особенности —метаданных. RDF представляет утверждения о ресурсах в виде, пригодном для машинной обработки. RDF является частью концепции семантической паутины.

Ресурсом в RDF может быть любая сущность — как информационная (например, веб-сайт или изображение), так и не информационная (например, человек, город или некое абстрактное понятие). Утверждение, высказываемое о ресурсе, имеет вид «субъект — предикат — объект» и называется триплетом. Утверждение «небо голубого цвета» в RDF-терминологии можно представить следующим образом: субъект — «небо», предикат — «имеет цвет», объект — «голубой». Для обозначения субъектов, предикатов и объектов в RDF используются URI.

[/TIP]

Мы cможем реализовать его с помощью дополнительных тегов <meta> внутри контейнера <head> нашей странички.

Больше информации о протоколе Open Graph читайте на официальном сайте - ogp.me

Создание социальных сниппетов

Теперь настало нам познакомится поближе со сниппетами и научится использовать их в наших будущих проектах. Есть несколько элементов, которые могут быть отредактированы: эскиз, заголовок,  описание. url и тип содержимого.

[NOTE] Следующая разметка используется Facebook и Google. Twitter использует несколько другие методы разметки. О них чуть позже. [/NOTE]

Эскиз

Эскиз пожалуй самый важный элемент социальных сниппетов. Их зачастую пользователи видят первыми при загрузке содержимого и чаще обращают на эскизы внимание. Поэтому убедитесь что вы используете качественное и четкое изображение. Я предлагаю использовать квадратную картинку размером не большее 200×200 пикселей. Если оно меньше, то будет трудно читаемое  а если будет больше, то в итоге вы получите несколько другое представление нежели Вы планировали увидеть.

Мы можем указать расположение эскиза с помощью данной разметки:

 Заголовок

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

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

 Описание

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

Код для описания:

 Тип контента

Если Вы хотите явно указать тип контента то Вам следует его указать в теге. Если тип не указан, но по умолчанию тип выставляется «веб-страница». Вы можете использовать типы : music, video, article, book и profile

 URL

Ссылка на которую попадают пользователи при нажатии. Добавляйте канонические URL.

Если вы хотите отслеживать трафик , поступающий из социальных сетей, то вы можете использовать Google URL Builder для решения этой задачи.

Вам нужно указать только три параметра: источник, Medium и Campaign.

  • Source: facebook
  • Medium: social
  • ampaign: a unique name/id

Полная ссылка будет у вас вида:

http://isandbox.ru/article-title?utm_source=facebook&utm_medium=social&utm_campaign=article-name

Twitter карточки

Twitter использует для разметки и создания карты — различные данные.

Могут быть использованы три типа медиа:

  • summary: по аналогии социальных сниппетов Facebook и Google+
  • photo : фото карточка
  • player: карта медиа плеера

Давайте сделаем Twitter карту:

Summary

Карта описания представляет собой карту Twitter, которая напоминает социальные сниппеты которые мы видели при работе с  Facebook и Google+. Описание может быть использовано для различных типов контента (блогов, статей, продуктов и так далее ...).

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

Для начала мы определяем тип Twitter карт через  тег:

Дальше мы указываем канонический URL на страницу. Заголовок не должен быть более 70 символов. Описание ограничиваем 200 символами. Изображение используемое в качестве эскиза  - должно быть квадратное. Изображение меньше, чем 60×60 пикселей, не будут отображаться.  Ни и в конце концов нужно отдать должное автору текста статьи.

Photo

Есть несколько элементов Photo Card, которые также используются. Основное различие между ними состоит в стилизации твитов. Изображения должны быть не меньше, чем 280×150 пикселей. Иначе оно не будет отображено. Вы можете указать ширину и высоту изображения, чтобы помочь Twitter сохранять пропорции изображения при изменении размера.
Разметка будет выглядеть следующим образом:

 Player

Player карточки могут использовать для аудио или видео данных. Медиа файл встраивается в твит при помощи iframe. Недостатком считается то, что сначала требуется одобрение Twitter'a.

Давайте взглянем на код:

Тег  twitter:card используется для индицирования карты player. Используется: URL, заголовок, описание и эскиз. Twitter: player тег содержит ссылку HTTPS на фрейм. Вы можете указать ширину и высоту IFRAME через теги Twitter: player: width и Twitter: player:height.

Несколько других требований к twitter: player:

  • Используйте URL HTTPS (видео должны быть подключены тоже через HTTPS)
  • Контроль остановки и паузы является обязательным
  • Не включено автоматическое воспроизведение
  • Содержание не должно требовать входа

Twitter карты и Open Graph

Twitter сначала ищет теги  twitter:card  на вашей странице и если он не может их найти он возвращается и берет данные Open Graph. Это огромный плюс и дает он вам то, что вам не требуется дублировать теги. Вы можете дополнять ваши Open Graph теги — тегами Twitter карт.

Twitter видит следующие теги как одинаковые  (слева Twitter теги, справа — Open graph):

  • twitter:ul = og:url
  • twitter:description = og:description
  • twitter:title = og:title
  • twitter:image = og:image
  • twitter:image:width = og:image:width
  • twitter:image:height = og.image.height

Полезные ресурсы

Чтобы помочь вам в реализации социальных сниппетов, собрали парочку полезных ресурсов для вас:

Google+ Snippet Creator - Используйте этот инструмент для создания HTML-кода социальных сниппетов.  Просто вставьте код в контейнер <head> и наслаждайтесь.

Facebook Debugger - проверьте open graph информацию, которая была добавлена  с вашей страницы.

Rich Snippet Testing Tool - может быть использован для проверки информации с вашего социального сниппета.

Заключение

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

P.S:  Теперь мне придется взяться за сниппеты Мира Зомби (World of Zombie). Там у меня с кодом кое-какие проблемы. Поэтому сложновато придется, но я не унываю. Справимся я думаю. И вам желаю стать на шаг впереди, если до этого момента, вы еще не сделали все то, о чем писалось в статье.

P.S: Нужно брать под контроль не только сниппеты, но и безопасность.  А  вы в курсе, что Яндекс обладает антивирусным отделом?

 

P.S: upd 03.06.2013


Новая система комментариев
comments powered by HyperComments