Как сделать превью сайта при попытке поделиться ссылкой в социальных сетях

Содержание:

Что такое мета-теги?
Why was Open Graph created?
Мета тег description
- Мета совет
Взаимодействие с социальными сетями
Результаты тестирования
Как внедрить OG на сайт?
Как закрыть внешние ссылки от индексации
NOFOLLOW в ссылках
Разметка видео
Как использовать Open Graph разметку?
Alt атрибуты изображения
- Оптимизация alt тега img для изображений
Внедрение протокола Open Graph в Joomla 3
Массивы
Стандартная разметка сайта
What happens if I don’t have it?
Structured Properties
Мета-теги для картинок сайта:

Что такое мета-теги?

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

Такие теги могут нести в себе описание страницы (например, ключевые слова и само описание), информацию об авторских правах или самом авторе, указания браузеру на какие-то внешние или внутренние механизмы обработки страницы и даже команды браузеру, а также правила «поведения» для поисковых систем.

Нужно заметить, что правильное написание («мета-теги» или «метатеги») нигде не регламентировано, а следовательно, здесь вы можете шалить как душе угодно. На википедии оперируют метатегами и мета-тегами наравне. Но не будем о грустном мира сего, пойдём дальше.

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

Отсюда вытекает следующая проблема — не все браузеры понимают некоторые специфичные мета-теги. Например, мета-тег , который предназначен для мобильных версий браузера Chrome никак не повлияет на, допустим, сам Chrome, который запущен на десктопе. Иначе говоря, те браузеры, что не могут соотнести мета-тег с функционалом, который в них заложен — просто игнорируют его.

На самом деле так же дела обстоят и с другими тегами. Недавно перешедшая в статус официальной рекомендации спецификация HTML5, содержит в себе реинкарнацию элемента dialog, который до сих пор поддерживается только Chrome и Opera. Однако, это не значит, что в других браузерах этот элемент и его содержимое будет игнорироваться вовсе — он просто будет обычным тегом, например, таким, как . Разумеется, что и доступное для него API (по спецификации) в таком браузере не будет реализовано, хотя в DOM такой элемент будет, и его содержимое будет отображаться на странице.

Why was Open Graph created?

Facebook introduced Open Graph in 2010. It promotes integration between Facebook and other websites by allowing them to become rich “graph” objects with the same functionality as other Facebook objects.

Put simply, a degree of control is possible over how information travels from a third-party website to Facebook when a page is shared (or liked, etc.). In order to make this possible, information is sent via Open Graph meta tags in the <head> part of the website’s code.

Now, other social media sites also are taking advantage of social meta tags. All of the other major platforms, , LinkedIn, and , recognize Open Graph tags. Twitter actually has its own meta tags for Twitter Cards, but if Twitter robots cannot find any, Twitter uses Open Graph tags instead.

Мета тег description

Мета-описание (meta description) – также находится в <head> веб-страницы и обычно (хотя далеко не всегда) отображается в сниппете поисковой выдачи вместе с заголовком и URL-адресом страницы.

Например, это мета-описание данной статьи:

И да, само по себе метаописание не является фактором ранжирования. Но для любого вебмастера, старающегося увеличить количество переходов из поиска и улучшить поисковую выдачу своего бренда, это уникальная возможность.

Description занимает большую часть сниппета поисковой выдачи и приглашает пользователей щёлкнуть именно по вашей ссылке, обещая чёткое и комплексное решение их запроса.
Описание влияет на количество получаемых вами кликов, а также может улучшить CTR и снизить показатель отказов, если содержание страницы действительно соответствует обещаниям. Вот почему описание должно быть в равной степени реалистичным, привлекательным и чётко отражать содержание.
Если ваше описание содержит ключевые слова, использованные человеком в своём поисковом запросе, они будут выделены в поисковой выдаче жирным шрифтом

Это помогает вам привлечь внимание и сообщить пользователю, что именно он найдёт на вашей странице.

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

Лучший способ выяснить, что необходимо поместить в мета тег Description для эффективного ранжирования – провести анализ конкурентов. Вбейте главный поисковый запрос вашей будущей или текущей страницы в Яндекс и Google. Посмотрите, кто и как заполнил описание, и возьмите себе всё самое лучшее из топа.

