RSS-лента

Лучшие CMS интернета бесплатно для создания сайта

Окт
31

Оптимизация тега head сайта на wordpress

Всем привет. Давненько ничего не писал, но сегодня вот решил вас порадовать интересной статейкой про оптимизацию, а если быть конкретнее оптимизацию служебного блока head в html коде сайта. Итак, приступим.

  Для поисковых роботов не маловажную роль играет структура и содержимое служебного тега head, в котором размещается информация не отображаемая на странице (скрипты, файлы стилей, подключаемые плагины и мета теги).

head

Все содержимое области head выводится на сайте, при помощи служебного файла wordpress header.php содержимое которого вы можете посмотреть перейдя в админ панель/внешний вид/редактор:

 header

Если, вы внимательно посмотрите на HTML код wordpress  блога в область head, а потом сравните это с файлом header.php, то обнаружите, что кроме указанных там вызовов: мета тегов, стилей CSS и заголовка,  есть много других строк. Они, как правило, появляются при использовании различных плагинов, которые добавляют свои стили или скрипты в HTML. Иногда, результирующий код получается ну очень большим и захламленным что плохо влияет на продвижение сайта.

Структура и содержимое правильного head

  В соответствии со стандартами HTML только несколько тегов, могут быть помещены в раздел head. Это следующие теги: <base>, <link>, <meta>, <title>, <style> и <script>.

Самые важные из этих тегов в плане оптимизации страницы это title, который указывает название окна текущего документа и meta — применяется для указания информации об HTML-документе, которая помогает браузерам правильно отображать страницы, а поисковым машинам — их индексировать и ранжировать в выдаче.

Но, зачастую эти теги, либо вообще отсутствуют, либо из-за подключаемых плагинов оказываются в самом конце блока head, что в свою очередь не благоприятно влияет на ранжирование сайта в выдаче. Самым простым способом добавить эти теги для wordpress сайта — установить один из плагинов:

— All in One SEO Pack — один из лучших плагинов для оптимизации WordPress блога под поисковые системы. Позволяет вводить мета теги для каждой страницы, менять формат вывода тайтлов и т.д.

— Platinum SEO Pack — более продвинутая версия All in One SEO Pack. Дополнительно умеет добавлять тег nofollow к ссылкам.

После установки одного из этих плагинов в идеале у вас должно быть содержимое head для wordpress следующего вида:

<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name=”robots” content="index, follow" />
   <title>Оптимизация блока head сайта на wordpress</title>
      <meta name="description" content="Описание документа">
      <meta name="keywords" content="ключевые слова">
      <meta name="author" content="Автор документа">
<link rel="canonical" href="http://goldserfer.ru/" />
<link rel="stylesheet" href="../themes/colorbold/style.css" type="text/css" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
</head>

Ну что постараемся привести код к такому виду? Конечно да!

Избавляемся от лишнего кода в head

  Первое, что нужно сделать так это объединить все файлы стилей вашей темы в один общий файл style.css. Для этого откройте последовательно дополнительные файлы стилей скопируйте из них код и вставьте в конец файла style.css После этих действий, можно удалить из header.php код вывода дополнительных стилей. В итоге в html у вас должна остаться только одна строчка подключения стилей вашей темы:

<link rel="stylesheet" href="../themes/colorbold/style.css" type="text/css" />

В коде  файла шаблона header.php функция <?php wp_head(); ?> реализует большую часть «дополнительных вставок» не нужных для блока head. Просто удалить эту функцию нельзя, так как это непременно повлечет за собой определенные последствия, что негативно может отразиться на работе блога.

Поэтому, лучше будет просто деактивировать подключение в область head стилей плагинов, через файл функций  fuctions.php.

Очень важно! Перед какими либо изменениями в файле fuctions.php, не поленитесь сделайте его копию.

Используем следующий алгоритм:

1). Прежде чем начать отключать добавление плагинов в head скопируйте html код который они добавляют.

2). Создайте в области Body дополнительный блок к примеру под названием header:

<div id="header">

А тут код плагинов

</div>

В этот блок нам нужно вставить код который добавляют плагины, чтобы они не перестали корректно работать.

3). Нужно тщательно просмотреть основной файл php плагина, хуки которого Вы собрались удалить. При помощи сочетания клавиш Ctrl+F отыщите там следующую конструкцию:

add_action('wp_head', 'plugin_function_here');

4). Чтобы корректно избавится от данного вызова, нужно добавить в файл functions.php следующую строку:

remove_action('wp_head', 'plugin_function_here');

5). Сохраняем шаблон и проверяем,  что у нас получилось.
Уникальные случаи тоже встречаются, при  которых применение remove_action для wp_head() не работает. Приведу в пример WP-PageNavi (версия 2.5.0), там явного вызова функции в wp_head() нет, невзирая на это, плагин подгружает свой файл стилей. Внимательно посмотрите на первоначальный код wp-pagenavi.php, там есть такая функция «Enqueue PageNavi Stylesheets», добавляющая стили через:

add_action('wp_print_styles', 'pagenavi_stylesheets');

