Я проверил каждую ссылку, превью мета-тега в каждой социальной сети и приложении для обмена сообщениями — чтобы вам не пришлось это делать! Это было очень скучно!

Первая часть серии статей о лишних тегах <head> — вы можете прочитать здесь: Убирайтесь из моего <head>.

Социальные сети вредны для вашего психического здоровья, вашей частной жизни, вашей демократии — и для производительности вашего сайта.

Загляните в исходный код большинства сайтов, посмотрите между тегами <head>, и вы, скорее всего, увидите кучу мета-тегов, подобных этому:

<!-- Meta tags generated by metatags.io -->
<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate">
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">

<meta property="og:type" content="website">
<meta property="og:url" content="https://metatags.io/">
<meta property="og:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="og:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="og:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">

<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://metatags.io/">
<meta property="twitter:title" content="Meta Tags — Preview, Edit and Generate"><meta property="twitter:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="twitter:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">

Вход в полноэкранный режим Выйти из полноэкранного режима

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

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

Вот пример отображения предварительного просмотра ссылки в iMessage:

Содержание

Как создавать предварительные просмотры ссылок
Какие метатеги работают в каких приложениях?
Теги открытого графа — явный победитель
Что делать, если я не хочу, чтобы метатеги Facebook или Twitter загрязняли мой прекрасный сайт?
Зачем я это сделал?

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

Существует четыре популярные системы для создания предварительного просмотра ссылок:

Facebook open graph.
Twitter карты.
oEmbed
schema.org

Эти системы также имеют более одного способа реализации. (См. таблицу ниже)

Все эти системы предполагают размещение фрагментов кода между тегами <head> вашей страницы.

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

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

Вы можете просто не иметь ни одного из этих тегов — это прекрасно.

Но если предположить, что вы хотите, чтобы на вашем сайте отображались предварительные просмотры ссылок — какова наиболее эффективная комбинация этих тегов?

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

Какие метатеги работают в каких приложениях?

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

Теги открытого графа — явный победитель

Я надеялся, что один из методов с открытым исходным кодом — schema.org или oEmbed хорошо работает на достаточном количестве приложений, чтобы я мог их рекомендовать.

Но, похоже, явный победитель — теги Open Graph от Facebook.

Вот тот же пример с сайта metatags.io без лишних тегов. Его размер увеличился с 1,335 кБ до 729 байт.

<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">

<meta property="og:type" content="website">
<meta property="og:url" content="https://metatags.io/">
<meta property="og:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="og:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="og:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">

Вход в полноэкранный режим Выход из полноэкранного режима

Что делать, если я не хочу, чтобы метатеги Facebook или Twitter загрязняли мой прекрасный сайт?

Facebook и Twitter, по сути, являются злом, поэтому вполне понятно, если вы не хотите использовать их теги.

Вы можете просто использовать тег meta description, и научиться жить с отсутствием изображений в предварительных просмотрах ссылок на вашем сайте…

<title>Get out of my &lt;head&gt;</title>
<meta name="description" content="An incredible website for testing meta tags">

Вход в полноэкранный режим Выход из полноэкранного режима

…или вы можете использовать комбинацию meta description, Schema.org microdata и oEmbed JSON — комбинацию, которая будет работать на наибольшем количестве приложений без использования проприетарных тегов.

<head lang="en" itemscope itemtype="https://schema.org/WebPage">
    <title>Link Preview Test | Title Tag</title>

    <meta name="description" content="Test Description | Meta Description — This description came from the meta description tag"/>

    <meta itemprop="name" content="Test Title | Schema.org Microdata Title"/>
    <meta itemprop="description" content="Test Description | Schema.org Microdata — This description came from Microdata using Schema.org Schema"/>
    <meta itemprop="image" content="/previews/microdata.png"/>

    <link rel="alternate" type="application/json+oembed" href="https://getoutofmyhead.dev/oembed_link.json" title="Test Title | oEmbed JSON Title Attribute"/>
</head>

Вход в полноэкранный режим Выход из полноэкранного режима

Зачем я это сделал?

Я создаю сайт missingdice.com со строгим ограничением размера страницы в 12 кБ — экономия данных стала для меня навязчивой идеей, как и выяснение того, какие теги <meta> действительно полезны.

Я собрал свои исследования в серию статей, которые будут опубликованы на getoutofmyhead.dev.

Дайте мне знать, если вам интересно узнать больше, или если вы считаете это полезным!