Мета совет

Мета-описание не обязательно должно состоять из одного-двух предложений. Вы можете добавить дополнительную информацию о странице, которая обрабатывается поисковиками и позволит выделиться в SERP.

Например:

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

Взаимодействие с социальными сетями

Метатеги социальных медиа необязательны, но помогают поделиться ссылкой на веб-страницу в таком виде, чтобы привлечь внимание читателей, увеличить количество лайков и репостов. Текст адаптируется для поста, картинка создаётся специально под площадку

Причём они могут даже не отображаться в веб-версии сайта

Текст адаптируется для поста, картинка создаётся специально под площадку. Причём они могут даже не отображаться в веб-версии сайта.

Open Graph (Facebook, Pinterest, Вконтакте, Одноклассники)

Open Graph — разработанная Facebook разметка, позволяющая настраивать превью страницы, ссылка на которую размещена в социальной сети. Open Graph поддерживают социальные сети вроде Вконтакте, Одноклассники, Google+, Twitter и LinkedIn. Как основную используют Facebook и Pinterest.

«Летние программы Intel»

1 июля – 26 августа, Онлайн, Беcплатно

tproger.ru

События и курсы на tproger.ru

Стандартный сниппет выглядит так:

Facebook поддерживает дополнительные метатеги для изображений и видео.

Для Pinterest в указывается имя автора или название сайта, но это противоречит требованиям Open Graph на Facebook. Для программистов создано интересное решение. В противном случае используйте более выгодный вариант или разметку Schema вместе с Open Graph.

Чтобы запретить пользователям пинить свой контент, используйте следующий код:

Стандартные метатеги (Twitter)

Twitter поддерживает некоторые элементы Open Graph, но в основном использует стандартные метатеги для определения расшаренного контента. Проверить описание, или карту, как называет его Twitter, можно с помощью валидатора карт.

Вот пример описания:

Примечание — ссылка на аккаунт сайта в Twitter, — ссылка на аккаунт автора.

Schema (Google+ и Pinterest)

Разметка Schema — продукт совместной работы крупнейших поисковых систем, преимущественно используемый в Google+. В Pinterest Schema поддерживается как альтернатива Open Graph, но не в полной мере: рекомендуется использовать обе. Разметка Schema громоздкая и менее привлекательная, чем Open Graph, но её словарь описания связанного контента богаче.

Вот сниппет для Google+:

Google+ использует Open Graph как резервную разметку, у Pinterest используются дополнительные метатеги Schema, поэтому разумно использовать все три описанные разметки.

Результаты тестирования

Чтобы показать вам, как работают методы, которые описаны в статье, я создал тестовый блог. На блоге сделал несколько постов с 3-мя изображениями в каждом, добавил кнопки «Мне нравится». Протестировал работу кнопок до Open Graph и после.

Тест №1. Результат работы кнопки «Мне нравится» на блоге без тегов Open Graph и плагина All in One SEO Pack.

Тест №2. Результат работы кнопки «Мне нравится» на блоге после установки плагина Facebook Open Graph Meta.

Тест №3. Результат работы кнопки «Мне нравится» на блоге после настройки тегов Open Graph вручную.

Результаты говорят сами за себя. Желаю успешной настройки тегов Open Graph Facebook на вашем блоге. Применяйте шаринг профессионально и по максимуму.

Как внедрить OG на сайт?

Информация для соцсетей передается с помощью специальных тегов ОпенГраф. Они же, в свою очередь, прописываются в блоках html и head.

В теге html объявляем то, что на странице мы используем словарь OG.

Остальное прописываем в head. Вот основные мета теги Open Graph:

og:title – аналог обычного title, заголовок страницы или другого объекта, он же текст ссылки;
og:description – как и стандарный description, описание материала, которое будет выводиться под заголовком;
og:type – типы объектов, это может быть статья, видео или аудио трек;
og:image – ссылка на иллюстрацию материала;
og:url – собственно сама ссылка на материал.

Далее примеры как прописать теги OG.

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

