Что такое открытый график?

  1. Пример метатегов Open Graph
  2. Как добавить метатеги Open Graph
  3. Обзор мета-тегов Open Graph
  4. Как проверить интеграцию Open Graph вашего сайта

Обновлено: 13.11.2008 от Computer Hope Обновлено: 13

Open Graph - это технология, впервые представленная Facebook в 2010 это позволяет интеграцию между Facebook и его пользовательскими данными и веб-сайтом. Интегрируя метатеги Open Graph в содержимое вашей страницы, вы можете определить, какие элементы вашей страницы вы хотите показать, когда кто-то предоставит доступ к вашей странице.

Например, вы можете использовать тег og: image, чтобы указать, какое изображение вы хотите, чтобы Facebook использовал при публикации вашей страницы. Указывая информацию Open Graph, Facebook не нужно угадывать, какую информацию использовать, когда ваша страница публикуется.

Пример метатегов Open Graph

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

&lt;meta property = "og: title" content = "Что такое Open Graph?" /> <meta property = "og: description" content = "Определение в компьютерном словаре того, что означает Open Graph, включая связанные ссылки, информацию и термины. "/> <meta property =" og: type "content =" article "/> <meta property =" og: image "content =" https://www.computerhope.com/comp/logos/facebook.gif "/ >

Как добавить метатеги Open Graph

Как и другие метатеги, теги Open Graph должны находиться в голова HTML-страницы. Если вы измените HTML самостоятельно, эти теги могут быть добавлены с использованием любого Редактор HTML , Если вы используете CMS лайк WordPress , вы можете изменить шаблон или использовать плагин, как Yoast управлять этими тегами.

Обзор мета-тегов Open Graph

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

og: title - заголовок страницы

og: image - изображение, которое вы хотите использовать при публикации страницы. Использование свойства og: image полезно, если на вашей странице есть несколько изображений, и вы хотите использовать определенное изображение.

Заметка

Facebook не использует изображения размером менее 300 пикселей и высотой 200 пикселей.

og: description - описание страницы.

og: type - тип объекта или страницы, которую вы описываете. Некоторые из типов, которые могут быть использованы, включают статью, music.album, video.movie и веб-сайт.

og: url - канонический URL-адрес объекта или страницы.

og: locale - расположение информации. По умолчанию значение локали - en_US и не требуется, если только язык не является английским или находится за пределами США.

Как проверить интеграцию Open Graph вашего сайта

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

facebook , Интернет условия , SEO условия , Условия веб-дизайна

Lt;meta property = "og: title" content = "Что такое Open Graph?