Разметка страницы сайта для соц сетей Фейсбук и Вконтакте - особенности, нюансы

Эта статья была просмотрена
Warning: count(): Parameter must be an array or an object that implements Countable in /home/users/g/gangster-club/domains/maxkirpichev.ru/wp-content/themes/maxkirpichev/functions.php on line 88
2471 раз

Разметка страницы сайта для социальных сетей Фейсбук и Вконтакте - особенности, нюансы

Сегодня я постараюсь коротко и сжато рассказать о том, как разметить страницы вашего веб сайта под социальные сети. Разметка страницы нужна для того, чтобы при репосте в социальную сеть ваш пост выглядел красиво. Статья будет из серии «делай как я» — я приведу рабочий, используемый мной код и дам пояснения к нему.

Итак, для разметки html страницы используется т.н. Open Graph разметка (или Open Graph Protocol) — см. http://ogp.me. Смысл в том, что вы просто добавляете на страницу определенные мета-тэги и при репосте робот соц сети парсит информацию из этих тэгов. Т.е. вы загоняете именно ту инфу, которую хотите. Всё просто, но есть некоторые нюансы работы с соц. сетями (скорее конкретно с долбанным фейсбуком, который является той еще занозой в заднице), о которых поговорим позже.

Короче, не будем тянуть кота за яйца, вот рабочий код:

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#">
<head>
<meta property="og:type" content="article" />
<meta property="og:title" content="Здесь пишем заголовок страницы" />
<meta property="og:description" content="Здесь пишем описание страницы. Будет отображаться под заголовком" />
<meta property="og:url" content="http://site.ru/page.html" />
<meta property="og:image" content="http://site.ru/images/preview.jpg" />
<meta property="og:image:url" content="http://site.ru/images/preview.jpg" />
...
</head>
...

Запихуй этот код на свою страницу и попробуй ее репостнуть — всё должно получиться. Если не получится — можешь написать в комментах свой вопросистый вопрос ^^

Комментарии по коду:
Разберем всё по строкам:

<html xmlns:og="http://ogp.me/ns#">

Указываем в тэге html, что на сайте используется разметка Open Graph Protocol.

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

Указываем тип страницы. Чаще всего используется article, как вариант можно поставить website — один хрен особо ни на что не влияет

<meta property="og:title" content="Здесь пишем заголовок страницы" />

Собственно, заголовок страницы. Можно продублировать содержимое тэга title или поставить другой текст. Будет отображаться в соц сети как заголовок поста.

<meta property="og:description" content="Здесь пишем описание страницы. Будет отображаться под заголовком" />

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

<meta property="og:url" content="http://site.ru/page.html" />

Ссылка на страницу

<meta property="og:image" content="http://site.ru/images/preview.jpg" />
<meta property="og:image:url" content="http://site.ru/images/preview.jpg" />

URL картинки, которая будет включена в пост. По своему опыту понял, что оптимальный размер картинки — 600*300 пикселей.

Нюансы работы с разметкой страницы под VK и Facebook:

Первый нюанс — всегда дублируйте
<meta property="og:image" content="http://site.ru/images/preview.jpg" />
и
<meta property="og:image:url" content="http://site.ru/images/preview.jpg" />
Первый тэг используется Фейсбуком, второй — Вконтактом.

Второй момент, который хочется отметить: если вы сделаете тестовый репост страницы, вам не понравится результат (внешний вид поста) и вы решите поменять содержимое одного из тэгов, то при последующих репостах вы скорее всего не увидите изменений в Фейсбуке. Дело в том, что Facebook кэширует содержимое страницы, дабы при следующем репосте их робот не утруждался и не парсил инфу заново. Поэтому если вы внесли изменения в разметку страницы, вам нужно сбросить кэш фейсбука! Сделать это можно  на странице https://developers.facebook.com/tools/debug/og/object/ введя URL вашей страницы и нажав «Fetch new scrape information«. Инструмент работает неебически криво, как и всё на фейсбуке, кэш порой сбрасывается раза с пятого, если постоянно долбите на Fetch new scrape information может выдать что-то из серии «превышен лимит запросов» и заблочить возможность сброса кэша где-то на пол часа. Тем не менее, ничего лучше я пока не нашел, если знаете лучший способ сброса кэша фейсбука — жду ваших вариантов)

Сброс Кэша Фейсбук

Для вконтакта тоже существует инструмент сброса кэша страницы, правда, он обычно не нужен — ВК обычно не кэширует страницы. Но, вдруг понадобится: https://vk.com/dev/pages.clearCache