Вариантов значений тега type достаточно много. Для разных видов контента они свои. Кроме того, с этим связаны атрибуты в теге html. Подробное описание содержится в документации Фейсбук для разработчиков

или на сайте Open Graph.

Для каждой соцсети существуют отдельные теги. Особенно много специализированных тегов у Twitter. Например, у всех сетей разные требования к размерам картинок. И чтобы все это выглядело красиво можно прописать vk:image для VK, fb:image для Фейсбук, twitter:image для Твиттер. Каждая соцсеть будет брать параметры изображения из своего тега.

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

Для того чтобы запретить к индексации текстовые фрагменты, на сайте нужно использовать тег noindex

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

Многие люди совершают большую ошибку, когда заключают в этот тег ссылку. Поисковая система без проблем считывает и индексирует ссылку. В этом случае запрещён к индексации только анкор ссылки, так как это текст. Будьте внимательны.

Тег noindex прописывается в исходный код сайта. Имеет открывающий и закрывающий тег. Текст помещается между этими тегами.

Теперь подробнее:

Этот текст поисковые системы не отдадут на индексацию. А также тег noindex может выступать в роли метатега, который расположен в начале страницы и он отличается в корне. Если на странице расположен метатег noindex, в этом случае он запрещает индексирование всей страницы. При этом не только тексты, но и все что на ней находится – ссылки, картинки, баннеры, формы и так далее, всё это будет запрещено к индексации. Лучше всего для запрета индексация целых страниц использовать специальный файл robots.txt.

Как правильно ставить тег noindex

Вначале можно прочитать, что тег noindex создан исключительно для поисковых машин. То есть этот тег не является официальным тегом языка html. Именно поэтому HTML-редакторы могут показывать, что тег написан с ошибкой. Не пугайтесь, это происходит по причине того, что они просто не понимают этот тег и не считают его валидным. Но, так или иначе, его без проблем прочитают поисковые машины.

И ещё важно знать и запомнить, на тег noindex будет реагировать только поисковая система Яндекс, так как он его и создал. Поисковая система Google не реагирует на такой тег вообще.. Многие начинающие SEO-оптимизаторы допускают одну и ту же ошибку, а именно пытаются запретить к индексации ссылку с помощью этого тега

Для того чтобы скрыть ссылку от индексации нужно использовать другой тег – nofollow, об этом ниже

Многие начинающие SEO-оптимизаторы допускают одну и ту же ошибку, а именно пытаются запретить к индексации ссылку с помощью этого тега. Для того чтобы скрыть ссылку от индексации нужно использовать другой тег – nofollow, об этом ниже.

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

Как скрыть ссылки от индексации

В случае когда в тег ссылки добавить отдельный, дополнительный атрибут rel=”nofollow”, это будет означать, что ссылка не будет проиндексирована поисковым роботом. Вот пример как это выглядит в коде HTML:

Этот параметр очень важен для тех сайтов, которые не хотят делиться весом своего ресурса с другими WEB-проектами

Но также важно запомнить, что он не оставляет этот вес и у себя, по сути, он просто сгорает и не достаётся никому

Если же ссылку использовать без этого тега nofollow, то вес страницы, через эту ссылку уйдёт на другой сайт

Исходя из этого, важно понимать, что если внести этот атрибут во все ссылки, которые уходят на другие сайты, сайт потеряет в весе

Как работает этот атрибут nofollow на примере:

Конечно, если ссылка ссылается на страницу в рамках одного сайта или блога, то проставлять это свойство бесполезно и даже вредно. Это можно использовать только в тех случаях, когда стоит задача не передавать вес отдельным страницам сайта. Например, если есть продающая страница, куда должен поступать весь трафик, имеет ссылку на внутреннюю страницу, например, ответы на вопросы, то, конечно, лучше эту ссылку поместить в атрибут nofollow.

Как использовать тег noindex и nofollow одновременно

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

Но важно не забывать, что текст будет скрыт только для поисковой системы Яндекс

На этом сегодня всё, всем удачи и до новых встреч!

NOFOLLOW в ссылках

