Кнопки социальных сетей
14 января 2017
Микро-разметка schema.org json-ld шаблона BeTheme для WordPress
3 февраля 2017
Установка социальных кнопок на сайт — это самый первый шаг интеграции и продвижения его в социальных сетях. В предыдущей статье «Кнопки социальных сетей», был подробно рассмотрен сервис, который предоставляет нам не только такую возможность, но и дает полную аналитику посещаемости нашего блога.
Но, для того, чтобы анонсы статей сайта в Вашем аккаунте, бизнес-странице или сообществах в соц.сетях, более полновесно передавали суть этих постов, привлекали к себе внимание, нужно немало еще сделать технических настроек. Ибо от того, насколько правильно Вы соедините свой блог с социальными сетями, будет зависеть и вид Ваших анонсов, и их содержание.
Ведь не секрет, что любой твит с сайта в Twitter мало кого привлекает — пара строчек текста. Не многие используют эту сеть для продвижения. Разве что, для получения бесплатности с сайтов, если для этого требуется поделиться в соц.сетях с друзьями. Да и много ли там этих друзей?
А представьте себе, что в каждом анонсе в Twitter, Facebook, ВКонтакте или Одноклассниках отображается не только кусочек текста Вашего поста, но и его заглавие, полномасштабный рисунок или фото, которое Вы разместили в своей статье, вместе с ссылкой, ведущей на нее. Да и сама картинка имеет свойства ссылки.
Можете заглянуть ко мне в Twitter и удостовериться сами, там анонсы с предыдущих статей: https://twitter.com/dgpalych. Или же сами нажмите на любую кнопку соц.сетей «Поделиться» — увидите результат у себя в аккаунте.
Все это итог применения расширенных настроек системы мета тегов Open Graph от Facebook и Twitter. Плюс, некоторые настройки самого блога на WordPress, которые и генерируют вид ваших анонсов во всех социальных сетях.
Вот ими то мы сейчас и займемся.
Настройки блога для Open Graph.
Нужно заметить, что большую роль играет тема, или шаблон блога, которая установлена на WordPress. Многие бесплатные шаблоны нуждаются в более расширенных настройках. Требуется установка дополнительных мета тегов в редактор — Заголовок (header.php).
В более современных, профессиональных платных шаблонах, достаточно будет добавить уточняющие настройки в специальные разделы или используемые SEO-плагины.
Неотъемлемым атрибутом таких анонсов, конечно же, является картинка, которая не только дополняет его, но и служит инструментом привлечения внимания к ним аудитории с соц.сетей.
В некоторых случаях, если на сайте постоянно используется видео-контент, вместо картинок можно генерировать в анонс видео-файлы.
Чтобы с самого начала не запутаться в настройках, необходимо придерживаться определенных условий.
Первое — в обязательном порядке, при редактировании любого поста на блоге, использовать опцию «Миниатюра записи» или в новой редакции WordPress — «Изображение записи«. Находится она в Консоли WordPress, справа-внизу от редактора записи или страницы.
Изображение для миниатюры, которое будете загружать в медиафайлы, не должно быть меньше 600 пикселей по ширине и 315 по высоте. Это требование Facebook.
Читайте: https://developers.facebook.com/docs/sharing/best-practices. Придерживаться пропорций 1,91:1.
Можно, исходя из особенностей некоторых социальных порталов, использовать пропорции — соотношения ширины к высоте, как 2:1. Это нужно для того, чтобы в ленте новостей соц.сетей рисунок не обрезался. В любом случае — нюансы существуют на каждом социальном портале.
Так же, примите во внимание, что размер загружаемой картинки для миниатюры, должен быть установлен единым, раз и навсегда. Лучше использовать свой размер, исходя из особенностей шаблона. Эти данные заносятся в настройки мета тегов.
Размер картинки на этом сайте равен 850 х 425 пикселей. И как сами видите, отображается она в самом начале каждой статьи. Второе — даем доступ к сайту всем поисковикам — убираем все ограничения в файле robots.txt.
Кстати, чем больше запретов в этом файле, тем больше проблем Вы будете создавать для своего блога. Это проверенный факт. Если Вы уже подключили к сайту SSL-сертификат, вид файла robots.txt должен выглядеть вот таким образом:
User-agent: * Disallow: /wp-admin/ Disallow: /*/feed Host: https://ваш-домен.ru Sitemap: https://ваш-домен.ru/sitemap.xml User-agent: Googlebot-Image Allow: /wp-content/uploads/ User-agent: YandexImages Allow: /wp-content/uploads/ User-agent: Twitterbot Allow: /wp-content/uploads/
Если же, до сих пор используете http подключение, в четвертой и пятой строке оставляем старую редакцию:
Host: ваш-домен.ru Sitemap: http://ваш-домен.ru/sitemap.xml
Не забудьте подставить в файл имя своего домена.
Более подробно о подключении сертификата SSL, читайте на основном блоге: «Установка SSL-сертификата SSL Let’s Encrypt от Comodo на WordPress».
Расширенные настройки мета тегов Open Graph.
Настройка и установка мета тегов Open Graph от Facebook и Twitter, так же требует от нас некоторых дополнительных настроек. В частности, создания своего ID-приложения на Facebook.
Оно понадобиться не только для настроек Open Graph, но и, в дальнейшем, при создании своей бизнес-странички в этой сети, с помощью которой, можно вести свою рекламную компанию.
Для этого переходите по адресу: https://developers.facebook.com. Естественно, Вы должны быть зарегистрированы в социальной сети Facebook и перед созданием приложения, войти в нее.
Я не буду здесь подробно описывать, как это сделать. Лучше посмотрите отрывок одного из моих видео-уроков с платного видео-курса:
«Бизнес-блог на уникальном шаблоне BeTheme для WordPress».
После того, как Вы создали свое приложение и сохранили у себя на компьютере ID этого приложения, можно приступить и к мета тегам.
Напоминаю еще раз, что данные мета теги предназначены не для всех шаблонов. В основном, для более старых бесплатных версий. Но, возможно, и некоторые новые темы WordPress обделены данными функциями.
Мета теги Open Graph для Facebook.
Open Graph — это система, которая говорит поисковикам соц.сетей — что нужно брать с нашего блога — какой заголовок, какую именно картинку и текст. У каждого такого объекта есть свои свойства, которые и описываются определенным мета тегом.
Разберем по порядку.
Данный мета тег обозначает тип страницы, с которой взят материал:
<meta property="og:type" content="article" />
Заголовок статьи, которой делитесь кнопкой «Поделиться» в соц.сетях:
<meta property="og:title" content="<?php the_title(); ?>" />
URL-адрес вашей статьи, с которой взят анонс:
<meta property="og:url" content="<?php the_permalink() ?>" />
Краткое описание этой статьи. Так же используется во многих SEO-плагинах:
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
URL-адрес картинки, именно, миниатюры записи, которая и будет отображаться в анонсе:
<meta property="og:image" content="<?php echo summary_large_image wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>» />
Тип файла изображения, в каком формате рисунок или фото загружено в медиафайлы — jpg или png, можно указать через запятую или отдельным тегом:
<meta property="og:image:type" content="summary_large_image/jpg" />
В некоторых случаях Facebook, непосредственно, для своих мета тегов требует указать и размер изображения — ширину и высоту:
<meta property="og:image:width" content="850" /> <meta property="og:image:height" content="425" />
Подставляете размеры своего изображения в медиа-файлах.
Название сайта, с которого взят материал:
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
Язык, используемый на блоге или сайте:
<meta property="og:locale" content="ru_RU" />
ID-приложения в Facebook, которое Вы создавали перед этим:
<meta property="fb:app_id" content="150476300556" />
Цифры, обязательно, вписываете свои, которые несут свойства вашего приложения.
Более подробно можно прочитать и на Facebook, где рассматриваются и дополнительные свойства, которые можно использовать в Open Graph:
https://developers.facebook.com/docs/sharing/opengraph/object-properties.
Мета теги Open Graph для Twitter.
Идентичны по функциональности и мета теги Open Graph для Twitter. С той лишь разницей, что в первых двух, Вы подставляете свой логин от Twitter. Предварительно, должны быть там зарегистрированы.
<meta name="twitter:site" content="@вашлогин" /> <meta name="twitter:creator" content="@вашлогин" />
Вместо «вашлогин», подставляете свой, без пробелов и с сохранением знака @.
Все остальные теги — название статьи, сайта, «дискрипшен» или описание, изображение миниатюры и размеры — обязательные:
<meta property="twitter:title" content="<?php the_title(); ?>" />
<meta property="twitter:description" content="<?php bloginfo('description'); ?>" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image:src" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>" />
<meta name="twitter:image:width" content="850" />
<meta name="twitter:image:height" content="425" />
В последних двух, ставите размер изображения, что и в файле для Facebook.
В итоге, у Вас получиться набор мета тегов Open Graph для всех основных социальных сетей. Ибо, теги от Facebook генерируют анонсы и для соц.сетей ВКонтакте, Одноклассники и т. д.
<meta property="og:type" content="article" />
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:url" content="<?php the_permalink() ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:image" content="<?php echo summary_large_image wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>» />
<meta property="og:image:type" content="summary_large_image/jpg" />
<meta property="og:image:width" content="850" />
<meta property="og:image:height" content="425" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:locale" content="ru_RU" />
<meta property="fb:app_id" content="150476300556" />
<meta name="twitter:site" content="@вашлогин" />
<meta name="twitter:creator" content="@вашлогин" />
<meta property="twitter:title" content="<?php the_title(); ?>" />
<meta property="twitter:description" content="<?php bloginfo('description'); ?>" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image:src" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>" />
<meta name="twitter:image:width" content="850" />
<meta name="twitter:image:height" content="425" />
Не забудьте только вставить в код свои данные, указанные выше.
Установка мета тегов Open Graph в редактор WordPress.
После того, как Вы создали свою систему мета тегов Open Graph, соответствующую задачам Вашего сайта, отредактировали его, внесли свои данные, можно установить его и в редактор WordPress.
Для этого, полностью копируете созданный код, заходите в Консоль своего блога — Внешний вид — Редактор. В Редакторе находите и открываете — Заголовок (header.php). После открывающегося тега <head>, обычно, во многих шаблонах находится свой блок мета тегов. Начинается он, примерно, с такого кода:
<!-- meta --> <meta charset="<?php bloginfo( 'charset' ); ?>" />
Ищите что-то подобное.
Вставляете свои мета теги сразу после этого кода — отступив одну строку, или же, в конце всего блока мета тегов, которые там присутствуют.
Если в Вашем шаблоне отсутствует блок meta-тегов, вставляете свой, сразу после открывающегося тега <head>. Сохраняете обновления. Перезагружаете блог, на всякий случай, проверяете его на работоспособность. Если не наделали ошибок, блог будет работать как часики.
Проверку работоспособности самого блока meta-тегов, вставленного Вами в редактор, я опишу в конце статьи. А сейчас затронем еще один способ их настройки.
Настройка meta-тегов Open Graph в функционале темы WordPress плагинами SEO.
Кто систематически следит за новостями от Facebook, может заметить, что в последнее время функционал этой социальной сети часто обновляется. Вышло даже вот такое предупреждение:
Многие профессиональные разработчики тем для WordPress, да и многих SEO-плагин, давно уже встраивают в свои продукты функции мета тегов Open Graph, тем самым заменяя и дополняя, предложенные ранее, услуги Facebook.
В связи с этим, старые мета теги перестают работать в новых шаблонах или спорят с некоторыми SEO-плагинами. Иногда выскакивают такие предупреждения при проверке работоспособности установленных meta-тегов в Отладчике Обмена новостями — Sharing Debugger.
На моем основном блоге dg-palych.ru, на старом шаблоне, эти мета теги работали безукоризненно. Но, потом, я установил на сайт профессиональный платный шаблон, где автором уже были интегрированы эти функции, непосредственно в тему. Так что устанавливать их дополнительно, отпала необходимость.
На этом же сайте, где Вы находитесь, некоторые функции Open Graph так же предусмотрены. Но требуют некоторых дополнений. Здесь установлен шаблон для WordPress от западных разработчиков Muffin Group — BeTheme, который я предлагаю в своем видео-курсе, упомянутом выше.
Большинство профессиональных платных шаблонов разработаны, именно, по этому принципу. В следствие чего, установка на них дополнительных meta-тегов, в большинстве случаев, не требуется.
В шаблоне BeTheme имеются свои SEO и meta настройки. Некоторые функции я отключил, так как использую внешний, установленный дополнительно, всем известный, SEO-плагин All In One SEO Pack. Как его устанавливать и настраивать, найдете в одной из статей блога dg-palych.ru.
Чтобы внести дополнительные настройки, заходите в Консоль блога — All In One SEO — Управление модулями и активируете вкладку «Социальные мета«, переходите в ее настройки.
В Основных настройках и настройках Главной страницы, ставите галочку для автогенерации OG-описания и использования AIOSEO-заголовка в мета тегах. Вписываете название сайта — какое оно есть, можно и на русском. Можете вставить ссылку на рисунок, который будет отождествляться с Главной страницей. Если что-то не понятно, кликаете на знак вопроса.
В Настройках изображения, из выпадающего списка, выбираете — Изображение записи, если используете Миниатюру записи, о которой мы говорили выше. Если нет никакого изображения в статье, ставите галочку — Использовать изображение по умолчанию и вставляете на него ссылку. Но, предварительно, такой рисунок должен быть загружен в медиафайлы блога.
Вписываете ширину и высоту изображения Миниатюры записи — он должен соответствовать размерам этого изображения в медиафайлах.
В Настройках Facebook, первое — нажмите на значок вопроса Facebook Admin ID. Откроется дополнительная информация, где найдете ссылку http://findmyfbid.com/.
Второе — скопируйте ее и вставьте в адресное окно своего браузера, дальше кнопка Enter на клавиатуре. В новом окне введете адрес своего аккаунта в Facebook и кликните на кнопку — получить ID. Естественно, Вы должны быть зарегистрированы в этой сети и войти.
Скопируете полученные цифры и вставите их в соответствующее окно настроек плагина.
В строке Facebook App ID подставляете значение ID Вашего приложения, о создании которого мы говорили выше. Дальше, выбираете опции Веб-сайт, если у Вас статическая Главная страница, или блог, если вместо Главной — лента анонсов записей блога.
Генерировать теги и использовать ключевые слова.
Включить мета теги записей, страниц и медиафайлов. Вставляете адрес своей бизнес-страницы, через которую будете рекламировать свои материалы, если она у Вас создана. Желательно, чтобы была. Ставите галочку — показывать автора. Обязательно выбираете тип страницы в мета тегах — Статья.
В разделе Социальные ссылки, вставляете ссылки на свои ресурсы в социальных сетях, с отдельной строки на каждую. Обозначаете кому принадлежит сайт — частному лицу или организации.
В разделе настроек Twitter выбираете — Большое изображение, которое будет отображаться в Ваших твитах, вписываете свой логин от аккаунта со знаком @ и доменное имя своего сайта.
Внизу, не забудьте обновить настройки. В плагине пока все.
Социальные настройки плагина All In One SEO Pack этим не ограничиваются. Кто с ним знаком, знает, что в Редакторе WordPress, после каждой статьи, присутствуют такие же настройки этого плагина, но уже для каждой статьи отдельно.
Там есть Основные настройки и появились обновленные Социальные настройки. Где Вы так же можете, для большей уверенности, вписывать название статьи, ее описание, выбирать рисунок и его размер.
Обозначать тип записи — Статья, если необходимо можете указать даже рубрику, теги или ключевые слова. Ну и, конечно указать размер изображения для Twitter.
Я думаю, что этих настроек вполне достаточно, чтобы анонсы постов в социальных сетях выглядели соответственно Вашим требованиям и желаниям.
Проверка и отладка публикаций в социальных сетях.
Для того, чтобы проверить и, если есть такая необходимость, отладить Ваши анонсы публикаций в социальных сетях, сделанных с помощью кнопки «Поделиться» и мета тегов Open Graph, нужно перейти по ссылке Facebook Debugger: https://developers.facebook.com/tools/debug/, вставить в строку отладки ссылку на статью и нажать на кнопку — Debug.
В новом открывшемся окне Вы увидите результаты своих трудов — полномасштабное изображение рисунка или фотографии, соответствующей статьи, заглавие самого поста и небольшое описание.
Если Facebook обнаружит какие-то ошибки в настройках — будет выделено в красной рамке. Если же будет не то изображение, так как Facebook берет устаревшие данные из «кеша», кликните на кнопку — Сделать скроллинг — Получить повторные данные. Указанные ошибки необходимо исправить и повторить предыдущие действия.
Кто пользуется плагином All In One SEO Pack, в настройках после каждой статьи, так же есть кнопка — Отладить эту публикацию, которая и перебросит Вас в Facebook Debugger.
Осталась последняя проверка. Ваша задача — занести сайт в «Белый список» Twitter. Здесь придется немного повозиться, ибо, как Вы знаете, Twitter не очень хочет публиковать Ваши посты вместе с картинками. Обычно это очень короткие твиты с ссылкой на статью.
Для этого заходите по адресу: https://cards-dev.twitter.com/validator — это сервис для занесения сайта в «Белый список». С левой стороны вставляете адрес Вашей статьи. Нажимаете Preview card — посмотреть превью Вашего анонса — и справа отобразится превью анонса в Twitter, а внизу, под картинкой, то что нужно сделать, если будет предупреждение, что «Не занесен в белый список».
Если настройки в полном соответствии с требованиями, Ваш анонс будет во всей красе с большой картинкой.
После всех проделанных настроек, можете смело постить свои статьи в любых социальных сетях. Одно маленькое предупреждение — при нажатии кнопки «Поделиться в Twitter», в выпавшем окошке, вместо текста твита, будет только ссылка на статью — не обращайте внимания. Эта ссылка сгенерирует полновесный твит в Вашем аккаунте.
Ну вот, кажется и все, что я, вкратце, хотел сказать о социальных кнопках и методах размещения анонсов статей с сайта в социальные сети, с помощью мета тегов Open Graph.
Если что-то забыл, пишите в комментариях. Буду рад услышать Ваше мнение.
