Что такое Open Graph? Вы должны знать эту функцию веб-разработки!
Open Graph - это интернет-протокол, созданный компанией Facebook для стандартизации отображения метаданных в социальных сетях.
Какие преимущества это дает?
Open Graph дает преимущества при отображении сайта в социальных сетях. Open Graph делает наши посты более заметными в социальных сетях и лучше показывает их в поисковой выдаче.
Выше показан сайт без тегов Open Graph и то, как ссылка на него будет отображаться в социальной сети Facebook.
Теперь я покажу, как будет выглядеть моя запись в блоге, если я поделюсь или размещу ссылку в Facebook или другой социальной сети, используя протокол Open Graph.
Даже если на вашей странице нет тегов Open Graph, ничего серьезного не произойдет, но они улучшают вашу презентацию в социальных сетях.
Основы Open Graph
Мы знаем четыре основных тега, используемых в протоколе Open Graph, которые считаются обязательными. Это теги og:title, og:type, og:image и og:url.
Что представляет собой каждый элемент - показано на рисунке ниже.
Назначение отдельных меток:
og:image- отображает изображение (содержит URL-адрес изображения)og:title- обычно совпадает с <title> и отображает заголовок страницыog:description- используется для описания страницыog:url- представляет собой URL-адрес страницыog:locale- предназначен для указания языка публикации
Официально существует 17 различных тегов, которые вы можете использовать на своем сайте. Подробнее о возможных тегах можно прочитать в официальной документации.
Как добавить Open Graph на сайт?
Добавить теги Open Graph очень просто. Мы добавляем их в заголовок в метатег с нужным содержимым. Ниже приведен простой пример Open Graph для приведенного выше примера поста по следующей ссылке.
<meta property="og:title" content="Open-source software: what makes it so attractive?">
<meta property="og:description" content="You may already be familiar with the term "open source" if you have been involved in programming for some time. Open-source software has gained popularity for many reasons, some of which I will attempt to explain below.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://blog.thepatik.com/open-source-software-what-makes-it-so-attractive">
<meta name="image" property="og:image" content="https://hashnode.com/utility/r?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1682593145782%2F3f7705ec-2679-4c1c-a52d-b8d3fdeaa78d.png%3Fw%3D1200%26h%3D630%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp%26fm%3Dpng">
Заключение
Как мы уже убедились, протокол Open Graph - это простое дополнение к сайтам, улучшающее их представление в социальных сетях.
