Drupal 8 — модуль Metatag

• 4 апреля 2019

В какой-то момент времени я задумался над оптимизацией поисковой выдачи для сайта. Яндекс вебмастер настойчиво напоминал о том, что у меня на сайте нет метатегов Description. Вот хлебом не корми — дай Description.

Решить проблему с отсутствием метатегов поможет модуль Metatag. Этот модуль автоматически подставляет метаданные на странички сайта, что улучшает отображение контента в результатах поисковой выдачи. Кроме того, модуль позволяет вставлять специальные метатеги для социальных сетей. Конечно, ему нужно будет в этом помочь грамотными настройками, — обязательно настроим. Модуль использует tokens.

https://www.drupal.org/project/metatag

Устанавливаем модуль

Устанавливаем и включаем модуль Metatag.

Вместе с модулем Metatag у нас появляются дополнительные модули:

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

Пока я их трогать не буду, разберёмся со стандартным функционалом. Переходим в конфигурацию модуля Metatag.

/admin/config/search/metatag

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

Глобальный

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

Указываем глобальные настройки:

• Заголовок страницы:
  [current-page:title] | [site:name]
• Описание:
  [site:name]
• Канонический URL:
  [current-page:url]

В разделе редактирования есть ссылочка — «Просмотр доступных токенов». Можно ткнуть и узнать какие токены можно использовать в данном разделе.

Итак, мы указали, что на всех страницах сайта (если их охватывает модуль Metatag) будет title «[current-page:title] | [site:name]». Результат будет примерно такой:

<meta name="title" content="Маркировка SSD накопителей | internet-lab. ru" />
<link rel="canonical" href="http://internet-lab.ru/ssd_types" />
<meta name="description" content="internet-lab.ru" />

Главная страница

А вот на главной странице title отобразится как:

<meta name="title" content=" | internet-lab.ru" />

Вертикальная черта нам не нужна. Настраиваем раздел «Главная страница» и переопределяем метатеги:

Указываем настройки главной страницы:

• Заголовок страницы:
  [site:name]
• Канонический URL:
  [site:url]
• Короткая ссылка:
  [site:url]

Заметили что нет описания (description)? Оно возьмётся из блока «Глобальный». Вот что выходит теперь на главной странице:

<meta name="title" content="internet-lab.ru" />
<link rel="shortlink" href="http://internet-lab.ru/" />
<link rel="canonical" href="http://internet-lab.ru/" />
<meta name="description" content="internet-lab.ru" />

Содержимое

На страницах статей в метатеге description хочется чего-то более основательного, нежели URL сайта. Редактируем «Содержимое».

Указываем настройки содержимого:

• Заголовок страницы:
  [node:title] | [site:name]
• Канонический URL:
  [node:url]
• Описание:
  [node:summary] | [site:name]
• Ключевые слова:
  [node:field_tags]

Очень удачно теги статьи впишутся в keywords. «[node:summary]» — это анонс статьи, но он не везде есть, поэтому к нему добавляю «| [site:name]», уж название сайта всегда есть. А то Яндекс вебмастер будет ругаться на такие статьи. Вот что получается в статье:

<meta name="title" content="Маркировка SSD накопителей | internet-lab.ru" />
<link rel="canonical" href="http://internet-lab.ru/ssd_types" />
<meta name="description" content="Принято разделять основные типы SSD накопителей по объёму данных, который хранится в ячейке накопителя: SLC, MLC, TLC, QLC. Встречаются разделения и среди дисков с равным объёмом данных в ячейке. | internet-lab.ru" />
<meta name="keywords" content="HP, hardware" />

Пользователь

Настройки юзера я оставил по умолчанию.

• Канонический URL:
  [user:url]
• Заголовок страницы:
  [user:display-name] | [site:name]

Термин таксономии

Настраиваем метатеги для странички тега.

• Канонический URL:
  [term:url]
• Заголовок страницы:
  [term:name] | [site:name]
• Описание:
  [term:name]

Страница 403 и 404

Эти настройки я тоже оставил по умолчанию.

• Канонический URL:
  [site:url]
• Короткая ссылка:
  [site:url]

Вот и всё. Через месяц Яндекс вебмастер подскажет какие страницы остались без description, но основное мы настроили.

Теги

• drupal

Модуль Metatag Drupal 7

Если вы занимаетесь оптимизацией сайтов, то работаете с настройкой мета-описаний ключевых страниц. В Drupal вам с этой работой поможет модуль — metatag. https://www.drupal.org/project/metatag. Далее о том как настроить и работать с ним.

Установка данного модуля — это типичный процесс — нужно скопировать модуль в папку с прочими модулями, обычно это sites/all/modules, что зависит от вашей конструкции сайта на drupal. После этого, на странице администрирования модулей мы обнаружим огромный список новых модулей, которые входят в комплект metatag. В версии 7.x — 11 , актуальной на момент написания статьи — это целых 17 модулей.

Давайте разберемся с некоторыми из них.

Metatag — базовый модуль

Если вам нужно установить базовые теги, такие как — description, keywords, abstract, origianal-source, rights; ссылки — canonical link, shortlink, publisher, author link; флаги для поисковых роботов, метки для Google news, и ещё кучу всего, то достаточно установить только этот модуль.

Общие настройки находятся вот тут:

• admin/config/search/metatags — настройка мета по умолчанию для разных объектов сайта.
• admin/config/search/metatags/settings — предоставляет управление выводом метатегов в разных типах публикаций, словарях и т.
  п., настройки связанные с другими установленными в drupal модулями, управление кешированием и много другое.

Частные настройки производятся в редакторе конечных объектов сайта. Например, если вы разрешили работу с метатегами для публикаций типа «обычный раздел», то в редакторе статьи данного типа появится вкладка «Meta Tags».

Если вы используете таксономию, то похожие настройки появятся в и терминах.

Metatag Importer — импорт данных из других модулей

Это модуль позволяет скопировать данные из других модулей, например из весьма популярного Nodewords. Удобно, если вы раньше пользовались другими модулями и решили перейти на Metatag.

Importer нужно активировать только на момент экспорта, затем его можно отключить.

Его админ панель тут — admin/config/search/metatags/importer.

---

Остальные модули можно разделить на две категории:

• Дополнительные мета-теги;
• Взаимодействие/интеграция с иными модулями.

Дополнительные мета-теги.

Metatag: App Links — метаданные app links.

Добавляет к базовым мета-тегам дополнительный набор тегов для мобильных устройств — несколько десятков новых мета-полей: al:ios:url,  al:ios:app_store_id, al:ios:app_name, al:iphone:url, al:android:url, al:android:package, al:windows_phone:url и т.д. Эти теги позволяют связать веб страницу с приложением в магазине-приложений (соответствующие теги для каждого из типов устройств).

Описание тегов можно прочитать вот тут: applinks.org/documentation

Metatag: Dublin Core, Metatag: Dublin Core Advanced — набор полей, одобренных DCMI.

Что это за Dublin Core Metadata Initiative (DCMI)? Читайте на их сайте.

Два модуля добавят в настройки публикаций, терминов и т.д. более полусотни полей для настройки мета-описаний. Они не пересекаются с базовыми тегами, не смотря на схожесть названий меток. Их мета-имена начинаются с префикса «dcterms» — dcterms.subject, dcterms.publisher и т.

п.

Metatag: Facebook — интеграция с Facebook API.

Пара мета полей для настройки и администрирования виджетов приложений cоц. сети Facebook.

Metatag: Twitter Cards — интеграция с твиттер.

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

