Open Graph Drupal: окончательное руководство по Drupal 8

1. Метаданные Drupal с метатегом и токеном
2. Как работают метаданные?
3. Основные теги Open Graph
4. Настройка метаданных в Drupal 8 с модулями Metatag и Token
5. Настройка метаданных Open Graph на Drupal: тематическое исследование
6. Метаданные Twitter

Наша коммерческая группа Artmisto.net

С июля Facebook больше не позволяет вручную настраивать предварительный просмотр ссылки. Это решение было принято в соответствии с политикой анти-фальшивых новостей, которая ведет известную социальную платформу после многих скандалов, которые преследуют калифорнийскую фирму.

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

Словом, имидж компании, желающей общаться, теряет доверие. К счастью, решения существуют.

Метаданные Drupal с метатегом и токеном

Что это?

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

Как работают метаданные?

В зависимости от типа настраиваемого веб-сайта способ реализации этих метаданных различается. Однако среди всех тегов мы выделим два основных: теги «og:», означающие Open Graph, и «twitter:» для одноименной социальной сети.

Когда ссылка включена в поле публикации Facebook. Социальная сеть будет исследовать страницу в поисках элементов, чтобы заполнить хотя бы эти три поля:

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

Сайт, который правильно настроил свои теги, будет выглядеть так:

Когда мы открываем исходный код домашней страницы сайта Telsa Motors (Drupal 7), мы видим хорошее использование метаданных. Не только для Facebook, но и для Twitter.

Можно сделать следующее замечание: тег Open Graph для описания не настроен, что вызывает автоматическое заполнение описания содержимым, найденным на странице. Мы можем видеть, что Facebook правильно управляет содержанием описания в этом случае, но может случиться так, что оно действительно пропущено, как в следующем примере, где отсутствие семантической разметки приводит к очень неточному заполнению.

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

Основные теги Open Graph

• ог: название
• ог: Тип
• OG: Изображение
• OG: URL
• OG: описание
• OG: видео
• OG: Местный
• OG: site_name

Чтобы найти набор доступных тегов Open Graph, перейдите на веб-сайт Протокол открытого графика ,

Настройка метаданных в Drupal 8 с модулями Metatag и Token

К счастью, Drupal не нужно вставлять пальцы в код для настройки этих тегов. Для их установки достаточно загрузить модуль Metatag с зависимостью Token и настроить поля сайта, которые будут привязаны к типам данных.

Настройка метаданных Open Graph на Drupal: тематическое исследование

Возьмите пример туристического сайта Sophie's Travels. Этот сайт, для общения по своим туристическим предложениям, будут публиковать в социальных сетях. Сознавая, что цена и место назначения являются основными факторами, которые побудят клиентов открыть предложение, маркетологи, работающие в Sophie's Travels, хотели бы иметь эффективную и персонализированную связь для социальных сетей.

Зная, что сайт представляет собой Drupal 8 с различными типами контента, маркетинговая команда хотела бы настроить метаданные о путешествиях только для социальных сетей. Для этого она хочет отобразить изображение, заголовок и персонализированное описание.

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

Маркетинговая команда пытается найти правильный баланс между привлекательной коммуникацией и SEO оптимизацией названия. Однако, работая наполовину название для SEO и наполовину для социальных сетей, он в конечном итоге оптимизируется ни для того, ни для другого.

Название для отображения:

Если взять пример страницы продукта поездки в Сидней, то заголовок страницы:

«Захватывающий вид на Сидней»

Коммуникационная точка зрения:

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

SEO точка зрения:

Название не оптимизировано для запросов, связанных с поездками в Сидней. Действительно, название работает так, чтобы оно было привлекательным с коммерческой точки зрения, и шансы на размещение по запросу, связанному с «дешевой поездкой в ​​Сидней», ничтожны. Выбор состоял в том, чтобы сосредоточиться на привлекательности заминки по сравнению с хорошей оптимизацией SEO.

Описание для отображения:

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

