Мета-теги Open Graph, meta property
Автор Макс ПуляНаверное, каждый веб-мастер новичок сталкивался с проблемой "шаринга" статьи в социальные сети. То картинка не отображается (или не та картинка), то текст куда-то пропал.
И вот, на помощь пришел протокол Open Graph! Использование этого протокола в корне меняет дело. При шаринге, статья отображается как надо и проблем больше нет. Применение протокола Open Graph никак не влияет на SEO оптимизацию сайта, он нужен только для социальных сетей.
Мета-теги Open Graph выглядят следующим образом:
<meta property="og:url" content="https://epicblog.net/147/optimizatsiya-sajta-dlya-poiskovykh-sistem-google-yandeks-i-drugikh.html" />
<meta property="og:title" content="Оптимизация сайта для поисковых систем Google, Яндекс и других - Epic Blog - эпик блог для всех" />
<meta property="og:description" content="Поисковая оптимизация сайта. SEO оптимизация веб-сайта для поисковых систем Яндекс и Google." />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://epicblog.net/media/k2/items/cache/f7abac252ae5ed68121b92ba7a669d87_M.jpg" />
Они сообщают социальной сети какое отобразить название, откуда взять изображение и т.д.
Хочу сразу отметить, что прописывать этот код для каждой страницы сайта - это мрак и нудная работа. Если у Вас сайт на обычном HTML, то деваться некуда - придется прописывать вручную. А если Вы используете популярную CMS, то можете поискать дополнительные расширения, которые будут вставлять мета-теги Open Graph в код страницы автоматически. Для Joomla есть такие плагины - они сильно облегчают жизнь веб-мастеру.
Однако, если сайт на обычном HTML, то нужно знать, за что отвечает каждая строчка протокола Open Graph. Всё предельно просто:
og:url - это ссылка, с помощью которой пользователи перейдут на материал или статью;
og:title - это название статьи или материала;
og:description - это краткое описание статьи или материала;
og:type - это тип материала (статья это или видео, например);
og:image - изображение, которое будет отображено в социальной сети при шаринге.
В случае, если Вы будете использовать расширение для CMS - плагин будет подтягивать данные в протокол Open Graph из известных тегов: title и description, так что не забывайте заполнять эти теги при написании материалов.
Всем удачи и добра!
Макс Пуля
Приветствую! Присоединяйтесь к сообществу Epic Blog и выражайте свои мысли.
Последнее от Макс Пуля
- $100 длиной в 2,5 года: доход сайта AdSense за два с половиной года
- Поворот текста, текст по диагонали CSS
- Как сделать верхний слой неактивным (некликабельным) CSS pointer-events
- VideoRoll.net - отзыв и обзор партнёрской программы по видеорекламе
- Высота iframe в зависимости от содержимого
- Ajax подгрузка контента по клику в div jQuery
- Скрыть / Показать DIV блок при выборе select пункта
- Как прибавить или вычесть процент от числа на PHP/JavaScript
- Как отключить просмотр исходного кода, проверку элемента и правую кнопку на сайте
- Новые планы: разработка мобильной игры