Nofollow используется как значение атрибута rel в теге <a>. И отвечает за индексацию каждой конкретной ссылки на странице.
<a href=»url» rel=»nofollow»>ссылка</a>
Атрибут rel показывает отношение данного документа к документу, на который ссылается.
В данном случае, указывая атрибуту rel значение nofollow, мы просим поисковую систему не переходить по внешней ссылке, а также подчеркиваем то, что мы не отвечаем за содержание, на которое ссылаемся.
По ссылкам, оформленным с данным значением, не передается авторитет нашей страницы, другими словами не передается тИЦ и Page Rank. Однако стоит также учитывать и то, что в случае с PR вес все же уходит, но не на сайт, на который мы ссылаемся, а в никуда в прямом смысле этого слова. По поводу тИЦ точной информации о том, уходит вес или остается на сайте — нет.
Остановимся подробнее на распределении и передаче веса в Google.

Итак, абсолютно не важно, сколько ссылок у вас имеют атрибут rel=»nofollow», а сколько без него. Если на странице стоит 10 ссылок, то каждая ссылка получит часть авторитета вашей страницы, и каждая из них передаст этот вес, но если в одном случае вес передастся на конкретный сайт, то в другом случае – вес просто уйдет в никуда

Давайте представим немного, как видит всемирную паутину поисковая система. Все сайты связаны между собой ссылками, абсолютно все. Первый ссылается на второй, второй на третий … тысячный на тысяча первый и миллион какой-то в итоге обязательно будет ссылаться на первый.

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

Теперь представим, что первый сайт закрыл свои ссылки атрибутом rel=»nofollow». Вес не перейдет на второй сайт, а утечет в никуда, и второй сайт не получит ту часть веса, которую должен был, не сможет передать его дальше по цепочке, и в итоге, пройдя весь цикл, Х-какой-то сайт, который должен был передать вес на первый сайт, передаст его в значительно меньшем количестве, чем мог бы. Итак, каждый раз не получая ту часть веса, которую вы самостоятельно пускаете в никуда, закрывая свои ссылки атрибутом rel=»nofollow», сайт не может передать вам ее, из чего следует, что закрывая свои ссылки, вы сами лишаете себя увеличения веса, и такого показателя, как PR.

Чтобы было проще это понять, представим, что каждая ссылка передает вес, равным единице.

Таким образом, если первый сайт не закрыл ссылку атрибутом rel=»nofollow», то в конце цикла получит больший вес от входящих ссылок, чем в случае, если исходящие ссылки будут закрыты.

Но есть ситуации, когда действительно необходимо закрывать ссылки значением nofollow. Обратимся к источникам, Яндекс и Google, что они говорят по этому поводу?
Выдержка из раздела Помощь Яндекса:

Выдержка из раздела Справка Google:

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

Также мне хотелось бы уделить внимание ещё одному моменту. Некоторые ярые борцы за закрытые ссылки ставят rel=»nofollow» не только в самих ссылках, т.е

в теге , но и везде, на что только хватает фантазии. И в теге , и

Давайте не будем выдумывать свои собственные стандарты, а обратимся к существующим, которые разрабатывает международная организация W3C.
Значение rel=»nofollow» можно использовать только в теге , и в других тегах его использовать нельзя!

Итак, мы выяснили, когда стоит пользоваться атрибутом ссылки rel=»nofollow», а когда это не целесообразно. Также мы больше не будем вставлять его никуда, кроме одного единственного тега, обозначающего ссылку

Теперь уделим внимание тегу noindex.

Разметка видео

Такую разметку следует применять на страницах, где основным элементом является видео. Для начала добавляем нужную информацию в <html>:

<html prefix="og: http://ogp.me/ns#
      video: http://ogp.me/ns/video#
      ya: http://webmaster.yandex.ru/vocabularies/">

Заметили? Появился новый указатель на словарь от Яндекса — это нужно для того, чтобы видео с сайта попало в поиск в соответствующий раздел. Теперь добавляем мета-теги:

