Как добавить встраивание социальных сетей на ваш сайт (метатеги Open Graph)

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

Что такое метатеги Open Graph?

Конфигурация этих встраиваний выполняется с помощью тегов <meta> , обычно в заголовке вашего сайта. Для них существует стандарт, изначально созданный в Facebook, который называется «Протокол Open Graph».

Теги всегда будут использовать следующий формат со значением «свойство», установленным на «og:», за которым следует тип тега, и значением «контента», установленным на значение любого контента на странице:

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

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

<meta property="og:image" content="https://i.imgur.com/imagelink.jpg">
<meta property="og:title" content="Website Title" />
<meta property="og:description" content="Website Description" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/" />

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

Это простой формат, но есть несколько вариантов, которые распознает большинство веб-сайтов. Вы можете найти их полный список на веб-сайте Open Graph, но здесь мы рассмотрим самые важные из них.

Twitter распознает теги OG, но стоит отметить, что у них также есть свои собственные теги, которые будут иметь приоритет.

<meta name="twitter:title" content="Website Title"> 
<meta name="twitter:description" content="Website Description"> 
<meta name="twitter:image" content="https://i.imgur.com/imagelink.jpg">

Использование метатегов OG

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

<meta property="og:title" content="Website Title" />

При желании, если ваш заголовок не выполняет свою работу, вы можете добавить расширенное описание:

<meta property="og:description" content="Website Description" />

Тег og:type также очень важен, потому что он сообщает сайтам, на какой контент вы ссылаетесь и как его следует форматировать. Он также допускает различные виды необязательных параметров в зависимости от типа. Есть несколько разных вариантов:

веб-сайт, который используется по умолчанию.
статья, представляющая новость/сообщение в блоге и имеющая необязательные параметры published_time , modified_time , author , section и tag .
профиль, который представляет пользователя и имеет параметры для first_name , last_name , username и <пол.
video.other, представляющий видео. Также есть теги для фильмов и сериалов со своими параметрами.
Различные теги, связанные с музыкой, некоторые из которых занесены в белый список на таких сайтах, как Facebook.

Для необязательных параметров необходимо добавить отдельное мета-свойство с именем параметра. Например, установка music:duration:

<meta property="music:duration" content="60" />

Вы также можете установить тег URL для обратной ссылки на ваш сайт.

<meta property="og:url" content="https://example.com/" />

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

<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

Существуют также теги og:video и og:audio, которые работают одинаково, но для видео и аудио соответственно.

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

<meta property="og:site_name" content="CloudSavvy IT" />

Отладка метатегов

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

К счастью, есть несколько отличных инструментов, таких как opengraph.xyz, где вы можете вставить свою ссылку и просмотреть ответ на вставку для различных платформ.

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

Можете ли вы генерировать теги динамически?

Конечно! Теги — это просто HTML, а большинство современных веб-фреймворков предназначены для визуализации динамического HTML. Тем не менее, это должно быть в заголовке, поэтому это может усложнить работу некоторых фреймворков, ориентированных на запись в тело страницы.

В React вы можете легко сделать это с помощью пакета под названием react-helmet, который входит в ваш основной компонент App(). Конечно, вы можете использовать стандартный синтаксис JSX для замены любых значений значениями из состояния вашей страницы.

import React from "react";
import Helmet from "react-helmet";

function App() {
  return (
    <main>
      <Helmet>
         <title>Example</title>

         <meta itemprop="name" content="Example" />
         <meta property="og:title" content="Example" />

         <meta itemprop="description" content="A description" />
         <meta name="description" content="A description" />
         <meta property="og:description" content="A description" />

         <meta itemprop="image" content="http://example.com/example.png" />
         <meta property="og:image" content="http://example.com/example.png" />

         <meta property="og:url" content="https://example.com" />
         <meta property="og:type" content="website" />
      </Helmet>
    </main>
  );
}

Для WordPress это можно настроить с помощью плагина или добавить PHP в файл header.php .

<meta name="description" content="<?php if ( is_single() ) {
        single_post_title('', true); 
    } else {
        bloginfo('name'); echo " - "; bloginfo('description');
    }
    ?>" />

Что касается других фреймворков, они, скорее всего, каким-то образом будут поддерживать метатеги, поэтому вам нужно проверить, как это работает для вашего приложения.