Metatag: Google+ : взаимодейцствие с Google+

Добавление мета-описаний страницы для соц.сети Google+.

Metatag: Verification — теги для подтверждения собственности.

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

В рассматриваемой версии поддерживаются 4 провайдера — Google, Pinterest, Bing  и Yandex.

Настройки тегов можно найти вот тут: admin/config/search/metatags/config/global:frontpage — в глобальных настройках главной страницы.

Metatag: OpenGraph, Metatag: OpenGraph Products — мета описания Open Graph Protocol

Добавляет огромное число полей в соответствии с спецификацией Open Graph. Названия тегов идут с префиксом «og:», потому их можно использовать совместно с другими наборами и базовыми мета-описаниями.

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

Metatag: hreflang — информация о страницах на других языках.

Генерирует несколько мета-полей (по кол-ву языков включенных на вашем drupal сайте), где можно указать версии страницы на других языках. Примерно вот так:

<link rel=»alternative» href=»http://yoursite.org/english-version-of-page.html» hreflang=»en» /> <link rel=»alternative» href=»http://yoursite.org/russion-version-of-page.html» hreflang=»ru» />

<link rel=»alternative» href=»http://yoursite. org/english-version-of-page.html»    hreflang=»en» /> <link rel=»alternative» href=»http://yoursite.org/russion-version-of-page.html»    hreflang=»ru» />

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

Metatag: favicons — иконки для сайта

В Drupal вообще-то есть настройка иконки прямо в теме оформления. Но данный модуль существенно расширяет кол-во вариантов, преимущественно за счет touch иконок для устройств Apple.

Новые поля спрятаны во вкладке глобальных настроек главной страницы — admin/config/search/metatags/config/global:frontpage

Metatag: Mobile & UI Adjustments — информация для мобильных платформ

Эти мета-данные относятся ко всему сайту, потому настройки вынесены в глобальные параметры главной страницы (admin/config/search/metatags/config/global:frontpage).

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

Взаимодействие/интеграция с иными модулями.

Metatag: Context — взаимодействие с модулем context

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

Metatag: Panels, Metatag: Views — интеграция с модулем panels  и views

Metatag не мог пройти мимо этих очень популярных контент-модулей. Не хотелось бы примеривать фуражку капитана-очевидность и что то ещё об этом писать. Но как то не очень красиво, когда заголовок h4 идет без соответствующего текста.

Я не планировал описывать все модули, но как то само собой получилось 🙂

Проблемы работы Metatag

Замечал проблемы при выводе глобальных тегов для главной страницы, если в качестве главной страницы используется фиксированная публикация. Если эта проблема у вас проявляется, можете воспользоваться вот таким костылем (код для случая базовых тегов).

Других «косяков» я не замечал, рекомендую этот модуль для всех SEO-шников.

Данная запись опубликована в 29.01.2016 13:37 и размещена в drupal, SEO. Вы можете перейти в конец страницы и оставить ваш комментарий.

Внутренняя оптимизация сайта на Drupal. Модуль MetaTag.

Делая сайты на движке вы установите как минимум новую тему и почти наверняка пару модулей. Все мы хотим, что бы сайт был удобным красивым полезным. Начинающие сайтоделы даже не догадываются о том, что существуют вещи не заметные внешне, но очень важные для полноценной жизни сайта. Я говорю о СЕО. Подробнее о СЕО можно прочитать тут. Если в двух словах СЕО это то, что поможет вам получить посетителей на свой сайт с поисковых систем. Большую часть СЕО задач по внутренней оптимизации берёт на себя модуль Meta Tags. Я бы назвал его самым СЕО-модулем из всех модулей. Хочу сразу вас предупредить, если вам ничего не известно о мета тегах, то лучше прочитать сначала эту статью. В настройке Meta Tags нет ничего сложного, но если у вас нет понимания почему это делается именно так, это будут бесполезные знания.

Качаем модуль Meta Tags устанавливаем и приступаем к настройке. Хотя с настройкой я поторопился. Наш модуль не работает сам посебе. Для него нужны ещё два. CTools и Token. С модулем Token мы уже знакомы. Он помогал нам создавать правильные чистые URL. Chaos tool suite (ctools) содержит различные модули и предлагает нам набор API-интерфейсов. Не будем забивать себе голову ненужной пока информацией. Всё что нужно после установки модулей — это отметить для подключения Meta tags, а Drupal сам выберет что ему нужно.

Переходим Configuration → Search and metadata → Meta tags. Основные настройки уже сделаны но не так как нам нужно. Будем исправлять.

Для начала подправим мета теги статей. Жмём override или edit. Прежде чем продолжить хочу вас предупредить, что я не сторонник автоматического заполнения мета тегов. Конечно некоторые теги нужно оставить для заполнения друпалу, например Canonical URL. Что касается Page Title, Description, Keywords — только ручная работа. Автоматическое заполнение мета тегов подойдёт для сайтов где много пользователей создают контент и не замарачиваются о сео, или как подстраховка на случай если забудете;)

Модуль Metatags поддерживает токены. Токенами мы пользовались при создании чистых URL. Для подстановки токена кликните на поле куда его нужно вставить, затем внизу страницы кликните Browse available tokens. В появившемся списке кликаем на нужных токенах.

Page Title. Drupal уже подобрал шаблон по которому он будет генерироваться. Единственное что меня смущает в этом шаблоне — название сайта после заголовка страницы. Как известно Title должен быть уникальным. При добавлении названия сайта все заголовки страниц будут иметь одинаковую часть. На мой взгляд оптимальный вариант для авто заполнения [node:title].

Мета тег Description и его шаблон заполнения [node:summary]. Менять ничего не будем. Единственное о чём нужно помнить — поле summary может оказаться не заполненным и как следствие не заполненным будет description. Summary используется для создания тизера, если оно не заполнено тизер будет взят из основного текста, поэтому забыть о поле summary легко.

Для Keywords приемлемых вариантов не много, а в нашем случае один [node:field_tag] — в качестве ключевых слов подставляются термины словаря tag. Как и для чего создавался это словарь читайте здесь.

Для редактирования Canonical URL кликнем на Advanced. В развернувшемся блоке найдём поле с нужным названием. В моём случае токен для Canonical URL уже подобран друпалом [current-page:url:absolute]. Этот токен меня устраивает поэтому изменять ничего не буду. Кроме канонического адреса в блоке Advanced есть ещё несколько интересных пунктов, например Robots. Отмечая различные пункты в Robots вы можете закрыть от индексации всю страницу или только ссылки на ней, а можете наоборот открыть.

На этом настройку модуля MetaTags для контента можно закончить. Дальше вы можете продолжить сами. Например задать description и keywords для главной страницы — Global: Front page.
Может случиться что вы захотите настроить MetaTags для отдельного типа контента или словаря, чтобы закрыть его от индексации или по каким-то своим причинам. Нет ничего проще. Жмём Add a meta tag default. В выпадающем списке выбираем нужный тип контента или словарь.

Жмём Add_and_configure и переходим к настройке.

После завершения всех настроек проверьте результат. Сделать это просто. Перейдите на любую страницу вашего сайта и нажмите ctrl+u. Вам откроется исходный код страницы. Найдите там строку <link rel=»canonical» href=»http://здесь должен быть чистый правильный url страницы» />. Если всё в порядке переходим  Configuration → Search and metadata → url aliases находим там системный адрес нашей статьи. В моём случае это node/2. Кликаем по ссылке с системным адресом и снова жмём ctrl+u. Канонический url должен быть таким же как и в первом случае.