<meta property="og:title" content="Open Graph для видео"/> 
<meta property="og:url" content="http://mysite.com/my-little-cat/"/> 
<meta property="og:video" content="http://mysite.com/video/my-little-cat/"/> 
<meta property="og:description" content="Мои маленькие котятки"/> 
<meta property="video:duration" content="327878"/>
<meta property="og:image"  content="http://mysite.com/img/my-little-cat.png"/>
<meta property="ya:ovs:upload_date" content="2013-06-05"/>
<meta property="ya:ovs:adult" content="false"/>
<meta property="og:type" content="video.other"/>
<meta property="og:video:type" content="webm"/>

Их тут очень много и некоторые необходимо разобрать подробнее:

Тег og:video указывает либо на сам файл, либо на плеер, с помощью которого он проигрывается.
Тег video:duration указывает продолжительность видео в секундах (поэтому такие большие значения).
Тег ya:ovs:adult указывает на принадлежность видео к категории “18+”. Если видео имеет такое ограничение, то пишем true, а если нет, то false.
Тег og:type показывает, к какому жанру относится это видео — кино, серия из сериала, музыкальный клип, шоу, прямая трансляция или что-то другое (как в нашем примере).
Тег og:video:type указывает на формат файла.

Как видите, разметка для видеофайла уже большая, чем для простой страницы.

Как использовать Open Graph разметку?

Причем 5 из них можно назвать обязательными, остальные (полный список можно найти на сайте разработчика) – второстепенными, но позволяющими повысить информативность превью ссылки (например, добавить контакты владельца контента, адрес и пр.).

Итак, пример куска кода с обязательными тегами (свойствами) OG выглядит так:

meta property=»og:title» content=»Здесь вы прописываете название, которое хотите видеть в превью ссылки в социальной сети«

meta property=»og:image» content=»Здесь указывается ссылка на картинку, которая будет отображаться в превью«

meta property=»og:type» content=»article»/> — этот параметр определяет тип добавляемого материала (в данном случае — статья).

meta property=»og:url» content= «Ссылка на саму веб-страницу, которая и будет добавляться в соц. сеть«

ВАЖНО. Для популярных CMS существуют даже свои плагины, позволяющие внедрить разметку Open Graph для Facebook, VK и прочих соцсетей самостоятельно, без привлечения специалистов и долгого «рытья» в коде

Это значительно облегчает интеграции OG даже для неопытных пользователей.

Аналоги Open Graph

OG не одинок в мире микроданных. Помимо него используется еще множество различных словарей микроразметки. Наиболее яркими представителями можно назвать следующие:

Как устроен мир семантической разметки

Микроформаты (Microformats.org). Этот проект можно рассматривать как набор инструментов, заточенных под определённые нужды (например, для разметки товаров используется микроформат hProduct, для кулинарных рецептов – свой hRecipe). Главная особенность Microformats – более сложное внедрение, поэтому этот словарь применяется сегодня все реже.
Schema.org – словарь, активно поддерживаемый поисковиками (создавался с целью обеспечения возможности формирования специальных сниппетов в поисковой выдаче). Главная особенность этого инструмента – гибкость, которая достигается за счет обилия свойств, которые можно описать в коде микроразметки. Всего словарь насчитывает более миллиона характеристик и свойств.
Dublin Core. Этот словарь разрабатывался с прицелом на различного рода электронные библиотеки и базы данных, и активно используется специалистами музейной сферы, библиотечного дела и пр. Он, в отличие от других, даже стандартизирован в РФ ГОСТом Р 7.0.10-2010.

И это лишь малая часть словарей, используемых сегодня для облегчения жизни владельцам сайтов, оптимизаторам и конечным пользователям. Внедрение Open graph разметки гарантированно улучшит превью ссылок Вконтакте, Skype, Facebook, Google+, Twitter, Pinterest, LinkedIn и др.

Обязательно внедряйте микроданные на сайт, чтобы ваши ссылки в соцсетях имели красивый вид с правильным изображением и актуальным содержанием!

Alt атрибуты изображения

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

Альтернативный текст показывается посетителям, если какое-либо конкретное изображение не может быть загружено (или если отображение картинок отключено).
Атрибуты Alt обеспечивают контекст для роботов, потому что поисковые системы не могут «видеть» изображения.

На e-commerce сайтах изображения часто имеют решающее влияние на то, как посетитель взаимодействует со страницей

