Как может заметить внимательный читатель, на этом сайте совершенно нет рекламы и я не клянчу денег с посетителей, как последний голодранец, с помощью баннеров и прочей ерунды. К чему это я вообще? Да просто так, надо же с чего-то заметку начинать да и похвастаться опять же…
Сегодня, в меру своих сил и возможностей, расскажу про оптимизацию своего сайта для поисковых систем. Какими сайтами для проверки пользуюсь, что подправить в 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. На самом деле, это несложно — попробуйте и всё у вас получится.
