Сейчас почти любой сайт предлагает посетителям возможность делиться своими страницами через социальные сети. Вездесущие иконки Facebook, ВКонтакте, Одноклассников и Twitter так и просятся, чтобы по ним нажали. Нет ничего удивительного в том, что обмен ссылками через социальные сети является одним из наиболее эффективных способов привлечения качественного трафика на сайт.
Но для привлечения внимания пользователей нужны качественные превью, по которым хотелось бы кликнуть. Автоматически генерировать такие превью можно с помощью специальных <meta> тегов для социальных сетей. Раз уж Facebook и Twitter являются наиболее популярными соцсетями, сосредоточимся на них.
Делимся через Facebook и Twitter
Соцсеть Facebook предлагает разработчикам различные варианты кастомизации превью веб-страниц в ленте в зависимости от контента сайта. Если не указано иное, при создании превью страниц любого веб-сайта по умолчанию используется вариант типа Website. От этого варианта мы и будем отталкиваться далее.
Допустим, что кто-то поделился ссылкой на главную страницу вымышленной туркомпании, Facebook будет отображать ее следующим образом:
Карточка-превью в Facebook
Соцсеть Twitter также предлагает несколько способов форматирования превью веб-страниц, которыми делятся пользователи. Мы рассмотрим вариант, который очень похож на приведенный выше пример в Facebook. В Twitter это называется Summary Card with Large Image:
Карточка-превью в Twitter
Как вы можете видеть, на обеих карточках-превью имеется несколько стандартных атрибутов:
• Заметное изображение и название
• Описание
• Доменное имя
Проприетарные <meta> теги
Каким образом можно устанавливать эти атрибуты? С помощью <meta> тегов. Когда пользователь делится ссылкой, как Facebook, так и Twitter сканирует соответствующую веб-страницу и считывает свои <meta> теги, чтобы отобразить соответствующую информацию.
Facebook использует <meta> теги посредством протокола Open Graph. Это система классификации веб-страниц, которая выходит за рамки <meta> тегов, которые уже определены в HTML5. Полный список доступных <meta> тегов можно найти на веб-сайте Open Graph. Их так много, что перспектива сделать выбор в пользу одного или нескольких тегов может показаться несколько устрашающей, но на самом деле требуются только четыре из них:
<meta property="og:title" content="European Travel Destinations"> <meta property="og:description" content="Offering tour packages for individuals or groups."> <meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"> <meta property="og:url" content="http://euro-travel-example.com/index.htm">
У Twitter имеются свои собственные <meta> теги, которые похожи на теги протокола Open Graph, но использует префикс "twitter" вместо "og". Как и в случае Facebook, на самом деле полезными будут лишь немногие из них. Тип формата отображения в Twitter можно задать с помощью следующих тегов:
<meta name="twitter:title" content="European Travel Destinations "> <meta name="twitter:description" content=" Offering tour packages for individuals or groups."> <meta name="twitter:image" content=" http://euro-travel-example.com/thumbnail.jpg"> <meta name="twitter:card" content="summary_large_image">
Как Facebook, так и Twitter предлагают рекомендации относительно того, каким образом следует использовать приведенные выше <meta> теги. Данные рекомендации очень похожи, при этом они могут быть до некоторой степени субъективны в интерпретации. Обратите внимание на то, что в случае рекомендаций Facebook при использовании термина "объект" имеются в виду веб-страницы, которыми делятся пользователи:
|
|
|
|
|
Название |
Тайтл, заголовок или название объекта. |
Краткое название соответствующей единицы контента. [Максимум 70 символов.] |
|
Описание |
Краткое описание или резюме объекта. [От 2 до 4 предложений.] |
Описание, которое кратко резюмирует содержание для презентации в твите. Вы не должны повторно использовать название в качестве описания или использовать это поле для описания основных услуг, предоставляемых веб-сайтом. [Максимум 200 символов.] |
|
Изображение |
URL изображения для вашего объекта. Разрешение картинки должно находиться в диапазоне от 600x315 пикселей и выше. Предпочтительнее разрешение 1200x630 пикселей или выше. Вес картинки не должен превышать 5 мегабайт. Старайтесь сохранять соотношение сторон близким к 1.91:1, чтобы избежать обрезки. |
URL-адрес, ведущий к уникальному изображению, представляющему содержимое страницы. Вы не должны использовать универсальные изображения вроде логотипа вашего веб-сайта, фото автора или иных подобных изображений, которое присутствуют сразу на нескольких страницах вашего сайта. Изображения для этой карточки должны иметь ширину по меньшей мере 280 пикселей и высоту по меньшей мере 150 пикселей. Вес изображения не должен превышать 1 мегабайт. |
|
URL |
Канонический URL для вашей страницы. Это должен быть недекорированный URL, без переменных сеанса, параметров идентификации пользователя или счетчиков. |
|
Раз уж эти проприетарные <meta> теги по сути ссылаются на те же элементы, было бы идеально, если бы каким-то способом можно было бы их совместить. К счастью, такой способ есть.
Совмещение <meta> тегов
Нет ничего плохого в наличии нескольких <meta> тегов, которые кажутся избыточными. Лишняя информация никогда не повредит – на первый взгляд избыточные данные разве что увеличат вес HTML-файла на несколько дополнительных байтов.
Но для наших целей и для краткости, мы можем использовать тот факт, что Twitter позволяет заменить свои собственные <meta> теги тегами Open Graph. В конечном итоге из всех проприетарных <meta> тегов Twitter заменить альтернативным нельзя только тот, который касается формата отображения. Таким образом, мы получаем следующий минимальный набор <meta> тегов, с помощью которых можно оптимизировать превью веб-страниц в социальных сетях, которым делятся пользователи:
<meta property="og:title" content="European Travel Destinations"> <meta property="og:description" content="Offering tour packages for individuals or groups."> <meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"> <meta property="og:url" content="http://euro-travel-example.com/index.htm"> <meta name="twitter:card" content="summary_large_image">
Что касается совмещения руководящих принципов по формату изображения, тут все предельно просто: нужно следовать рекомендациям Facebook по минимальному разрешению (1200x630 пикселей) и соотношению сторон (1.91:1), а также при этом одновременно придерживаться требований к размеру файла в Twitter (менее 1 мегабайта).
Валидация <meta> тегов
Если у вас есть какие-либо сомнения по поводу допустимости объединения этих пяти тегов, мы можем использовать полезные инструменты под названием Facebook Sharing Debugger и Twitter Card Validator. Оба инструмента могут проанализировать на предмет наличия релевантных <meta> тегов любую веб-страницу, размещенную на общедоступном сервере. Они также могут показать, как страница будет выглядеть в соцсети после того, как ссылкой на нее поделится тот или иной пользователь. Кроме того, эти инструменты способны обнаружить и все ошибки и внести предложения по их устранению. Так каким будет результат в нашем случае? У Twitter претензий не возникло, но Facebook все же выдал одно предупреждение:
Предупреждение Facebook
Это подводит нас к следующему пункту...
Социальная аналитика
Предупреждение Facebook указывает на то, что если мы собираемся использовать их фирменный аналитический инструментарий (который называется Domain Insights), необходимо предоставить уникальный идентификационный номер, ассоциируемый с вашей учетной записью. Соответствующий <meta> тег будет выглядеть примерно так:
<meta property="fb:app_id" content="your_app_id" />
У Twitter тоже есть нечто подобное. Этот инструмент называется Twitter Card Analytics. Для того чтобы получить от него максимальную отдачу, Twitter рекомендует использовать следующий <meta> тег (он содержит имя пользователя Twitter, ассоциируемое с веб-страницами, которыми делятся посетители):
<meta name="twitter:site" content="@website-username">
Однако имейте в виду, что если у вас нет особой нужды в использовании этих аналитических инструментов, то прописывание двух вышеупомянутых <meta> тегов можно опустить за ненадобностью. Это не будет оказывать никакого влияния на то, как именно в лентах Facebook и Twitter отображаются карточки страниц вашего сайта, которыми делятся пользователи.
Что-нибудь еще?
В документации Facebook содержится рекомендация относительно использования одного дополнительного <meta> тега, хотя это и не обязательно. Этот <meta> тег прописывает название веб-сайта, содержащего страницу, которой делится пользователь через соцсеть:
<meta name="og:site_name" content="European Travel, Inc.">
В документации Twitter также содержится предложение относительно еще одного <meta> тега, использовать который рекомендуется, но это совсем не обязательно:
<meta name="twitter:image:alt" content="Alt text for image">
Этот тег обеспечивает альтернативное описание изображения для людей с ослабленным зрением.
Заключительная разметка
В общем-то, и все. Повторим еще раз, что при просмотре документации от Facebook и Twitter по поводу карточек веб-страниц, которыми делятся пользователи, можно заметить много других доступных для использования <meta> тегов, которые могут применяться для определения различных типов контента. Но, в общем и целом нижеследующего кода должно вполне хватить:
<!-- Основные META теги (PR-CY.RU) --> <meta property="og:title" content="European Travel Destinations"> <meta property="og:description" content="Offering tour packages for individuals or groups."> <meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"> <meta property="og:url" content="http://euro-travel-example.com/index.htm"> <meta name="twitter:card" content="summary_large_image"> <!-- Пожеланию --> <meta name="og:site_name" content="European Travel, Inc."> <meta name="twitter:image:alt" content="Alt text for image"> <!-- Для аналитики --> <meta property="fb:app_id" content="your_app_id" /> <meta name="twitter:site" content="@website-username">
