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

Если вы только что поделились своим веб-сайтом с кем-то еще или в социальной сети и были разочарованы тем, что ссылка не расширилась, это легко исправить, чтобы сделать ваши ссылки более привлекательными и улучшить SEO.

Он установлен с помощью метатега Open Graph

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

Это задается метатегом og:image, а также og:title и og:description. Вся эта система называется протоколом Open Graph, который поддерживает большинство социальных сетей. Вы можете прочитать больше об этом здесь.

Важная часть - это то, как вы это настроите. Это всего лишь пара метатегов:

<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/" />

Twitter распознает теги Open Graph, но также имеет свои собственные:

<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">

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