Canonical URL помогает нам избавится от большей части дублей в индексе поисковиков, а в месте с правильным robots. txt не оставляют дублям ни одного шанса. При этом нужно помнить что чем сильнее средство тем осторожнее нужно его применять.

Начало работы с модулем метатегов в Drupal

Drupal SEO Series с использованием метатегов

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

В этом руководстве мы покажем вам, как:

• Установить модуль метатегов
• Настроить метатеги для типа контента
• Переопределить метатеги для каждого узла
• Переопределить метатеги для страниц просмотра
• Иметь более детальные разрешения для полей метатегов
• Указать метатеги для разных фавиконов

Содержание

Начало работы 7 Этот модуль можно просто установить с помощью Composer.

Использование Composer:

 composer require drupal/metatag 

После загрузки перейдите в Расширение и установите только модуль Metatag.

После установки модуля метатегов, если вы перейдете в /admin/config/search/metatag , вы увидите главный экран конфигурации, который выглядит следующим образом:

Здесь вы можете настроить метатеги для всего вашего веб-сайта ( Global), или только для главной страницы, или для каждого типа контента. Теперь мы объясним, что означает каждая из этих конфигураций.

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

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

Контент — здесь вы можете настроить метатеги для всех типов контента. Мы покажем вам, как указать метатеги для каждого контента на шаге 2 ниже.

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

Настройка метатегов для типа контента

Сейчас мы продемонстрируем, как можно добавить метатеги по умолчанию к вашему типу контента. В нашем руководстве мы будем использовать тип контента «Статья». (Вы можете применить те же действия к другим типам контента.)

1. В /admin/config/search/metatag нажмите «Добавить метатеги по умолчанию»

2. Выберите «Статья»

На этом этапе (до вы нажимаете «Сохранить»), если вы нажмете «Просмотреть доступные токены», вы заметите, что не видите контекст узла статьи во всплывающем модальном окне. Таким образом, токены из типа контента Article на данный момент технически недоступны. Необходимо нажать «Сохранить», а затем повторить попытку. Следующие скриншоты показывают до и после этого шага.

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

3. После сохранения вы получите еще один набор полей для статьи:

И если вы нажмете «Изменить», а затем «Просмотреть доступные токены», вы заметите, что статья токены узла теперь доступны, как показано на следующем снимке экрана:

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

4. Теперь мы собираемся переопределить это, нажав «Изменить» рядом с «Содержимое: статья».

В качестве примера давайте добавим field_tags в метатег ключевых слов и сводку основного текста в поле метатега description для статьи. Мы сделали это на следующем снимке экрана:

Затем нажмите «Сохранить».

На главном экране конфигурации метатегов (в /admin/config/search/metatag) вы увидите новое значение для Content: Article, как показано здесь:

5. Теперь давайте проверим нашу новую настройку, создав узел Article и введя несколько ключевых слов:

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

Переопределение метатегов для каждого узла

В приведенном выше примере мы установили некоторые метатеги по умолчанию для всех узлов статьи. Однако мы можем переопределить его для каждого узла. Для этого вам нужно будет добавить дополнительное поле в узел «Статья» с типом поля «Метатеги».

1. В разделе «Управление полями» (/admin/structure/types/manage/article/fields) вашего типа контента «Статья» нажмите «Добавить поле»:

2. Добавьте поле типа «Метатеги» и нажмите «Сохранить и продолжить»:

3. Теперь отредактируйте только что созданный узел статьи, и вы заметите новый набор полей метатега, подобный этому:

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

Установка метатегов для страниц просмотров

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

1. Установите подмодуль «Просмотры метатегов» на странице «Расширение».

2. В этом примере мы будем редактировать вид главной страницы. На экране редактирования просмотра вы сразу увидите новую настройку страницы для вашего просмотра:

3. Если вы развернете эту настройку страницы, вы сможете переопределить метатеги для этой страницы просмотра. В этом примере мы переопределим ключевые слова:

Теперь, если вы перейдете на свою страницу просмотра (в нашем случае это была домашняя страница), вы заметите обновление метатега ключевых слов в исходном коде:

Гранулированные разрешения для Метатеги

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

Нажмите «Расширить» на панели инструментов и установите модуль.

После включения, если вы перейдете в admin/people/permissions, вы заметите некоторые новые настройки разрешений, которые вы можете переключать, как показано ниже:

Метатег для фавиконок

Модуль метатега также поставляется с подмодулем с именем Метатег : Фавиконы. Включение этого модуля позволит вам указать свои фавиконы.

Нажмите «Расширить» на панели инструментов и установите модуль.

После включения этого модуля перейдите в admin/config/search/metatag и нажмите «Изменить» для глобальных настроек, как показано здесь:

На следующей странице вы увидите новый набор полей Favicon:

Теперь вы можете указать ваши разные значки для разных размеров.

Резюме

Модуль метатегов – отличный модуль, который позволяет настраивать метатеги для различных страниц вашего сайта Drupal.

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

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

Настройка метатегов Facebook Open Graph и Twitter Card в Drupal

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

Фрагменты предварительного просмотра контента создаются автоматически, когда кто-то делится ссылкой на Facebook, Twitter, LinkedIn и т. д. Они включают заголовок, описание, изображение или другие детали. Можете ли вы контролировать, как они выглядят, и сделать их такими неотразимыми? Да, конечно, вы можете сделать это, настроив метатеги социальных сетей на своем веб-сайте.

В сегодняшней публикации мы дадим вам пошаговое руководство по настройке отображения контента вашего веб-сайта в Facebook и Twitter. Мы будем генерировать метатеги Facebook Open Graph (OG) и Twitter Card на сайте Drupal. В этом процессе мы будем полагаться на модуль Metatag.

Взгляд на Facebook Open Graph и Twitter Cards

Facebook Open Graph и Twitter Cards — это протоколы, определяющие использование структурированных метаданных (метатегов) для отображения общего контента на Facebook и Twitter соответственно. Каждая из социальных сетей сканирует ссылку, которой делится пользователь, и ищет соответствующие метаданные, чтобы создать расширенный фрагмент. Если ничего не найдено, каждый сценарий обмена будет выбирать элементы со страницы, например заголовок, для создания фрагмента. Они могут не передавать сообщение, которое вы хотели бы показывать, когда данная страница открыта для общего доступа. Или, что еще хуже, элементы, выбранные на первый взгляд произвольно, совсем не представляют страницу.

Пример предварительного просмотра контента в Twitter.

Facebook представил свой протокол Open Graph в 2010 году, чтобы улучшить отображение контента со сторонних веб-сайтов в своей ленте новостей. Open Graph включает в себя набор метатегов HTML. Добавляя теги Open Graph в код своего веб-сайта, вы можете контролировать, какие элементы вашего контента отображаются в ленте Facebook (или Messenger) и как.

Теги Facebook Open Graph совсем недавно были приняты другими социальными сетями, например, LinkedIn или Pinterest. Twitter создал собственную версию метатегов структурированных данных и назвал ее Twitter Cards. Они работают аналогично тегам Open Graph. Более того, в отсутствие своих специальных тегов Twitter использует теги Facebook OG.

Вы можете добавить метатеги Open Graph и Twitter Card в HTML-код своих веб-страниц. Но все намного удобнее для редактора, если ваш сайт построен на CMS. В частности, в Drupal есть модули, предоставляющие пользовательские интерфейсы для настройки Facebook Open Graph и Twitter Cards за несколько простых шагов. Давайте теперь перейдем к практической части и посмотрим, как это работает в Drupal.