В реальных случаях описания выполняются. В идеале эти описания оптимизированы для включения ключевых слов, чтобы они попадали в глаза поисковым системам. Когда метаданные Open Graph не установлены, социальные сети отображают описание, которое является базой для поисковых систем.

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

Текущий результат:

Поскольку данные Open Graph не реализованы, Facebook использует тег заголовка для заполнения поля заголовка. Рендеринг правильный, однако в этом процессе можно пойти гораздо дальше.

В настоящее время, когда маркетологи, работающие в Sophie's Travels, общаются во время поездки в Сидней, рендеринг таков:

Дает ли это четкое представление о содержании? Эта публикация заставляет вас хотеть нажать? Можете ли вы сказать, имеет ли страница информацию о поездке в Сидней, публикации в блоге о Сиднее или даже об отеле в Сиднее?

Можем ли мы пойти дальше? Конечно!

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

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

Примечание: мы видим, что название отличается. Он построен как [название страницы] для [цена продукта] €. Это упрощенный пример того, что можно сделать, соединив метаданные Open Graph и Drupal.

Цели этого практического случая:

• Установите теги Open Graph и Twitter Cards
• Установить заголовок
• Определите описание тега Open Graph с кратким описанием статьи
• Настроить пользовательское изображение только для одного типа контента
• Используйте токены на Drupal для дальнейшей настройки тегов

Настройка экземпляра Drupal 8:

Этот экземпляр Drupal 8 будет установлен с модулями Metatag и Token.

После установки мы перейдем в раздел «модули» для их активации (/ admin / modules). Попав в раздел, посвященный настройке модулей, мы перейдем в раздел SEO и отметим:

• метатегов
• Metatag: Facebook (необязательно, интересно, если вы хотите пойти дальше, чем указано в статье)
• Метатег: открытый график
• Metatag: Twitter Cards

Затем мы найдем модуль Token и проверим его.

Наконец, мы сохраним изменения, чтобы активировать модули.

Метатег теперь активирован. Чтобы начать использовать его, просто перейдите в раздел «Конфигурация» (/ admin / config) и нажмите «Метатег».

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

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

Мы можем найти эти данные здесь:

Мы увидим новый тип контента, который появится в списке: «СОДЕРЖАНИЕ: ПРОДУКТ». Чтобы настроить метаданные Open Graph, мы нажмем «Изменить».

Мы настроим продукты метаданных Open Graph. Готовы? Нажмите!

Когда меню развернуто, мы сосредоточимся на пунктах, посвященных данным Open Graph:

Название сайта: Софи Трэвелс

Будет отображаться следующим образом: <meta property = "og: site_name" content = "Путешествия Софи" />

Тип контента: продукт

Будет отображаться как <meta property = "og: type" content = "product" />

URL: оставьте пустым

Title: [current-page: title] для [node: field_price] €

[current-page: title] позволяет вам извлекать и отображать заголовок каждой страницы. Здесь это соответствует "Захватывающему виду на Сидней"

[node: field_price] €, чтобы получить значение поля «Цена» на странице и отобразить его. После этого отображения мы отобразим знак «€». Здесь это соответствует "1200 €"

Будет отображаться как: <meta property = "og: title" content = "Захватывающий вид на Сидней за 1200 €" />

Описание: [дата: короткая] - [узел: сводка]

Будет отображаться следующим образом: <meta property = "og: description" content = "01/01/2018 - 09:35 - это сводная информация о странице назначения путешествия, которая: SYDNEY Это описание отличается от описания предназначен для поисковых систем и ставит целью вызвать любопытство читателей ". />

Как упоминалось ранее, концепция временности важна в случае этого веб-сайта в том смысле, что предложения сайта имеют ограниченную жизнь. Наличие даты перед описанием предложения позволяет поддержать это понятие временности. Затем, как и ожидалось, мы определили описание, используя сводку страницы вместо тега meta description.

Пока что мы находимся на этом уровне:

Теперь нам нужно настроить собственное изображение для страниц «Продукт»

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

Изображение: ###. Com / sites / default / files / inline-images / voyages.jpg

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

