meta property что это и как настроить карточку ссылки

meta property что это? Это атрибут HTML, который описывает данные страницы для карточки ссылки. Плохие превью в соцсетях могут снижать CTR – долю переходов по ссылке. Неправильный og:image и неверные размеры изображения нарушают отображение карточки.

Отсутствие twitter:card может помешать выбору нужного формата превью в Twitter. Настройте Open Graph и Twitter Card, подберите изображение и проверьте результат.

Элемент meta хранит метаданные страницы в HTML. В записи meta property="og:title" атрибут property называет свойство, а значение og:title обозначает заголовок карточки. Атрибут content задает текст заголовка.

Готовые примеры помогут установить разметку внутри head опубликованной страницы.

Как Facebook и Twitter формируют карточку ссылки

Facebook использует параметры страницы, чтобы собрать карточку ссылки в новостной ленте. Для обычной веб-страницы задайте тип website через свойство og:type. Карточка обычно показывает заголовок, описание, изображение и домен страницы.

Twitter также формирует карточки ссылок из мета-тегов страницы. В примере используется формат «Summary Card with Large Image».

Обе карточки содержат три базовых элемента:

• Изображение и заголовок.
• Описание страницы.
• Домен публикации.

Конкретное оформление карточки выбирает социальная сеть. Мета-теги передают данные, но не фиксируют расположение всех элементов.

Мета-теги для карточки ссылки

Facebook и Twitter считывают мета-теги из HTML-кода страницы при публикации ссылки. Эти данные определяют текст и изображение карточки.

Facebook использует протокол Open Graph. Его базовые свойства – og:title, og:type, og:image и og:url. Для описания карточки добавьте пятое свойство og:description.

Разместите теги внутри <head>…</head>, перед закрывающим тегом </head>. Не вставляйте их в видимый текст статьи. Перед изменением HTML сохраните копию файла или шаблона страницы.

Дальше описан конкретный сценарий для статического HTML-сайта. Он подходит, если страница состоит из файла HTML, который вы загружаете на хостинг самостоятельно.

1. Откройте опубликованную страницу и скопируйте ее постоянный URL. В корне сайта URL без пути обычно соответствует файлу index.html, а URL с путем /catalog/item.html – файлу с таким же путем в папке сайта.
2. В панели хостинга откройте файловый менеджер и перейдите в папку, из которой отдается сайт. Откройте файл, соответствующий пути страницы, например index.html или catalog/item.html. Если вы редактируете сайт локально, откройте этот же файл в редакторе кода.
3. Сохраните резервную копию файла на компьютере. При ошибке она вернет прежнюю разметку без восстановления отдельных строк вручную.
4. В открытом файле найдите </head>. Проверьте расположенные перед ним свойства og:, чтобы заменить их значения без создания дублей.
5. Подготовьте заголовок и краткое описание конкретной страницы. Ими замените демонстрационные тексты в атрибутах content.
6. Подготовьте изображение, которое уже размещено на вашем сайте. В медиатеке сайта откройте файл или откройте публичный файл изображения отдельно, затем скопируйте его прямой URL.
7. Откройте адрес изображения в приватном окне браузера. Картинка должна загружаться без входа в аккаунт; этот адрес вставьте в og:image.
8. Добавьте разметку перед </head> и сохраните файл в файловом менеджере. Если вы редактировали локальную копию, загрузите ее по FTP в ту же папку и замените прежний файл.

<meta property="og:title" content="European Travel Destinations">
<meta property="og:type" content="website">
<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">

Все адреса и тексты в примере замените своими. Для сайта с HTTPS укажите HTTPS-адреса страницы и изображения.

После сохранения снова откройте URL страницы в браузере. Просмотр исходного HTML должен показать добавленный блок перед </head>. Если вы загрузили файл по FTP, проверьте, что путь на хостинге совпадает с URL страницы.

Тег og:title задает заголовок карточки.

Тег og:description передает краткое описание содержания.

Тег og:image указывает адрес изображения, а og:url передает канонический адрес страницы без лишних параметров. Свойство og:type со значением website описывает обычную веб-страницу.

Обычные <title> и <meta name="description"> оставьте на месте. Open Graph задает отдельные значения для социальных карточек. Заголовки могут совпадать, если одинаково точно описывают содержание страницы.

Twitter получает ссылку на страницу из публикуемого URL. Отдельный тег twitter:url для этого набора не нужен. Свойство og:url задает канонический адрес объекта Open Graph; согласуйте его с постоянным адресом страницы.

Чтобы отменить изменения, восстановите сохраненную копию HTML или прежние значения шаблона. Затем сохраните файл и повторно откройте страницу по ее постоянному URL.