Генерация метатегов Open Graph и Twitter Card в Drupal

Установка модуля

Метатаг — это сложный модуль Drupal, который заботится обо всех видах метатегов на веб-сайтах Drupal. Когда мы загружаем его, мы видим, что он поставляется с кучей подмодулей для поисковых систем, различных социальных сетей и т. д. Для создания тегов Facebook Open Graph и Twitter Card нам не нужны все включенные подмодули.

Нам понадобится основной модуль Metatag, подмодуль Metatag Open Graph и подмодуль Metatag Twitter Cards. Это модули, которые нам нужно проверить на вкладке «Расширение» панели администратора Drupal и нажать «Сохранить» внизу страницы.

Установка модуля Metatag с подмодулями Metatag Open Graph и Metatag Twitter Cards.

Модуль Metatag не будет включен без другого модуля Drupal, от которого он зависит — Token. Поэтому нам нужно сначала установить Token. Он используется на многих сайтах Drupal, так что, скорее всего, он у вас уже есть. Если вы используете Composer для установки модулей Drupal, он позаботится о добавлении зависимостей. Так что в этом случае не нужно беспокоиться о Token.

Базовая конфигурация

После установки модулей мы можем перейти в «Конфигурация»> «Поиск и метаданные»> «Метатег» на панели администратора Drupal. На этой странице показан набор настраиваемых шаблонов метатегов. Они передаются с одного уровня на другой, но могут быть переопределены на каждом более конкретном уровне.

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

 Добавление новых шаблонов метатегов в интерфейс модуля метатегов.

Мы также можем видеть разделы метатегов, которые включают Open Graph и Twitter Cards. Лучшее решение — пока оставить их как есть и нажать «Сохранить» внизу страницы. Почему бы нам не начать их создавать прямо сейчас? Сохранив сначала тип контента, мы удостоверимся, что опция «Просмотр доступных токенов» отображает более конкретные токены, что значительно упростит следующие шаги.

Примечание по использованию токенов Drupal

Для большинства полей метатегов мы будем использовать токены. Это означает, что значения метатегов будут автоматически меняться для каждого элемента блога. Например, вместо того, чтобы вводить в поле URL-адрес определенного узла, мы будем использовать токен [node:url]. Таким образом, Drupal автоматически добавит URL к каждому текущему узлу.

Нажав «Обзор доступных токенов» в верхней части страницы конфигурации метатегов и развернув там раздел «Узлы», мы можем найти необходимые токены. Щелчок по выбранному токену поместит его прямо в поле метатега, на котором находится курсор. Кроме того, мы можем скопировать и вставить токены в поля.

Использование токенов для настройки метатегов.

Настройка тегов Facebook Open Graph

В разделе «Конфигурация» > «Поиск и метаданные» > «Метатег» мы нажимаем «Изменить» в разделе «Операции» для «Содержимое: Блог». Затем находим и разворачиваем раздел Open Graph.

Открытие метатегов для блога. Просмотр списка всех метатегов для блога.

Мы сразу видим длинный список полей для метатегов Open Graph. Нет необходимости заполнять каждое поле. Вот некоторые из наиболее важных:

• Тип содержимого. Это не тот тип контента, который мы знаем в Drupal, а тип контента, используемый Facebook. Давайте поместим «блог» в его поле.
• URL. После проверки «Просмотреть доступные токены» давайте вставим токен [node:url].
• Название. Давайте вставим токен [node:title].
• Описание. Давайте вставим [node:summary], который предоставляет усеченную версию тела узла, если присутствует поле body.
• Изображение. Давайте вставим токен [node:field_blog_image]. Оно названо в честь поля изображения блога, которое мы определили для типа контента блога, и в вашем случае может отличаться. В любом случае, нам нужно убедиться, что мы используем токен для поля, представляющего изображение обложки блога. При необходимости мы всегда можем проверить, как называется это поле, в разделе Структура > Типы контента > *Блог* > Управление полями.

Настройка метатегов Open Graph и Twitter Card.

После того, как мы нажмем «Сохранить», рекомендуется очистить кэши нашего веб-сайта Drupal, иначе изменения могут не применяться. Кэши можно очистить в меню «Конфигурация» > «Производительность» > «Очистить все кеши».

Далее мы должны увидеть наши метатеги Open Graph в исходном коде каждого узла блога. Давайте откроем узел, щелкните его правой кнопкой мыши и выберите «Просмотреть исходный код страницы» или просто нажмите F12. Да, теги OG есть: 

• «og:type»
• «ог: URL»
• «ог:название»
• «ог:описание»
• «ог: изображение»

Мы можем проверить ссылку в «og:image», чтобы убедиться, что она действительно ведет к нашему изображению. Да, идеально!

Проверка исходного кода узла на метатеги Open Graph.

Мы также можем поместить URL-адрес узла в отладчик общего доступа Facebook. Ссылку на этот инструмент вы найдете прямо в разделе Open Graph.

Ссылка на средство отладки Facebook Sharing.

Это позволяет нам просмотреть, как наш общий контент будет выглядеть на Facebook, и отладить любые проблемы в случае их обнаружения. Мы просто помещаем URL-адрес узла в отладчик и нажимаем «Отладка». Страница должна быть общедоступной, чтобы Facebook мог «очистить» ее. Если мы внесем какие-либо изменения в метатеги, мы можем нажать «Очистить еще раз» в отладчике, и обновленная версия будет там.

Предварительный просмотр контента в инструменте отладчика обмена Facebook.

Настройка тегов Twitter Card

Настройка метатегов Twitter Card очень похожа на установку метатегов Facebook Open Graph. В разделе «Конфигурация» > «Поиск и метаданные» > «Метатег» мы нажимаем «Изменить» в разделе «Операции» для «Содержание: Блог», затем находим и раскрываем раздел Twitter Card.

• Тип карты Twitter. Давайте выберем «Сводная карта с большим изображением».
• Описание. Как и в случае с Open Graph, мы можем использовать опцию «Просмотреть доступные токены» и выбрать токен [node:summary].
• Название. Давайте вставим токен [node:title].
• URL. Давайте вставим токен [node:url].
• URL изображения. Давайте вставим токен [node:field_blog_image].
• Альтернативный текст изображения. Давайте расширим раздел изображения блога и возьмем токен [node:field_blog_image:alt].

Настройка метатегов Twitter Card.

Подобно рабочему процессу с Facebook Open Graph, мы можем открыть узел и просмотреть его исходный код, чтобы проверить наличие метатегов Twitter Card. Если что-то не обновилось, на помощь придет очистка кеша. После этого мы можем проверить метатеги Twitter Card с помощью валидатора Twitter Card, просто введя URL-адрес страницы.

Open Graph и Twitter Cards для отдельных узлов

Чтобы дать редакторам контента возможность контролировать предварительный просмотр определенных узлов Drupal, также имеет смысл добавить возможность редактировать метатеги непосредственно в интерфейсе редактирования контента. Мы можем сделать это, выбрав Структура > Типы контента > *Блог* > Управление полями > Добавить поле и добавив поле Метатег к типу контента блога.

Добавление поля метатега на панель управления контентом.

После этого сворачиваемая группа разделов метатегов станет доступной в правой части страницы редактирования каждого узла. Разделы: «Базовые теги», «Дополнительно», «Открытый график» и «Карты Твиттера». Их может быть больше — в зависимости от установленных вами подмодулей метатегов.

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

