Info

SEO мета-теги WordPress без плагинов

admin

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

1. Добавление мета-тегов в <head>

Для начала, вам нужно добавить мета-теги в раздел <head> вашей темы. Для этого откройте файл header.php вашей темы и добавьте следующий код перед закрывающим тегом </head>:

php
Copy
<?php
if (is_single() || is_page()) {
    $post_id = get_the_ID();
    $meta_title = get_post_meta($post_id, 'seo_title', true);
    $meta_description = get_post_meta($post_id, 'seo_description', true);

    if (!empty($meta_title)) {
        echo '<title>' . esc_html($meta_title) . '</title>' . "\n";
    } else {
        echo '<title>' . wp_title('', false) . '</title>' . "\n";
    }

    if (!empty($meta_description)) {
        echo '<meta name="description" content="' . esc_attr($meta_description) . '">' . "\n";
    }
} else {
    echo '<title>' . wp_title('', false) . '</title>' . "\n";
}
?>

2. Добавление полей для SEO в админке

Теперь нужно добавить поля для ввода SEO-заголовка и описания в админке WordPress. Для этого добавьте следующий код в файл functions.php вашей темы:

php
Copy
function add_seo_meta_boxes() {
    add_meta_box(
        'seo_meta_box', // ID метабокса
        'SEO Настройки', // Заголовок метабокса
        'render_seo_meta_box', // Функция, которая будет выводить содержимое метабокса
        'post', // Тип записи, для которого добавляется метабокс
        'normal', // Контекст (normal, side, advanced)
        'high' // Приоритет (high, core, default, low)
    );
    add_meta_box(
        'seo_meta_box',
        'SEO Настройки',
        'render_seo_meta_box',
        'page',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'add_seo_meta_boxes');

function render_seo_meta_box($post) {
    wp_nonce_field('seo_meta_box', 'seo_meta_box_nonce');

    $seo_title = get_post_meta($post->ID, 'seo_title', true);
    $seo_description = get_post_meta($post->ID, 'seo_description', true);

    echo '<label for="seo_title">SEO Заголовок:</label>';
    echo '<input type="text" id="seo_title" name="seo_title" value="' . esc_attr($seo_title) . '" style="width: 100%; margin-bottom: 10px;">';

    echo '<label for="seo_description">SEO Описание:</label>';
    echo '<textarea id="seo_description" name="seo_description" style="width: 100%;">' . esc_textarea($seo_description) . '</textarea>';
}

function save_seo_meta_data($post_id) {
    if (!isset($_POST['seo_meta_box_nonce']) || !wp_verify_nonce($_POST['seo_meta_box_nonce'], 'seo_meta_box')) {
        return;
    }

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    if (isset($_POST['seo_title'])) {
        update_post_meta($post_id, 'seo_title', sanitize_text_field($_POST['seo_title']));
    }

    if (isset($_POST['seo_description'])) {
        update_post_meta($post_id, 'seo_description', sanitize_text_field($_POST['seo_description']));
    }
}
add_action('save_post', 'save_seo_meta_data');

3. Настройка разных <h1> и <title>

Если вам нужно, чтобы <h1> на странице отличался от <title>, вы можете использовать следующий код в шаблоне страницы (например, single.php или page.php):

php
Copy
<?php
$post_id = get_the_ID();
$custom_h1 = get_post_meta($post_id, 'custom_h1', true);

if (!empty($custom_h1)) {
    echo '<h1>' . esc_html($custom_h1) . '</h1>';
} else {
    echo '<h1>' . get_the_title() . '</h1>';
}
?>

И добавьте поле для ввода кастомного <h1> в админке, аналогично тому, как мы добавляли поля для SEO-заголовка и описания:

php
Copy
function add_custom_h1_meta_box() {
    add_meta_box(
        'custom_h1_meta_box',
        'Кастомный H1',
        'render_custom_h1_meta_box',
        'post',
        'normal',
        'high'
    );
    add_meta_box(
        'custom_h1_meta_box',
        'Кастомный H1',
        'render_custom_h1_meta_box',
        'page',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'add_custom_h1_meta_box');

function render_custom_h1_meta_box($post) {
    wp_nonce_field('custom_h1_meta_box', 'custom_h1_meta_box_nonce');

    $custom_h1 = get_post_meta($post->ID, 'custom_h1', true);

    echo '<label for="custom_h1">Кастомный H1:</label>';
    echo '<input type="text" id="custom_h1" name="custom_h1" value="' . esc_attr($custom_h1) . '" style="width: 100%;">';
}

function save_custom_h1_meta_data($post_id) {
    if (!isset($_POST['custom_h1_meta_box_nonce']) || !wp_verify_nonce($_POST['custom_h1_meta_box_nonce'], 'custom_h1_meta_box')) {
        return;
    }

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    if (isset($_POST['custom_h1'])) {
        update_post_meta($post_id, 'custom_h1', sanitize_text_field($_POST['custom_h1']));
    }
}
add_action('save_post', 'save_custom_h1_meta_data');

4. Проверка и тестирование

После добавления кода, проверьте, что все работает корректно:

  1. Перейдите в админку WordPress и откройте любую запись или страницу.
  2. Вы должны увидеть новые поля для ввода SEO-заголовка, описания и кастомного H1.
  3. Заполните эти поля и сохраните изменения.
  4. Откройте страницу на фронтенде и проверьте, что мета-теги и заголовки отображаются правильно.

Заключение

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

В какой файл добавить? » И добавьте поле для ввода кастомного <h1> в админке, аналогично тому, как мы добавляли поля для SEO-заголовка и описания:»

Код для добавления поля ввода кастомного <h1> в админке WordPress нужно добавить в файл functions.php вашей темы. Этот файл находится в папке вашей активной темы, например:

Copy
wp-content/themes/ваша-тема/functions.php

Как добавить код:

  1. Откройте файл functions.php в текстовом редакторе или через встроенный редактор WordPress (Консоль → Внешний вид → Редактор тем → functions.php).
  2. Вставьте следующий код в конец файла (перед закрывающим тегом ?>, если он есть, или просто в конец файла):
php
Copy
// Добавляем метабокс для кастомного H1
function add_custom_h1_meta_box() {
    add_meta_box(
        'custom_h1_meta_box', // ID метабокса
        'Кастомный H1', // Заголовок метабокса
        'render_custom_h1_meta_box', // Функция для отображения содержимого метабокса
        'post', // Тип записи (post, page или другой)
        'normal', // Контекст (normal, side, advanced)
        'high' // Приоритет (high, core, default, low)
    );
    add_meta_box(
        'custom_h1_meta_box',
        'Кастомный H1',
        'render_custom_h1_meta_box',
        'page',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'add_custom_h1_meta_box');

// Функция для отображения поля ввода кастомного H1
function render_custom_h1_meta_box($post) {
    wp_nonce_field('custom_h1_meta_box', 'custom_h1_meta_box_nonce');

    $custom_h1 = get_post_meta($post->ID, 'custom_h1', true);

    echo '<label for="custom_h1">Кастомный H1:</label>';
    echo '<input type="text" id="custom_h1" name="custom_h1" value="' . esc_attr($custom_h1) . '" style="width: 100%;">';
}

// Сохраняем данные кастомного H1
function save_custom_h1_meta_data($post_id) {
    if (!isset($_POST['custom_h1_meta_box_nonce']) || !wp_verify_nonce($_POST['custom_h1_meta_box_nonce'], 'custom_h1_meta_box')) {
        return;
    }

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    if (isset($_POST['custom_h1'])) {
        update_post_meta($post_id, 'custom_h1', sanitize_text_field($_POST['custom_h1']));
    }
}
add_action('save_post', 'save_custom_h1_meta_data');

Что делает этот код:

  1. add_custom_h1_meta_box — добавляет метабокс «Кастомный H1» в редактор записей и страниц.
  2. render_custom_h1_meta_box — отображает поле ввода для кастомного <h1> внутри метабокса.
  3. save_custom_h1_meta_data — сохраняет значение кастомного <h1> в базе данных при сохранении записи или страницы.

Как это будет выглядеть в админке:

  1. Перейдите в редактор записи или страницы.
  2. Вы увидите новый метабокс «Кастомный H1» с полем для ввода текста.
  3. Введите желаемый текст для <h1> и сохраните изменения.

Как вывести кастомный <h1> на фронтенде:

Чтобы вывести кастомный <h1> на странице, добавьте следующий код в шаблон вашей темы (например, single.php для записей или page.php для страниц):

php
Copy
<?php
$post_id = get_the_ID();
$custom_h1 = get_post_meta($post_id, 'custom_h1', true);

if (!empty($custom_h1)) {
    echo '<h1>' . esc_html($custom_h1) . '</h1>';
} else {
    echo '<h1>' . get_the_title() . '</h1>';
}
?>

Этот код проверяет, есть ли кастомный <h1>. Если он есть, выводит его, иначе выводит стандартный заголовок записи.

Важно:

  • Не забудьте сохранить изменения в файле functions.php.
  • Если что-то пойдет не так, вы всегда можете восстановить файл из резервной копии или через FTP.

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Вариан 2

Чтобы добавить возможность вписывать SEO-метаданные (title, description, h1) для страниц WordPress без использования плагинов, используйте стандартные средства WordPress: кастомные поля и небольшие изменения в файлах темы.

Шаги для реализации

1. Включите кастомные поля в редакторе WordPress

  • Откройте нужную страницу или запись.

  • В редакторе Gutenberg: нажмите на три точки в правом верхнем углу → «Настройки» → «Панели» → включите «Кастомные поля».

  • В классическом редакторе: откройте «Настройки экрана» вверху и отметьте «Кастомные поля»

2. Добавьте кастомные поля для title и description

  • Внизу страницы появится блок «Кастомные поля».

  • Создайте поле с именем, например, meta_title для заголовка и meta_description для описания.

  • Впишите нужные значения для каждой страницы

3. Добавьте код в functions.php вашей темы
Рекомендуется использовать дочернюю тему, чтобы изменения не пропали при обновлении темы.

// Устанавливаем <title> из кастомного поля ‘meta_title’
function custom_meta_title($title) {
if (is_singular()) {
global $post;
$custom_title = get_post_meta($post->ID, ‘meta_title’, true);
if ($custom_title) {
return esc_html($custom_title);
}
}
return $title;
}
add_filter(‘pre_get_document_title’, ‘custom_meta_title’);

// Устанавливаем <meta description> из кастомного поля ‘meta_description’
function custom_meta_description() {
if (is_singular()) {
global $post;
$custom_description = get_post_meta($post->ID, ‘meta_description’, true);
if ($custom_description) {
echo ‘<meta name=»description» content=»‘ . esc_attr($custom_description) . ‘»>’ . «\n»;
}
}
}
add_action(‘wp_head’, ‘custom_meta_description’); 





4. Для H1 используйте стандартный редактор WordPress


    

  • 

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

    • 



Преимущества подхода


    

  • 

    Не требуется установка плагинов — сайт остается «легким» и быстрым
    

    • 

  • 

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

    • 

  • 

    Решение легко расширить для других SEO-полей (например, keywords или Open Graph)
    

    Проверка результата
    

      

    • 

      Откройте нужную страницу на сайте.
      

      • 

    • 

      Посмотрите исходный код (Ctrl+U).
      

      • 

    • 

      Убедитесь, что в <head> отображаются нужные <title> и <meta name="description"> с вашими значениями.
      

      • 

    

    Итого:
    
Вы сможете вписывать SEO-метаданные (title, description) для каждой страницы через кастомные поля, а для H1 — использовать обычный редактор WordPress. Всё реализуется без плагинов, только с помощью стандартных возможностей WordPress и небольшого кода в functions.php
    

    • 



 

            

            

        

    

                    

                                            
Связанные записи

                                        

                                                        

                                    

                                                                                

                                            
Info 
                                            

                                                
                                                    Реализуем различные заголовки Title, H1 и мета-описание в WordPress без плагинов                                                
                                            

                                            

                                                 admin                                            

                                        

                                    

                                

                                                            

                                    

                                                                                

                                            
Info 
                                            

                                                
                                                    Какие коды нужно добавить в functions.php для настройки SEO                                                
                                            

                                            

                                                 admin                                            

                                        

                                    

                                

                                                


                                
 
                




	



    	

		
Добавить комментарий