Чтобы настроить изображение, поле Изображение должно быть заполнено URL-адресом изображения.

В этом практическом случае мы определим одно изображение для всех страниц типа «продукт».

В конкретных примерах можно рассмотреть три варианта:

• Создайте тип страницы для каждой категории продуктов и определите уникальное изображение, соответствующее категории каждого продукта. Пример: изображение Сиднейского оперного театра для всех страниц с типом контента «Продукт Австралия».
• Решите отобразить основное изображение страницы, поместив: [node: field_image: entity: url] вместо URL выбранного изображения.
• Создайте пользовательское поле изображения в типе страницы «Продукт» и обратитесь к этому полю с помощью токена, созданного для этого случая. Эта опция даст редактору сайта больше гибкости в выборе пользовательских изображений для каждой страницы непосредственно из редактора контента.

Тип изображения: JPG / JPEG

Здесь мы укажем формат изображения, его можно найти, посмотрев на расширение изображения, расположенное в конце URL: «/ sites / default / files / inline-images / voyages. JPG »

Ширина изображения:

Ширина в пикселях изображения.

Высота изображения:

Высота в пикселях изображения.

Дата и время изменения содержания: [date: short]

С помощью токена [date: short] указывается дата последнего изменения содержимого в формате день / месяц / год - час: минуты.

После того, как вы ввели эту информацию, сохраните изменения и проверьте код страницы на наличие информации. Также можно использовать Инструмент отладки Facebook, который будет проверять теги Open Graph и обновит кеш Facebook для проверяемого URL (если произошли изменения).

Чтобы перейти к использованию токенов, перейдите на страницу справки по токенам, доступную здесь: ###. Com / admin / help / token

Данные Open Graph теперь на месте, теперь все элементы работают:

В большинстве социальных сетей учитываются данные Open Graph, однако, поскольку в данном примере речь идет о продаже продукта, мы пойдем дальше в этом процессе, в том числе в Twitter.

Метаданные Twitter

Ведь компания "Voyages Sophie" продает поездки частным лицам. Вероятность иметь сообщество на Facebook и Twitter довольно высока, что требует рабочих метаданных и для этой социальной сети.

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

Цель состоит в том, чтобы получить рендеринг, похожий на этот:

Для этого перейдем в раздел «Карточки Twitter» в разделе «Открыть график».

Тип контента, о котором мы хотим сообщить, - это продукт, поэтому мы выберем опцию «Сводная карта с большим изображением».

Поля, которые необходимо заполнить для настройки Twitter-карт, следующие:

Твиттер-аккаунт сайта

Пример: @lesvoyagesdesophie

Название страницы для твиттер-карты:

Пример: [node: title] для [node: field_price] €

Что касается тегов Open Graph, мы будем использовать название страницы, а также цену, указанную в поле цены.

Описание:

Здесь размер описания, разрешенного Twitter, намного короче, чем у Facebook. Мы все еще настроим это, включив содержание резюме. В идеальном случае у нас было бы поле для заполнения страницы написания контента, посвященного описанию Twitter.

Пример: [узел: сводка]

фото:

Как упоминалось выше для метаданных Open Graph, мы используем одно изображение для представления всех страниц. В реальном случае было бы необходимо по крайней мере настроить изображения в соответствии с категорией каждого продукта или, в лучшем случае, персонализированное изображение для каждого продукта с помощью [node: field_image: entity: url].

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

Пример: ###. Com / uploads / 2014/10 / trips-iles1.jpg

Наконец, отправьте запрос в Twitter для проверки и проверки использования метатегов для вашего контента, просто запросите его с помощью этого инструмента: https://cards-dev.twitter.com/validator

Более подробная информация об условиях принятия от Twitter, перейти на страницу, посвященную этой теме.

Начальный результат:

Конечный результат:

Поздравляем, вы правильно установили метаданные для своего веб-сайта Drupal, теперь ваше цифровое общение упрощено и персонализировано для социальных сетей.

Вы имеете в виду проект? Свяжитесь с нами сейчас, чтобы обсудить!

Похожие

Комментарии