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