Как совмещать теги Open Graph и Twitter Card

Twitter может использовать значения Open Graph для заголовка, описания и изображения. Отдельный тег Twitter нужен прежде всего для выбора формата карточки.

К пяти свойствам Open Graph добавьте twitter:card со значением summary_large_image:

<meta property="og:title" content="European Travel Destinations">
<meta property="og:type" content="website">
<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">

Для универсального изображения берите размер 1200 на 630 пикселей. Разместите главный объект ближе к центру, оставив поля по краям. Так обрезка превью с меньшей вероятностью скроет важные детали.

Как проверить мета-теги и превью

Проверяйте отдельно исходный HTML и отображение ссылки в социальной сети. Наличие тегов в коде еще не гарантирует загрузку изображения роботом.

1. Откройте опубликованную страницу в браузере. Через контекстное меню страницы откройте просмотр исходного HTML-кода.
2. Найдите в исходнике og:title поиском по странице. Проверьте остальные свойства внутри head: они должны содержать ваши тексты и адреса.
3. Найдите og:type и twitter:card. Для приведенного примера значения должны быть website и summary_large_image.
4. Проверьте повторы каждого свойства. Если шаблон уже выводит эти теги, исправьте его настройки вместо добавления второго набора.
5. Откройте Nu HTML Checker от W3C. Передайте публичный адрес страницы в поле проверки по URL и запустите проверку HTML.
6. Исправьте ошибки синтаксиса вокруг добавленного блока, если валидатор их обнаружит. Затем повторите проверку опубликованной страницы.

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

Отображение Open Graph проверьте в редакторе новой публикации Facebook. Для этого способа потребуется вход в учетную запись.

1. Откройте Facebook в браузере и выберите создание новой записи.
2. Нажмите на текстовое поле редактора. Вставьте постоянный адрес проверяемой страницы отдельной строкой.
3. Дождитесь загрузки карточки под введенной ссылкой. Сравните заголовок с og:title, а изображение – с файлом из og:image. Если карточка показывает описание, сравните его с og:description.
4. Закройте редактор без публикации и удалите текст пробной записи. Для проверки превью отправлять запись в ленту не нужно.

Такая проверка показывает оформление ссылки именно в Facebook. Другая сеть может иначе обрезать изображение или скрывать описание.

Превью Facebook не подтверждает выбор формата twitter:card в Twitter.

Если элемент карточки неверен, исправьте соответствующий тег и повторите проверку. Если картинка отсутствует, откройте URL из og:image в приватном окне. Проверьте, что он ведет непосредственно к файлу, доступному без авторизации. Страница и изображение также должны быть доступны роботу социальной сети.

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

Идентификаторы приложения и учетной записи

Теги fb:app_id и twitter:site связывают страницу с приложением или учетной записью. Они не заменяют настройку аналитики.

Свойство fb:app_id передает идентификатор приложения Facebook. Добавляйте его, если ваша интеграция использует такое приложение. Вместо your_app_id укажите его реальный идентификатор:

<meta property="fb:app_id" content="your_app_id" />

Twitter применяет тег twitter:site, чтобы связать карточку с учетной записью сайта:

<meta name="twitter:site" content="@website-username">

Замените @website-username именем учетной записи вашего проекта. Сам тег не подключает сбор статистики переходов или показов.

Для обычного отображения заголовка, описания и изображения эти идентификаторы не нужны.

Дополнительные мета-теги для карточки

Тег og:site_name передает название сайта и помогает отделить его от заголовка конкретной страницы:

<meta property="og:site_name" content="European Travel, Inc.">

Тег twitter:image:alt добавляет текстовое описание изображения для пользователей, которые не видят картинку:

<meta name="twitter:image:alt" content="Alt text for image">

Добавляйте описание к каждому уникальному изображению. Такой текст объясняет содержание карточки без визуального контекста. Для Open Graph альтернативное описание задайте свойством og:image:alt:

<meta property="og:image:alt" content="Alt text for image">

Готовый набор мета-тегов для социальных сетей

Для обычной страницы используйте пять свойств Open Graph и twitter:card. Добавьте название сайта и альтернативные описания изображения. Идентификаторы приложения и учетной записи подключайте только для соответствующих интеграций.

<!-- Данные карточки ссылки -->

<meta property="og:title" content="European Travel Destinations">
<meta property="og:type" content="website">
<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 property="og:site_name" content="European Travel, Inc.">
<meta property="og:image:alt" content="Alt text for image">
<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">

Совет от нашей редакции: сначала настройте карточку одной страницы и проверьте ее по публичной ссылке. После удачной проверки переносите разметку в общий шаблон, подставляя уникальные значения для каждой страницы.