Поисковики так же прямо заявляют о важности этого тега

Например, Google в своих гайдах для вебмастеров пишет, что помощь поисковым системам в понимании того, что находится на картинках, и как они сочетаются с остальным контентом, помогает соотносить страницу сайта с подходящими поисковыми запросами.

Даже Мюллер писал у себя в Твиттере, что продуманное альтернативное описание изображения необычайно важно, если вы хотите занять высокое место в Google Картинках. Однако не забывайте о релевантности

Не только alt-текст, заголовки и подписи должны соответствовать изображению, но и сама картинка должна размещаться в тематическом контенте

Однако не забывайте о релевантности. Не только alt-текст, заголовки и подписи должны соответствовать изображению, но и сама картинка должна размещаться в тематическом контенте.

Оптимизация alt тега img для изображений

Сделайте всё возможное, чтобы оптимизировать свои самые важные изображения (картинки товаров, инфографику, инструкции), которые могут получить хорошие позиции в поиске Google Images.
Добавьте alt-текст на страницах, где не так много другого контента (кроме картинок).
Делайте тег alt для изображений понятным и достаточно информативным, разумно используйте ключевые слова и убедитесь, что они естественным образом вписываются в содержание страниц.

Внедрение протокола Open Graph в Joomla 3

Как всегда самым простым вариантом в решение данной, если можно так сказать, проблемы будет использование специальных плагинов (Easy Open Graph, Phoca Open Graph, Open Graph Tags, Global Open Graph). Но если честно ни один из множества плагинов, которые я тестировал, меня не впечатлили, поэтому я решил делать все самостоятельно, чего и Вам советую.

Как добавить данные в блок head документа Joomla 3? В этом нам поможет стандартный класс JDocument, при помощи которого мы сможем внедрить в блок head документа все что угодно. Чтобы не ходить вокруг да около, давайте сразу рассмотрим код, который необходимо добавить в файл отвечающий макет статьи /components/com_content/views/article/tmpl/default.php, но предварительно я советую вам создать переопределение (скопировать данный файл в папку /templates/имя_шаблона/html/com_content/article). Более подробная информация об этом содержится в статье «Переопределение в Joomla 3».

