Я уже довольно много писал про разные методы использования социальных сетей для продвижения сайтов. Это действительно важный момент, который позволяет получить бесплатный трафик из социальных сетей и улучшить позиции в поисковой выдаче. Все эти статьи вы можете почитать здесь. В данной же статье речь пойдет об оптимизации страниц вашего сайта для правильного отображения в социальных сетях.
Добавление мета-тегов OpenGraph
Речь о том, чтобы когда посетитель решит поделится ссылкой на ваш сайт в социальной сети то сообщение выглядело бы именно так как вам необходимо. Этого позволяют добиться специальные мета-теги Open Graph, которые помогут соцсети определить какое изображение прикрепить к ссылке, какой поставить заголовок и какой текст, а так же тип публикуемого контента (статья, картинка и т.п.).
Большинство соцсетей используют уже упомянутый стандарт Open Graph. Чтобы передать нужные вам данные с помощью этих мета-тегов необходимо в шаблон страницы материала и комментариев добавить похожий код в заголовок, между тегами <head> и </head>.
<meta property="og:title" content="$ENTRY_NAME$"/> <meta property="og:description" content="$ENTRY_TITLE$. И другие новости на сайте $SITE_TITLE$."/> <meta property="og:image" content="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>http://www.site.ru/img/zaglushka.jpg<?endif?>"> <meta property="og:type" content="article"/> <meta property="og:url" content= "$ENTRY_URL$" />
Давайте разберем по порядку.
<meta name=»description» content=»$ENTRY_TITLE$. И другие новости на сайте $SITE_NAME$.»> — задает описание материала для соцсети. С помощью переменных $ENTRY_TITLE$ и $SITE_NAME$ вы уникализируете данный тег для каждого отдельного материала. Измените текст по своему усмотрению, проявите фантазию, возможно вы захотите добавить другие переменные.
<meta property=»og:title» content=»$ENTRY_TITLE$»/> — Заголовок материала. С помощью переменной $ENTRY_TITLE$ мы передаем заголовок текущего материала.
<meta property=»og:image» content=»<?if($IMG_URL1$)?>$IMG_URL1$<?else?>http://www.site.ru/img/zaglushka.jpg<?endif?>»> — пожалуй самый любопытный тег. Он позволяет передать изображение прикрепленное к материалу. Если нет этого тега, то соцсеть прикрепит изображение на свое усмотрение. В данном варианте ваш сайт передаст ссылку на первое прикрепленное изображение к статье, а если вы не прикрепили ни одного изображения, то будет передано изображение http://www.site.ru/img/zaglushka.jpg. Конечно этот адрес не существует, вам необходимо будет загрузить свое изображение и указать здесь его адрес.
Подпишись на наш канал в Telegram или VK - первым узнавай о бесплатных вебинарах и курсах, а так же скидках на платное обучение.
<meta property=»og:type» content=»article»/> — сообщает соцсети, что ссылка публикуется на статью.
<meta property=»og:url» content= «$ENTRY_URL$» /> — и еще один важный тег сообщает соцсети адрес публикуемой страницы.
Этих тегов вполне достаточно для таких социальных сетей как вконтакте или facebook, а вот у Twitter есть набор своих метатегов, которые тоже имеет смысл добавить.
Добавление мета-тегов Twitter
<meta name="twitter:site" content="@username"> <meta name="twitter:creator" content="@username"> <meta name="twitter:site" content="summary_large_image"> <meta name="twitter:title" content="$ENTRY_TITLE$"> <meta name="twitter:image:src" content="<?if($IMG_URL1$)?>$IMG_URL1$<?else?>http://www.site.ru/img/zaglushka.jpg<?endif?>"> <meta name="twitter:description" content="$ENTRY_TITLE$. И другие новости на сайте $SITE_NAME$. Портал п. Вынгапуровский, Ноябрьск, ЯНАО.""> <meta name="twitter:image:width" content="435"> <meta name="twitter:image:height" content="375">
Теги очень похожи на Open Graph, поэтому я не буду расписывать их подробно, остановлюсь лишь на двух первых.
<meta name=»twitter:site» content=»@vyngapurru»>
<meta name=»twitter:creator» content=»@vyngapurru»>
Эти метатеги позволяют передать связанный с сайтом и автором аккаунт в твиттере. Таким образом твиттер будет связывать публикуемые ссылки вашего сайта с вашим аккаунтом.
Зачем добавлять мета-теги соцсетей
Для чего все это стоит делать. Когда посетитель поделится ссылкой на вашу статью или товар в магазине, то важно как эта ссылка будет выглядеть на его страничке. Если она сформируется случайным образом, то это может не дать никакого вирусного эффекта, поскольку его друзья не обратят на нее внимания, не захотят кликнуть по ней чтобы прочитать интересную статью или узнать о скидке и т.п. С помощью данных мета-тегов у вас есть возможность управлять тем как выглядят ваши ссылки в соцсетях и делать их более привлекательными!
Например ссылка на страницу с акцией вашего интернет-магазина будет сопровождаться яркой привлекающей внимание картинкой, а не случайным изображением с вашего сайта. А текст и заголовок будут призывать к действию увеличивая конверсию социальных ссылок.