Метатеги Facebook Open Graph и Twitter Card — это лишь примеры того, что вы можете делать с помощью модуля Metatag в Drupal. Кроме того, в Drupal есть тысячи других полезных инструментов, которые помогут вам легко достичь различных целей на вашем сайте. Есть вопросы, комментарии или идеи? Поговорите с нашей командой Drupal!

Добавление метатегов к содержимому Drupal

Поисковая оптимизация (SEO) часто находится в верхней части списка дел при планировании сайта.

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

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

Если вы использовали модуль Nodewords в Drupal 6, это лучшая замена в Drupal 7.

Давайте установим модуль метатегов и посмотрим, что еще он может делать.

Включить модули

Модуль метатегов требует установки трех модулей:

• Метатеги : http://drupal.org/project/metatag
• CTools : http://drupal.org/project/ctools
• Токен : http://drupal.org/project/token

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

Настройка модуля метатегов

Модуль метатегов поставляется уже настроенным, но вы можете вносить изменения.

1. Нажмите «Конфигурация» в черной панели меню администратора.
2. Нажмите «Метатеги» в поле «Поиск и метаданные» в левой части экрана.

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

Добавить метатег по умолчанию

Позволяет настроить метатеги для типа контента «Статья».

1. Нажмите Добавить метатег по умолчанию
2. Выберите статью из раскрывающегося списка «Тип».
3. Введите токен [node:content-type:description] в абстрактное поле.
4. Сохранить

Теперь при создании узла «Статья» описание типа контента «Статья» будет выглядеть следующим образом:

Обратите внимание на наследование

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

Например, вы можете разместить токен [node:summary] в аннотации, а [node:content-type:description] — в описании, решать вам. Конечно, есть и другие токены, которые вы можете выбрать (см. ссылку «Просмотр доступных токенов» в нижней части формы редактирования токена).

Давайте посмотрим, что произойдет, когда мы создадим узел.

Перейдите в раздел «Добавить содержимое» и добавьте статью. Прокрутите вниз и нажмите на вкладку Метатеги. Обратите внимание на ваши варианты. Мы видим токен, который мы добавили в метатег «Статьи», но обратите внимание, что мы также можем редактировать эти поля. Ваши пользователи могут сделать то же самое, если у них есть разрешение.

Должны ли пользователи вводить данные метатега?

Нет. Как мы уже продемонстрировали, поля в модуле метатегов могут быть заполнены с использованием данных, связанных с токеном. Например, если мы вернем Конфигурация > Метатеги и нажмем Изменить для метатега Статья, мы можем добавить токен для поля тега, который поставляется с типом контента Статья. Это автоматически включает термины, которые пользователь вставляет в поле «Теги».

В моем примере я ввел термин Drupal в поле Теги, и теперь мой метатег отражает то же самое.

Термины и пользователи

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

Разрешения

Разрешения для модуля метатегов просты. Вы можете администрировать и редактировать, если у вас есть разрешение на редактирование узла, термина или пользователя. Еще одна вещь, на которую следует обратить внимание, это функция редактирования — это сделка «все или ничего». Возможно, вы захотите предоставить пользователям доступ к редактированию своих метаданных, но ограничить их возможность редактировать метаданные при создании узла. В настоящее время уровень детализации разрешений не отображается для параметра.

Резюме

Мощность токена делает этот модуль метатегов удобным инструментом. Одно дело заставить кого-то вводить данные в предоставленные вами поля, и совсем другое — заставить их сделать то же самое для метаданных. Токены решают эту проблему и дают вам возможность контролировать то, что вы хотите включить, что делает эту функцию SEO, которая работает сама по себе.

Примечание. Когда я создавал это руководство, я заметил, что текст, который я вводил для реферата и ключевого слова для терминов и пользователей, был недоступен, если я хотел его отредактировать, как это было для узла. Данные были сохранены и продолжали отображаться, когда я просматривал исходный код страницы. Здесь есть пара патчей http://drupal.org/node/1845326, и разработчики просят протестировать их для них.

• Синди МакКорт

Категории: Друпал

Совершенствуйте предварительный просмотр ссылок на Facebook с помощью модуля метатегов Drupal

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

В этом посте я показал, как вручную изменять эти теги HTML. Хотя хорошо знать, что происходит за кулисами, на самом деле было бы немного безумием просить ваших редакторов контента изменять этот код для каждой части контента, который они добавляют. На самом деле, если вы используете CMS, они не смогут этого сделать.

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

Установка модулей

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

Для этого руководства вам нужно только включить модули Metatag и Metatag: Open Graph. Хотя мы собираемся иметь дело с предварительным просмотром ссылок Facebook, для этого руководства нам не потребуется модуль Metatag: Facebook.

Создать поле метатега для типа контента

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

• Перейдите в раздел «Структура» > «Типы контента» > «Управление полями» в типе контента, который вы хотите изменить
• Нажмите Добавить поле > Общие > Метатеги
• Дайте вашему полю имя (подойдет «Метатег»)
• Сохранить настройки  

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

• Основные теги
• Расширенный
• Открытый график  

Мы можем написать внутри этих полей, и когда мы это сделаем, это добавит теги на нашу страницу. Это дает вашим редакторам контроль над тем, что печатается в этих тегах и (в конечном итоге) что может отображаться в предварительном просмотре ссылки на Facebook.

Но мы также можем установить некоторые значения по умолчанию. Например, в разделе «Дополнительно» есть много опций. Некоторые из этих полей мы можем никогда не использовать, поэтому давайте отключим их и настроим другие.

Настройка нашего поля метатега

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

Скрытие расширенного раздела

На этой странице мы получаем список различных сущностей, включая тип контента, к которому мы только что добавили поле. Открыв этот раздел, он показывает области Basic, Advanced и Open Graph, которые мы видели ранее. Поскольку ни один из них не отмечен, они отображаются все, но если мы установим флажки рядом с Basic и Open Graph, теперь только эти два раздела будут отображаться в нашем типе контента.

Жесткое программирование по умолчанию

Есть некоторые поля метатегов, которые мы, вероятно, не ожидаем от наших редакторов для заполнения или изменения. Итак, мы можем установить значение по умолчанию. Например, если у нас есть тип контента «Статья», мы, вероятно, захотим установить для Facebook Open Graph значение og:type значение article. Чтобы изменить это:  

• Перейдите в раздел Конфигурация > Поиск и метатег
.
• Прокрутите до раздела «Содержимое» и нажмите «Изменить».
• Откройте раздел Open Graph и в поле Content type введите article
• Нажмите Сохранить  

Теперь метатег og:type будет автоматически заполнен значением статьи. Это работает для значения, которое остается постоянным, но как насчет полей, которые меняются для каждого фрагмента контента, например поля «Заголовок»?

Установка динамических значений по умолчанию с помощью модуля Token

Сначала установите и включите модуль Token.

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

• Откройте раздел «Открыть график» и щелкните поле «Заголовок», убедившись, что ваш текстовый курсор находится в поле
.
• Прокрутите страницу вверх и щелкните Обзор доступных токенов. Появится перетаскиваемое модальное окно
• Откройте раздел узлов
• Нажмите на [узел:название]

Это вставит [узел:название] в поле Заголовок, автоматически вставив Заголовок этой части контента. Вы можете повторить это для других полей.

Примечание к изображениям

Одним из тегов Open Graph, который вы, вероятно, захотите автоматически заполнить, является поле og:image. При настройке значения по умолчанию для этого с помощью модуля Token может возникнуть соблазн просто щелкнуть поле изображения в вашем типе контента, например [node:field_image] .

