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

Сегодня, в меру своих сил и возможностей, расскажу про оптимизацию своего сайта для поисковых систем. Какими сайтами для проверки пользуюсь, что подправить в functions.php вашей темы, чтобы запись нормально смотрелась при репостинге в социальных сетях типа ВКонтакте и Facebook. Заодно поделюсь плагинами для ускорения работы сайта.

Плагины для WordPress

Начну с конца — плагины для WordPress. Их у меня установлено несколько: WP Super Cache, Autoptimize, Async JavaScript и EWWW Image Optimizer.

WP Super Cache

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

Ссылка для скачивания и установки: WP Super Cache.

Autoptimize

Простой и удобный плагин для объединения и минификации файлов JavaScript и стилей. В каждой вашей странице используется множество JavaScript и CSS файлов — от плагинов и темы. С помощью этого плагина (в идеале) у вас подключается всего два файла: один JavaScript и один CSS.

Ссылка для скачивания и установки: Autoptimize.

Async JavaScript

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

Ссылка для скачивания и установки: Async JavaScript.

EWWW Image Optimizer

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

Ссылка для скачивания и установки: EWWW Image Optimizer.

Исправления functions.php вашей темы

В каждой теме WordPress есть файл functions.php, где происходит настройка темы и прочий тюнинг. Правильный подход для настройки своей темы — это написать свою с нуля или создать дочернюю и менять всё в ней, а по-хорошему создайте свой мини-плагин, где добавляйте всё это барахло, чтобы никак не зависеть от темы.

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

Мета-теги og:type, og: description, og:image, og:title

Добавление мета-тегов og:title, og:description, og:type, og:url, og:locale, og:image и description к посту. В качестве og:description и description берётся первые 55 слов из вашего поста. Эти теги помогают социальным сетям создавать предпросмотр страницы, если вы решите ею поделиться.

function b2k_og_meta() {
    if (!is_singular()) {
        return;
    }
 
    global $post;
    $description = esc_attr(wp_trim_words($post->post_content, 55));
 
    $tags = array();
    $tags['og:title'] = '<meta property="og:title" content="'.get_the_title().'"/>';
    $tags['og:description'] = '<meta property="og:description" content="'.$description.'"/>';
    $tags['og:type'] = '<meta property="og:type" content="article"/>';
    $tags['og:url'] = '<meta property="og:url" content="'.get_the_permalink().'"/>';
    $tags['og:locale'] = '<meta property="og:locale" content="'.get_locale().'"/>';
    $tags['description'] = '<meta property="description" content="'.$description.'"/>';
 
     $images = get_posts(array(
        'post_status'    => null,
        'post_type'      => 'attachment',
        'post_parent'    => get_the_ID(),
        'post_mime_type' => 'image',
        'order'          => 'ASC'
    ));
 
    if ($images) {
        foreach ($images as $img) {
            $url = wp_get_attachment_url($img->ID);
            $tags[$url] = '<meta property="og:image" content="'.$url.'"/>';
        }
    }
 
    echo implode("\n", $tags);
}
add_action('wp_head', 'b2k_og_meta');

Автоматический переход на страницу при поиске

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

function b2k_redirect_single_post() {
    if (is_search()) {
        global $wp_query;
        if ($wp_query->post_count == 1) {
            wp_redirect( get_permalink( $wp_query->posts['0']->ID ) );
            die;
        }
    }
}
add_action('template_redirect', 'b2k_redirect_single_post');

Добавление ссылок на следующую страницу и предыдущую

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

function b2k_rel_next_prev() {
    global $paged;
 
    if ( get_previous_posts_link() ) { ?>
        <link rel='prev' href='<?php echo get_pagenum_link( $paged - 1 ); ?>' /><?php
    }
    else if (is_singular()) {
        $prev_post = get_previous_post(true);
        if (!empty($prev_post)) { ?>
            <link rel='prev' href='<?php echo get_permalink($prev_post->ID); ?>' /> <?php
        }
    }
 
    if (get_next_posts_link()) { ?>
        <link rel='next' href='<?php echo get_pagenum_link( $paged +1 ); ?>' /><?php
    }
    else if (is_singular()) {
        $next_post = get_next_post(true);
        if (!empty($next_post)) { ?>
            <link rel='next' href='<?php echo get_permalink($next_post->ID); ?>' /> <?php
        }
    }
}
add_action('wp_head', 'b2k_rel_next_prev');

Отключение страниц автора

Яндекс.Робот гораздо глупее робота от Гугла, поэтому в первую очередь он умудрился найти страницы вида https://адрес.сайта/что-то-там/evgenii.zhirnov/. Чтобы этого больше не происходило, страницы такого типа отключаются вот этим кодом.

function b2k_disable_author_page() {
    if (is_author() && !is_404()) {
        global $wp_query;
        $wp_query->set_404();
        status_header(404);
        nocache_headers();
    }
}
add_action('template_redirect', 'b2k_disable_author_page');

Открывать все ссылки в новом окне

Не знаю, как вы, а я привык, чтобы все ссылки открывались в новом окне, поэтому обычно открываю их кликом средней кнопки мыши. Данный скрипт добавляет атрибут target="_blank" всем ссылкам на сайте.

function b2k_target_blank($content) {
    $content = preg_replace_callback(
        '/<a[^>]*href=["|\']([^"|\']*)["|\'][^>]*>([^<]*)<\/a>/i',
 
        function($m) {
            $url = $m[1];
            $desc = $m[2];
            return '<a href="'.$url.'" target="_blank" rel="noopener">'.$desc.'</a>';
        },
        $content);
 
    return $content;
}
add_filter('the_content', 'b2k_target_blank');

Полезные ссылки

CY-PR.com

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

Ссылка: CY-PR.com.

Reflex grid

С помощью reflex.css сделана тема на моём сайте, так что упомяну из благодарности. Это всего лишь файл стиля, который разбивает сайт на 12 виртуальных колонок. К примеру, центральная часть моей темы занимает 9 колонок на широком экране, правая часть — 3 колонки. При низком разрешении экрана, обе части занимают 12 колонок, на всю ширину экрана.

Ссылка на документацию: Reflex grid.

Постскриптум

А на сегодня всё. Если у вас есть вопросы — не стесняйтесь спрашивать в комментариях, которые я наконец-то привёл в более-менее человеческий вид после смены темы.

За семь лет ковыряния своего блога немного стал разбираться в PHP, HTML, CSS и JavaScript. На самом деле, это несложно — попробуйте и всё у вас получится.