Дописываем в самый конец файла функций fuctions.php перед ?>, следующую строку, чтобы отделаться от этого вызова:

add_action('init', 'remheadlink');
function remheadlink()
{
remove_action('wp_print_styles', 'pagenavi_stylesheets');
}

В работе с ненужными вызовами и хуками просматривается определенный принцип  – Вы ищите нужную функцию и отключаете ее.

Можно освободиться и от других не нужных элементов, которые вы не используете, применив хаки для functions.php, например:

add_action('init', 'remheadlink');
function remheadlink()
{
remove_action('wp_head','feed_links_extra', 3); // ссылки на дополнительные rss
remove_action('wp_head','feed_links', 2); //ссылки на основной rss и комментарии
remove_action('wp_head','rsd_link'); // для сервиса Really Simple Discovery
remove_action('wp_head','wlwmanifest_link'); // для Windows Live Writer
remove_action('wp_head','wp_generator'); // убирает версию wordpress
}

Убираем разные ссылки при отображении поста — следующая, предыдущая запись, оригинальный url и т.п.

add_action('init', 'remheadlink');
function remheadlink()
{
remove_action('wp_head','start_post_rel_link',10,0);
remove_action('wp_head','index_rel_link');
remove_action('wp_head','rel_canonical');
remove_action( 'wp_head','adjacent_posts_rel_link_wp_head', 10, 0 );
remove_action( 'wp_head','wp_shortlink_wp_head', 10, 0 );
}

На последних версиях wordpress в блоке head появляется странный скрипт:

script type text javascript window. wpemojiSettings baseUrl http: s.w.org images core emoji 72x72 ext png source concatemoji http: medicinahouse.ru wp-includes js wp-emoji-release.min.js? ver 4.2.4 !function a, b, c function d a var c b.createElement canvas d c.getContext c.getContext 2d return d d.fillText? d.textBaseline top

Этот скрипт добавляет набор стандартных смайликов Emoji, даже не знаю зачем вордпресс его добавил, ну да ладно. Убрать этот скрипт, можно при помощи добавления в самый конец файла функций, перед знаком ?> следующей конструкции:

add_action('init', 'remheadlink');
function remheadlink()
{
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
}

Помимо всего сказанного выше, через файл функций, можно убрать версию скриптов и стилей. Нужно всего навсего добавить код:

function _remove_script_version( $src ){
$parts = explode( '?', $src );
return $parts[0];
}
//Это для скрытия версии скриптов
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
//Это для стилей
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

На этом у меня все. Спасибо за внимание.

Получай первым обновления блога!

Введите Ваш e-mail:


Комментарии (7) на “Оптимизация тега head сайта на wordpress”

  • Игорь (8 коммент.) 16 Ноябрь 2013 в 11:08

    Добрый день.

    Подскажите пожалуйста, за что отвечает этот код на сайте, в разделе header.php и можно ли его удалить?

    <html xmlns="www.w3.org/1999/xhtml />

    НА СКОЛЬКО Я ЗНАЮ, ЭТОТ КОД ОТ ВАЛИДАТОРА.

    • CMSONY
      CMSONY (172 коммент.) 16 Ноябрь 2013 в 23:19

      Этот код обычно используется в теге < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> он сообщает браузеру о типе текущего документа и как его интерпретировать.
      По идее если продвинутый браузер не понимает указанную версию, то он должен скачать файл DTD по указанному адресу и начать ее понимать. Но, я таких браузеров не встречал, поэтому считаю что этот тег не нужен…

  • Павел (2 коммент.) 26 Январь 2015 в 18:07

    посмотрел вашу статью сделал как написано , но у меня почему то не убираются <link rel='stylesheet' id='yarppWidgetCss-css' ……

    • CMSONY
      CMSONY (172 коммент.) 26 Январь 2015 в 20:17

      Подключение стилей оформления плагина YARPP, так легко не убирается (есть такие плагины). Вам нужно править сам плагин. Откройте админ панель/плагины/редактор

  • CMSONY
    CMSONY (172 коммент.) 11 Август 2015 в 17:28

    Вставьте следующий код в functions.php
    //удаляем link rel=’stylesheet’ id=’yarppWidgetCss-css’
    add_action(‘wp_print_styles’,’lm_dequeue_header_styles’);
    function lm_dequeue_header_styles()
    {
    wp_dequeue_style(‘yarppWidgetCss’);
    }
    add_action(‘get_footer’,’lm_dequeue_footer_styles’);
    function lm_dequeue_footer_styles()
    {
    wp_dequeue_style(‘yarppRelatedCss’);
    }

  • Ксения (1 коммент.) 24 Февраль 2016 в 15:44

    Здравствуйте, есть ли какой-нибудь способ контролировать порядок вывода кода функцией wp_head(); т.е мне не нравится что у меня идет тайтл, потом идет куча кода выводимого wp_head, а потом где то внизу идет дескрипшн и кейвордц, так же выводимые функцией wp_head (у меня это делает плагин ALL in SEO pack)

  • Alex (4 коммент.) 31 Май 2016 в 13:23

    Подскажите, пожалуйста, как удалить комментарий в head:

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


вверх