//Протокол Open Graph
$document =& JFactory :: getDocument();
if($this->item->metadesc == "") {$desc = strip_tags($this->item->introtext);} else {$desc = $this->item->metadesc;} //Описание публикации
$document -> addCustomTag( '
<meta property="og:title" content="'.$this -> escape($this -> item -> title).'" />
<meta property="og:description" content="'.$desc.'" />
<meta property="og:type" content="article" />
<meta property="og:url" content="'.JURI :: current().'" />
<meta property="og:image" content="http://joom4all.ru/'.$images -> image_fulltext.'" />
<meta property="article:published_time" content="'.$this->item->created.'" />
<meta property="article:modified_time" content="'.$this->item->modified.'" />
<meta property="fb:app_id" content="140756266603425" />
');

Код не сложный, изначально мы объявляем, что будем использовать класс JDocument, а затем при помощи метода addCustomTag мы можем добавлять что угодно в секцию head документа, в нашем случае это будут метатеги Open Graph.

Хочу обратить отдельное внимание на то, как формируется описание публикации, тут мы при помощи определенного условия проверяем наличие текста в метатеге description , если его нет, тогда в качестве краткого описания страницы будет использован вступительный текст материала. За это отвечает следующая строчка кода:

if($this->item->metadesc == "") {$desc = strip_tags($this->item->introtext);} else {$desc = $this->item->metadesc;} //Описание публикации

Массивы

Если тег может иметь несколько значений, просто поставьте несколько таких тегов <meta> на вашей странице. Приоритет тегам отдается с верху вниз, при возникновении конфликтов.

Код:

<meta property="og:image" content="http://example.com/rock.jpg" /><meta property="og:image" content="http://example.com/rock2.jpg" />

Пишите структурированные свойства тегов после того, как вы объявите родительский тег. Когда один из родительских элементов обрабатывается, его структурированные свойства выполняются последовательно.

Пример:

Код:

<meta property="og:image" content="http://example.com/rock.jpg" /><meta property="og:image:width" content="300" /><meta property="og:image:height" content="300" /><meta property="og:image" content="http://example.com/rock2.jpg" /><meta property="og:image" content="http://example.com/rock3.jpg" /><meta property="og:image:height" content="1000" />

На приведенном примере 3 изображения, отображаться они будут так: первое изображение имеет размер 300x300px, второе изображением не имеет указанных размеров и третье изображением имеет размеры 1000px в высоту.

Стандартная разметка сайта

В самом начале мы должны указать, что используем Open Graph, для чего в тег <html> добавляем следующий код:

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

Итак, вот такой минимальный код разметки Open Graph нужен на сайте, чтобы основные социальные сети могли сделать красивый блок:

<meta property="og:type" content="website">
<meta property="og:site_name" content="Название сайта">
<meta property="og:title" content="Заголовок">
<meta property="og:description" content="Описание страницы">
<meta property="og:url" content="http://mysite.com/post">
<meta property="og:locale" content="ru_RU">
<meta property="og:image" content="http://mysite.com/thumbnail.jpg">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">

Код достаточно простой и понятный. Здесь уже появились и опциональные мета-теги для изображения — указания размера изображения (про размеры изображений поговорим чуть позже).

Теперь немного тонкости по мета-тегу og:type. Этот тип указывает, что это вообще за страница — если это главная страница сайта или его раздел, то его тип можно указать как website. А вот если это уже отдельная страница (статья) на сайте, то необходимо типом указать article:

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

Но при этом у нас должно измениться содержание тега <html>:

<html prefix="og: http://ogp.me/ns#
      fb: http://ogp.me/ns/fb#
      article: http://ogp.me/ns/article#">

Замечу тут же и сразу, что мета-тег og:type связан со значениями атрибутов в теге html, поэтому здесь необходима внимательность. Значений для og:type очень много и для тех, кому интересно ознакомиться со всеми ними подробнее, предлагаю посмотреть — там всё достаточно просто, к тому же отображена актуальная информация.

Тег og:site_name указывает название сайта. В отличии от og:title, который меняется в зависимости от названия страницы, не изменяется.

Также здесь добавлен мета-тег языка страницы og:locale — он не обязателен, но желателен.

What happens if I don’t have it?

Most social networks by default will try to make their best effort in creating a preview of your content. This more often than not doesn’t go so well.

Take for instance my website colbyfayock.com.

Example of a simple Twitter Card

It correctly grabs the title of my page and the description, but it’s not the most enticing looking tweet in a feed.

Contrast that to the preview of a single post and we see a different story.

Example of a Twitter Card with a large image

So what happens if you don’t have open graph tags? Nothing bad will happen, but you won’t be taking advantage of some of the features that help make your content stand out next to the loads of other content getting posted on the internet.

Structured Properties

Some properties can have extra metadata attached to them.
These are specified in the same way as other metadata with and
, but the will have extra .

The property has some optional structured properties:

— Identical to .
— An alternate url to use if the webpage requires
HTTPS.
— A MIME type for this image.
— The number of pixels wide.
— The number of pixels high.
— A description of what is in the image (not a caption). If the page specifies an og:image it should specify .

A full image example:

The tag has the identical tags as . Here is an example:

The tag only has the first 3 properties available
(since size doesn’t make sense for sound):

Мета-теги для картинок сайта:

Тег alt предназначен для того, чтобы быть альтернативным источником информации для тех, кто отключает показ изображений в своих броузерах. Без текста в теге alt изображение будет показано как пустое изображение. Google подтвердил, что он главным образом при поиске сосредотачивается на тексте в теге alt, пытаясь понять, что изображено на рисунке. У поисковой системы Яндекс есть поиск по картинкам, который выводится одновременно с результатами основного поиска. Название изображения — title — должно предоставить посетителю дополнительную информацию. В броузерах это название всплывает, когда вы наводите мышку на изображение. Включайте в эти теги главные ключевые слова, но делайте их разными.

alt="описание картинки"
title="всплывающее описание картинки"

код картинки дожен выглядеть следующим образом:
<img src="ссылка на картинку" alt="описание картинки" title="всплывающее описание картинки">