Это не сработает. Нам нужен URL-адрес изображения, а этот токен его не предоставляет.

Вместо этого вы должны открыть треугольник рядом с полем, которое показывает различные доступные стили изображения. Откройте соответствующий стиль и получите его URL-адрес, который выглядит так: [узел:поле_изображение:большой:url] .

Подведение итогов

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

Чтобы пройти более углубленное обучение веб-разработке, посетите нашу учебную страницу.

HowTo: Использование модуля Drupal Metatag для метаданных

Блог

• Тех
• 7 мая 2018 г.
• Чтение через 2 мин.

Мохит

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

Модуль Metatag в Drupal 8 уже популярен как дружественная к поисковой системе CMS и содержит несколько подмодулей, помогающих повысить поисковую выдачу.

Почему метатег?

Модуль Metatag позволяет автоматически предоставлять структурированные метаданные веб-страницы. Часто он взаимозаменяем с мета-описанием и мета-ключевыми словами страницы. Помимо этого, модуль поддерживает Open Graph Protocol для Facebook, Twitter Cards для Twitter, что позволяет контролировать представление контента в социальных сетях.

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

Как использовать модуль метатегов на пользовательской странице в Drupal 8?

• Загрузите и установите модуль метатегов с Drupal.org. Или скопируйте ссылку для версии 8.
   
• Перейдите к  A dmin > E xtend > A dd New Module > P вставьте ссылку > Нажмите I nstall.
   
• Настройте глобальные и сущностные значения по умолчанию в соответствии с вашими потребностями. Заполните разумные значения по умолчанию для любых метатегов, которые необходимо настроить. Токены могут использоваться для автоматического присвоения значений, поэтому устанавливайте их одновременно.

Включение модуля метатегов

• Можно добавить дополнительные пакеты по умолчанию, нажав «Добавить метатеги по умолчанию» и заполнив форму.
   
• Добавьте поле в нужный узел и нажмите M Управление полями.
   
• Выберите метатеги и нажмите «Сохранить и продолжить».
   
• Выберите «Метатеги» в разделе «Добавить новое поле».
   
• И… готово!

Некоторые функции включают…

• Доступен большой объем метатегов, охватывающих часто используемые теги, такие как теги Open Graph, теги Twitter Cards, теги Dublin Core, теги Google+, теги ссылок приложений, теги подтверждения сайта. Все метатеги, кроме основных, хранятся в отдельных подмодулях.
   
• Административный интерфейс для управления метатегами по умолчанию.
   
• Использование стандартных полей для поддержки сущностей, что позволяет переводить и изменять значения метатегов, добавленных для отдельных сущностей.
   
• Некоторые метатеги, используемые Google+, можно добавить, включив подмодуль «Метатег: Google+».
   
• Подмодуль Metatag: Mobile & UI Adjustments добавляет MobileOptimized, HandheldFriendly, viewport, cleartype, theme-color, format-detection, apple-mobile-web-app-capable, apple-mobile-web-app-status-bar-style , метатеги альтернативных ссылок android-app и ios-app и тег манифеста Android.
   
• Метатеги hreflang доступны через подмодуль Metatag: hreflang.
   
• Метатеги App Links можно добавить, включив подмодуль Metatag: App Links.
   
• Поддержка метатегов, специфичных для Google Custom Search Appliance, доступна в подмодуле «Метатег: Google Custom Search Engine (CSE)».
   
• Метатеги, специфичные для Facebook, включены в подмодуль «Метатег: Facebook».
   
• Интерфейс подключаемого модуля, позволяющий легко добавлять дополнительные метатеги с помощью пользовательских модулей.
   
• Простая интеграция с DrupalConsole для быстрого создания новых метатегов.

Заключение

В заключение: метатеги легко экспортировать и сохранять в функциональных модулях для упрощения развертывания, поскольку Metatag использует стандартные токены Drupal для построения содержимого своих тегов. Используя DrupalConsole, можно создавать пользовательские метатеги для использования в пользовательских модулях.

Сообщите нам в комментариях ниже, как вы нашли эту статью.

Стань нашим читателем!

Получайте избранные блоги прямо в свой почтовый ящик.

Планируете свои следующие цели цифровой трансформации?

Мы можем помочь вам в этом.

Подключим

Принятие гостевых постов

БОЛЬШОЙ ПРИВЕТ блоггерам и евангелистам, желающим поделиться своими знаниями в своих статьях.

Поделитесь с нами своим опытом и мнением, и пусть весь мир станет сценой для ваших идей и работы. Поделитесь своим произведением с нами по адресу [email protected]. Мы также приветствуем идеи на этапе планирования.

Чего нам ждать?

1. Содержание должно соответствовать нашему интересу к веб-разработке и технологиям с открытым исходным кодом. Тем не менее, мы открыты для тем из отрасли и вокруг нее.
2. Среднее сообщение в блоге должно содержать около 1000 слов, но это, конечно, субъективно.
3. Мы любим безумный и красочный контент. Не стесняйтесь размещать ссылки на потрясающие фотографии, инфографику, статистику и все такое прочее.
4. Мы также открыты для статей с полезными советами и рекомендациями, а также с практическими рекомендациями и пошаговыми руководствами

Есть вопрос?
Напишите нам по адресу [email protected]

Для использования этой формы у вас должен быть включен JavaScript.

Имя

Электронная почта

Прикрепить файл

выбрать файл

Только один файл.
Ограничение 2 МБ.
Допустимые типы: txt, pdf, doc, docx.

Сообщение

Лучшее из Drupal

Подпишитесь, чтобы получать еще больше потрясающих электронных писем и полезных обновлений

Для использования этой формы у вас должен быть включен JavaScript.

Электронная почта

Остановить одиночество, история о внедрении метатегов в Drupal

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

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

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

Так зачем вам тратить время на настройку метатегов. Конечно, это поможет найти ваш сайт, но есть и другие преимущества.

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

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

Schema.org, реализованный Google, Microsoft Bing, Yahoo и Yandex, имеет дополнительное преимущество: благодаря своим корням в семантических веб-инициативах он имеет иерархию объектов с определенными свойствами, которые могут использоваться поисковыми системами, чтобы делать больше с результат поиска. Хорошим примером этого является тип «как сделать». Если я поищу в Google «обновление drupal 8 до 9», он не только покажет веб-сайты с контентом о Drupal 8 и 9, но также покажет некоторые шаги, необходимые для выполнения обновления.

Другим хорошим примером является тип «Рецепт» (который является подклассом типа «Как сделать»). Если я поищу в Google «ризотто Джейми Оливер», первый результат не только укажет мне на веб-сайт с этим рецептом, но и покажет ингредиенты, необходимые для этого рецепта.

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

Список доступных типов можно посмотреть по адресу

https://developers.google.com/search/docs/data-types/article

Интернет — это все еще развивающаяся среда, и хотя многое делается для установления стандартов для каждой части Интернета, в некоторых случаях, например в случае метатегов это привело к (большому) количеству стандартов. Я рассмотрю не все из них, а возьму выборку, основанную на вопросе о том, чтобы сделать ваш сайт менее одиноким, и да, это означает, что социальные сети задействованы.

Самый старый тип — это основные теги в HTML. В HTML есть ряд метатегов по умолчанию, которые добавляются Drupal:

Эффективность проприетарных тегов «MobileOptimized» и «HandheldFriendly» является предметом обсуждения, см. ссылки в конце этой статьи.

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

