Что такое meta-теги и зачем добавлять собственные свойства в WordPress
Meta-теги — это фрагменты HTML-кода, которые размещаются в разделе <head> страницы и содержат метаинформацию о странице. Они не отображаются пользователю напрямую, но очень важны для поисковых систем, социальных сетей и браузеров. Стандартные meta-теги, такие как description и keywords, помогают улучшить SEO, но бывают ситуации, когда нужно добавить собственные свойства: например, для интеграции с внешними сервисами, разметкой Open Graph, Twitter Cards или для реализации кастомных скриптов.
WordPress по умолчанию не предоставляет удобного интерфейса для добавления и управления такими meta-тегами, поэтому мы рассмотрим, как добавить их вручную и программно, чтобы расширить возможности сайта.
Добавление meta-тегов через functions.php: базовый пример
Самый простой способ добавить собственные meta-теги — это подключиться к хуку wp_head и вывести нужный HTML. Ниже пример функции с приставкой wpboot_, которую стоит добавить в файл functions.php вашей темы или в отдельный плагин.
function wpboot_add_custom_meta_tags() {
echo '<meta name="author" content="WPBoot">\n';
echo '<meta property="og:site_name" content="WPBoot.ru">\n';
echo '<meta name="twitter:card" content="summary">\n';
}
add_action('wp_head', 'wpboot_add_custom_meta_tags');В этом примере мы добавили три простых meta-тега: автор, название сайта для Open Graph и тег для Twitter Card. Такой подход подходит для статичных значений, но что делать, если надо динамически выводить метаинформацию?
Динамические meta-теги: использование функций WordPress и условных тегов
В реальных проектах часто требуется, чтобы meta-теги менялись в зависимости от страницы: например, для постов отображался уникальный description, для главной — другое значение, для категорий — собственные описания. Для этого можно использовать условные теги WordPress и функции получения данных, например is_single(), get_the_title(), get_post_meta().
Ниже пример функции, которая выводит динамический meta description и Open Graph description на основе контента страницы:
function wpboot_dynamic_meta_description() {
if (is_singular()) {
global $post;
$desc = get_post_meta($post->ID, 'wpboot_meta_description', true);
if (!$desc) {
$desc = wp_trim_words(strip_tags($post->post_content), 30, '...');
}
echo '<meta name="description" content="' . esc_attr($desc) . '">\n';
echo '<meta property="og:description" content="' . esc_attr($desc) . '">\n';
} elseif (is_home() || is_front_page()) {
$desc = get_bloginfo('description');
echo '<meta name="description" content="' . esc_attr($desc) . '">\n';
echo '<meta property="og:description" content="' . esc_attr($desc) . '">\n';
}
}
add_action('wp_head', 'wpboot_dynamic_meta_description');В этом коде сначала проверяется, является ли текущая страница отдельной записью, потом пытаемся получить пользовательское описание из метаполя wpboot_meta_description. Если оно не задано, то генерируем описание из первых 30 слов содержимого. Для главной страницы берём описание из настроек сайта.
Как добавить поле для meta description в редактор записей
Чтобы удобно управлять описаниями, добавим метабокс в редактор записи. Вот пример создания метабокса с сохранением значения:
function wpboot_add_meta_box() {
add_meta_box(
'wpboot_meta_description',
'Meta Description',
'wpboot_meta_box_callback',
'post',
'normal',
'high'
);
}
add_action('add_meta_boxes', 'wpboot_add_meta_box');
function wpboot_meta_box_callback($post) {
wp_nonce_field('wpboot_save_meta_box_data', 'wpboot_meta_box_nonce');
$value = get_post_meta($post->ID, 'wpboot_meta_description', true);
echo '<label for="wpboot_meta_description_field">Введите описание для meta-тега description:</label>';
echo '<textarea id="wpboot_meta_description_field" name="wpboot_meta_description_field" rows="4" style="width:100%;">' . esc_textarea($value) . '</textarea>';
}
function wpboot_save_meta_box_data($post_id) {
if (!isset($_POST['wpboot_meta_box_nonce'])) {
return;
}
if (!wp_verify_nonce($_POST['wpboot_meta_box_nonce'], 'wpboot_save_meta_box_data')) {
return;
}
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return;
}
if (!current_user_can('edit_post', $post_id)) {
return;
}
if (!isset($_POST['wpboot_meta_description_field'])) {
return;
}
$my_data = sanitize_textarea_field($_POST['wpboot_meta_description_field']);
update_post_meta($post_id, 'wpboot_meta_description', $my_data);
}
add_action('save_post', 'wpboot_save_meta_box_data');Теперь при редактировании записи можно задать индивидуальное описание для meta-тега, которое отобразится в wpboot_dynamic_meta_description.
Использование плагинов для управления meta-тегами: обзор и примеры
Хотя собственные решения дают полный контроль, есть популярные плагины, которые облегчают работу с meta-тегами и SEO:
- Yoast SEO — самый известный SEO-плагин, позволяющий задавать описание, заголовки, ключевые слова, разметку Open Graph и многое другое.
- All in One SEO Pack — аналог Yoast, с широким функционалом и простым интерфейсом.
- WP Meta SEO — удобный для массового редактирования meta-тегов и оптимизации изображений.
Однако, если нужны кастомные meta-теги, которые не поддерживаются плагинами, или специфичная логика, лучше использовать собственный код или расширять плагины с помощью фильтров.
Пример расширения Yoast SEO для добавления кастомного meta-тега
Допустим, нужно добавить meta-тег robots с уникальным значением на определённых страницах. В Yoast SEO можно использовать фильтр wpseo_metadesc или добавить свой тег так:
function wpboot_add_custom_robots_meta_tag() {
if (is_page('privacy-policy')) {
echo '<meta name="robots" content="noindex, nofollow">\n';
}
}
add_action('wpseo_head', 'wpboot_add_custom_robots_meta_tag');Этот код добавит в раздел <head> meta-тег robots только на странице с ярлыком privacy-policy.
Проверка и отладка meta-тегов: советы и инструменты
После добавления или изменения meta-тегов важно проверить, что они корректно выводятся и работают. Для этого используйте:
- Исходный код страницы — самый простой способ проверить наличие и правильность meta-тегов.
- Инструменты для веб-мастеров Google — анализируют SEO и показывают ошибки в метаинформации.
- Facebook Sharing Debugger — проверяет Open Graph и показывает, как будет выглядеть ссылка при публикации в соцсетях.
- Twitter Card Validator — аналогичный инструмент для Twitter Cards.
Если meta-теги не появляются, проверьте, не конфликтует ли ваш код с другими плагинами или темой, и что функции подключены правильно через хуки.
Заключение: почему стоит контролировать meta-теги на WordPress
Управление meta-тегами — ключевой момент в SEO и интеграции сайта с внешними сервисами. Правильное добавление собственных свойств позволяет расширить функциональность, улучшить видимость в поисковых системах и качество сниппетов в соцсетях. В статье показаны примеры, как реализовать это на практике с помощью собственного кода и плагинов. Такой подход очень полезен для разработчиков, которые хотят получить полный контроль над метаинформацией WordPress-сайта.