Метатеги Open Graph используются, в частности, Facebook, Pinterest и LinkedIn. Согласно (очевидно устаревшему) https://opg. me-website

Протокол Open Graph позволяет любой веб-странице стать богатым объектом в социальном графе. Например, это используется в Facebook, чтобы позволить любой веб-странице иметь ту же функциональность, что и любой другой объект на Facebook.

В исходном коде страницы вы можете распознать теги Open Graph по префиксу свойства «og-», например:

Модуль метатегов также имеет подмодуль «Facebook». это

Набор метатегов специально для управления расширенными функциями с помощью Facebook .

и не является заменой тегов Open Graph. Если у вас нет особых требований, вы можете оставить поля в разделе «Facebook» пустыми, но для правильного отображения вашего сайта, когда URL-адрес публикуется на Facebook, необходимо настроить метатеги Open Graph.

В документации из Твиттера указано:

С помощью Twitter Cards вы можете прикреплять к твитам богатые фотографии, видео и мультимедийные материалы, помогая привлечь трафик на свой веб-сайт.

Именно то, что мы ищем! В исходном коде страницы вы можете распознать теги карточек Twitter по префиксу «twitter» в имени, например:

Как указано выше, теги schema.org не являются частью модуля метатегов. Чтобы использовать их, вы должны получить модуль

> composer require drupal/schema_metatag

, а затем как минимум включить модули

• Schema.org Metatag
• Schema.org Статья

Schema не использует теги по умолчанию, но использует ld+json -формат, например:

Список возможных объектов в schema.org огромен, см.

https ://schema.org/docs.

Обзор объектов, реализованных в модуле Drupal, см. на странице проекта Drupal на

https://www.drupal.org/project/schema_metatag

Модуль метатегов De Drupal (https://www.drupal.org/project/metatag) используется более чем 400 000 сайтов (статистика на август 2020 г. ) и поставляется с (все еще растущим) набором подмодулей, которые упрощают предоставление метатегов для большого количества платформ социальных сетей и поддержку, например, модуля представлений. Модуль поддерживает среди прочего:

• Dublin core
• Facebook
• Twittercards
• Google Plus

Если вы включите отдельный модуль метатега схемы , вы охватите наиболее важные метатеги.

Вариант использования модуля метатегов по умолчанию — это тот, в котором все метатеги устанавливаются (с помощью токенов) в пользовательском интерфейсе администратора в «/admin/config/search/metatag», который мы обсудим позже.

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

Одним из решений для этого было бы добавить пользовательский модуль с hook_form_node_form_alter и скрыть все поля, которые мы не хотим показывать редактору.

Однако в большинстве случаев мы хотим сделать только небольшое количество полей, таких как «Описание» или «Сводка», доступными для переопределения редактором и использовать значения по умолчанию для остальных. В этом случае более чистым решением будет добавление дополнительных полей к типу контента, которые будут доступны только в форме редактирования. В настройках по умолчанию для метатегов («/admin/config/search/metatag») это поле можно заполнить правильным токеном.

Пользовательские метатеги

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

Определение метатега в пользовательском модуле довольно просто благодаря плагину Drupal 8 и системам аннотаций. В своем пользовательском модуле добавьте класс в

custom_module/src/Plugin/metatag/Tag/CustomMetaTag. php

с содержимым

 namespace Drupal\custom_module\Plugin\metatag\Tag; 
 ​ 
 используйте Drupal\metatag\Plugin\metatag\Tag\MetaNameBase; 
 ​ 
 /** 
 * Пользовательский метатег. 
 * 
 * @MetatagTag( 
 * id = "custom_tag_id", 
 * label = @Translation ("Пользовательский"), 
 * description = @Translation ("Пользовательский тег"), 
 * name = "custom:thema" ", 
 * группа = "настраиваемая", 
 * вес = 8, 
 * тип = "метка", 
 * безопасность = ЛОЖЬ, 
 * несколько = ЛОЖЬ 
 * ) 
 */ 
 /** 
 * CustomMetaTag. 
 */ 
 class CustomMetaTag extends MetaNameBase { 
 ​ 
 /** 
 * {@inheritdoc} 
 */ 
 public function output() { 
 (...) 
 } 
 ​ 
 } 
 ​ 

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

Конечно, настоящее волшебство заключается в реализации функции «вывода», если вам нужно что-то еще, кроме простых токенов (см. , например, код в коде модуля в «src/Plugin/metatag/Tag/Keywords.php ‘), но поскольку примеров в модуле метатегов достаточно, я не буду вдаваться в подробности.

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

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

Страница настроек метатегов ( /admin/config/search/metatag ) разделена на несколько разделов. Почти все разделы наследуют настройки от «Глобальные», но есть ряд исключений, которые обсуждаются ниже.

Настройки в разделе «Общие» наследуются большинством других разделов, поэтому кажется, что это (единственное) место для установки метатегов. Но если вы проверите, какие токены доступны здесь, вы заметите, что токены для «узла» отсутствуют. Так что да, это важный раздел для правильной настройки, но большая часть «настоящей» работы будет выполняться в разделе «Контент».

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

В качестве альтернативы вы можете использовать hook_metatag_route_entity для установки узла, метатеги которого будут отображаться на главной странице:

 /** 
 * Реализует hook_metatag_route_entity(). 
 */function mymodule_metatag_route_entity(RouteMatchInterface $route_match) { 
 // Для какого маршрута 
 if ($route_match->getRouteName() === 'mymodule.front') { 
 //Пользовательский сервис для получения нашего переднего узла. 
 если ($node = \Drupal::service('mymodule.helper')->getFrontpageNode()) { 
 вернуть $узел; 
 } 
 } 
 } 

В приведенном выше коде мы предполагаем, что существует пользовательский маршрут mymodule. front и служба mymodule.helper с функцией getFrontpageNode, которая возвращает узел, который мы используем в качестве главной страницы.

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

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

 /** 
 * Реализует hook_metatags_alter(). 
 */function mymodule_metatags_alter(array &$metatags, array &$context) { 
 // Исключить метатеги на главной странице. 
 if (\Drupal::service('path.matcher')->isFrontPage()) { 
 $metatags = NULL; 
 } 
 } 

По умолчанию эти два элемента наследуют canonical_url и короткую ссылку из настроек в разделе «Общие». Важно ли, что «Страница не найдена» может быть найдена? В этом случае будет достаточно настроек по умолчанию.

Как сказано выше, раздел контента — это раздел, в котором мы будем выполнять большую часть работы. Большинство метатегов должны быть установлены здесь, но если определенный тип контента (например, «Блог») имеет определенные настройки, вы можете добавить их с помощью кнопки «Добавить метатеги по умолчанию» в «/admin/config/search». / метатег».

Конечно, с помощью этой кнопки вы не будете добавлять метатеги по умолчанию, а будете добавлять настройки метатегов по умолчанию для определенного типа контента. Однако в случае использования, когда редакторы имеют возможность устанавливать метатеги для каждого элемента контента, эти настройки являются настройками по умолчанию, которые они увидят в форме добавления/редактирования узла, отсюда и описание в кнопке.

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

Описание

Для полей описания у вас может возникнуть соблазн использовать node:summary -токен, но имейте в виду, что этот токен несколько особенный. В основном коде Drupal это говорит:

 if ($name == 'summary') { 
 // Генерировать необязательную обрезанную сводку поля body. 
 // Получить размер 'trim_length', используемый для режима тизера, если 
 // присутствует или используется размер trim_length по умолчанию. 

Другими словами, если вы хотите установить количество отображаемых символов, вы должны изменить количество символов, отображаемых в сводке основного поля для режима просмотра «Тизер» для всего (или определенного) типа контента.

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

Даты

Все даты для Schema.org должны быть отформатированы в формате ISO 8601. Чистым решением для этого является добавление формата даты и времени для этой строки формата ‘c’. Если имя компьютера для этого «iso_8601», вы можете использовать его с токеном следующим образом:

 [узел: изменено: iso8601] 

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

Изображения

Если добавляется изображение, например, для тега «Изображение» OpenGraph, убедитесь, что вы используете правильный стиль изображения, чтобы ограничить размер изображения.

Если, например, поле, которое ссылается на элемент мультимедиа с изображением, называется «field_image», элемент мультимедиа использует поле «field_media_image» для хранения изображения, а обрезка изображения, которую мы хотим использовать, имеет (машинное) имя ‘metatag_image’, тогда значение в поле изображения OpenGrap будет

 [node:field_image:entity:field_media_image:metatag_image] 

И для размеров изображения мы будем использовать

 [узел:field_image:entity:field_media_image:metatag_image:height] 
 [node:field_image:entity:field_media_image:metatag_image:width] 

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

Типы OpenGraph

Поле «Тип содержимого» предполагает, что это текстовое поле, в которое можно ввести любой текст. Однако существует строгий список разрешенных типов, которые вы можете использовать здесь, см. https://ogp.me/#types.

Тип карты Twitter

Для «обычного», в основном текстового содержимого, предпочтительным типом является «Сводная карта с большим изображением». Если у вас есть контент, состоящий в основном из фотографий или потокового мультимедиа, либо приложение для IOS или Android, вы можете добавить переопределения для этого типа с помощью кнопки «Добавить метатеги по умолчанию». Не читайте объяснение под полем «URL-адрес изображения», в котором указано:

URL-адрес уникального изображения, представляющего содержимое страницы. Не используйте общее изображение, такое как логотип вашего веб-сайта, фотография автора или другое изображение, занимающее несколько страниц. Изображения размером более 120 x 120 пикселей будут изменены и обрезаны в соответствии с самым длинным размером. Изображения размером менее 60×60 пикселей не будут отображаться. Если для параметра «Тип» установлено значение «Фото», размер изображения должен быть не менее 280 x 150 пикселей. Это позволит извлечь URL-адрес из поля изображения. Это позволит извлечь URL-адрес из поля изображения.

Schema.org Author & Publisher

На первый взгляд может показаться хорошей идеей использовать здесь @type ‘Person’ и токен [node:author] , но имейте в виду, что в большинстве случаев это будет показать данные о лицах, чьи данные не находятся в открытом доступе, например веб-мастере или редакторах сайта.

Как правило, автор показывается только для контента, такого как блоги, которые тесно связаны с автором. Для большей части контента лучше использовать @type «Организация» и использовать URL-адрес сайта в качестве @id и имя сайта в качестве имени. И снова убедитесь, что вы используете допустимый стиль изображения для логотипа и установите представитель Стр. на «Ложь».

Убедитесь, что они установлены, если у вас есть общедоступные страницы таксономии. Как и в случае с контентом, токены для терминов таксономии доступны только здесь, а не в глобальном разделе. И так же, как и в случае с «Контентом», вы можете использовать кнопку «Добавить метатеги по умолчанию», если у вас есть особые требования к таксономии.

Имейте в виду, что термины таксономии имеют разные названия, например. [узел:название] против [термин:имя] и что вы всегда должны использовать термин вместо узла в качестве основы токенов.

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

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

Первый, основной тест — проверить источник на разных страницах и убедиться, что вы видите метатеги и ожидаемый контент. В некоторых случаях метатег не будет отображаться, потому что используемый токен не отображал никакого контента, возможно, потому что поле, на которое ссылается токен, не является обязательным полем, а значение по умолчанию, установленное в разделе «Глобальный», не установлено.

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

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

Чтобы использовать инструменты тестирования для карточек Twitter и OpenGRAPH (используется Facebook), ваш сайт должен быть общедоступным, прежде чем вы сможете использовать инструмент тестирования. Если мы не принимаем во внимание службы туннелирования, такие как «ngrok», или сложные конфигурации маршрутизатора, это означает, что вы не можете протестировать эти метатеги перед развертыванием.

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

Чтобы протестировать метатеги ваших карточек Twitter, вы можете использовать инструмент тестирования по телефону

https://cards-dev.twitter.com/validator

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

Но похоже, что этот инструмент в настоящее время имеет некоторые проблемы и выдает только сообщение «Невозможно отобразить предварительный просмотр карты», даже для сайтов, которые прекрасно отображаются при упоминании в твите. Что, кстати, является еще одним методом проверки вашего сайта, потому что предварительный просмотр будет отображаться до того, как вы на самом деле разместите твит.

Инструмент тестирования от Facebook

https://developers.facebook.com/tools/debug/sharing/

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

По умолчанию инструмент использует очищенную версию сайта, что немного усложняет многократное совершенствование ваших метатегов. Обязательно обновите очищенную версию с помощью кнопки «Очистить снова» под кнопкой «Когда и как мы последний раз очищали URL-адрес», если вы обновили метатеги.

У Google был неплохо работающий инструмент тестирования по адресу

https://search.google.com/structured-data/testing-tool?hl=en

, но он решил отказаться от него в пользу

https:// search.google.com/test/rich-results

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

Конечно, есть и другие инструменты, но большинство из них платные и в основном нацелены на проверку правильности сгенерированного JSON-LD (что не является серьезной проблемой в Drupal, поскольку его генерирует модуль).

Вы не ожидали, что я скажу вам, какое значение использовать для каждой из настроек, не так ли? Во-первых, это во многом зависит от объектов, которые вы определили в Drupal. конечно, я могу сказать вам, что вы должны использовать поле с именем «field_description» для описания метатега, но есть вероятность, что вы читаете этот блог задолго до того, как все сущности были определены.

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

• Модуль метатегов: https://www.drupal.org/docs/8/modules/metatag
• Карточки Twitter: https://developer.twitter.com/en/docs/twitter-for-websites/cards /overview/abouts-cards
• OpenGraph: https://ogp.me
• Schema.org: https://json-ld.org/
• Facebook (только с учетной записью Facebook): https://developers.facebook .com/инструменты/отладка/обмен/
• Проверка Twittercards: https://cards-dev.twitter.com/validator
• О Twittercards: https://developer. twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards
• Google: https://search.google.com/test/rich-results
• О метатеге области просмотра: https://www.davidbcalhoun.com/2010/the-viewport-metatag-mobile-web-part -1/
• О переносном метатеге: https://www.metatags.nl/2015/06/metatags-mobiel/mobile-metatags-voor-de-smartphone/
• О метатеге описания: https://www.metatags.org/all-meta-tags-overview/the-important-meta-tags/meta-name-description/

Луис Нагтегаль — универсальный специалист по цифровым технологиям. в LimoenGroen, уделяя особое внимание внутренней разработке. LimoenGroen (по-голландски «зеленый лайм») — это команда увлеченных людей, работающих с Drupal для широкого круга клиентов. Мы предоставляем ориентированные на пользователя масштабируемые веб-сайты и цифровые решения, которые принесут долгосрочную пользу организациям. Делая упор на доступность в Интернете и открытый исходный код, мы хотим поделиться. Мы находимся в Амстердаме, Нидерланды.