Красивый способ сделать перелинковку на сайте

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

Как сделать внутреннюю перелинковку сайта с максимальной пользой для поисковых алгоритмов и посетителей.

Вы создали сайт и регулярно пополняете его свежими статьями.
Создали семантическое ядро, стараетесь правильно оптимизировать статьи, но сайт упорно не поднимается в топ выдачи. Знакомая ситуация, не правда ли?

Грамотная перелинковка

Совет специалиста:
Как сделать перелинковку

Как известно, грамотная внутренняя перелинковка нужна, чтобы распределить вес по страницам сайта.
Например, вес с Главной (на которой его больше всего) передать внутренним страницам.

Внутренняя перелинковка страниц сайта, оптимизированных под НЧ-запросы, между собой, также, вносит свою лепту в общую линковку страниц.

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

Как побудить посетителя прочитать еще несколько постов на нашем сайте?

Только, поставив ссылки на другие посты. Разумеется, они должны вести на материалы по данной теме так, чтобы пользователь, перейдя по ним, задержался еще на какое-то время, а потом еще и еще ...

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

Напишите, пожалуйста, в комментариях, если, читая текст, вы кликнули по картинке-ссылке "Как сделать правильную перелинковку читайте здесь".

Правда ведь, картинка вызывает больше желания перейти по ней, чем обычная текстовая ссылка?

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

Итак, как сделать перелинковку грамотно и красиво?

Содержание:

  1. Создаем мета боксы для ссылок:
  2. Создаем шорткоды, с помощью которых будем вставлять ссылки в текст поста
  3. Прописываем стиль для перелинкованых ссылок
  4. Добавляем кнопки для вставки шорткодов в редактор
  5. Как всем этим пользоваться?

↑ Создаем мета боксы для ссылок:

Комментировать код я не буду, иначе этот пост получится слишком длинным.

Кто знает php, поймет сам.
Тем, кто не знает: просто скопируйте код и вставьте его в файл functions.php, перед закрывающим тегом " ?> ".

// Add meta-box
add_action('admin_init', 'my_extra_fields', 1);
function my_extra_fields() {
    add_meta_box('links-post', 'Перелинковка', 'extra_fields_links_post', 'post', 'normal', 'default');
}
function extra_fields_links_post( $post ){ ?>
<div id="links-box">
    <p><strong>Ссылка 1:</strong></p>
    <p><?php wp_editor( get_post_meta($post->ID, 'post-link1', 1), 'pd_postlink1', array( 
            'textarea_name' => 'extra[post-link1]'
            ,'media_buttons' => 1   
            ,'textarea_rows' => 8  
            ,'tinymce' => 0 
            ,'quicktags' => 1
            ) );
       ?>
    </p>
    <p><strong>Ссылка 2:</strong></p>
    <p><?php wp_editor( get_post_meta($post->ID, 'post-link2', 1), 'pd_postlink2', array( 
            'textarea_name' => 'extra[post-link2]'
            ,'media_buttons' => 1   
            ,'textarea_rows' => 8  
            ,'tinymce' => 0  
            ,'quicktags' => 1       
            ) );
       ?>
    </p>
    <p><strong>Ссылка 3:</strong></p>
    <p><?php wp_editor( get_post_meta($post->ID, 'post-link3', 1), 'pd_postlink3', array( 
            'textarea_name' => 'extra[post-link3]'
            ,'media_buttons' => 1   
            ,'textarea_rows' => 8  
            ,'tinymce' => 0  
            ,'quicktags' => 1
            ) );
       ?>
    </p>
</div>     
<input type="hidden" name="extra_fields_nonce" value="<?php echo wp_create_nonce(__FILE__); ?>" />
 
<?php } 
add_action('save_post', 'my_extra_fields_update', 0);
function my_extra_fields_update( $post_id ){
  if ( !wp_verify_nonce($_POST['extra_fields_nonce'], __FILE__) ) return false; 
	if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE  ) return false; 
	if ( !current_user_can('edit_post', $post_id) ) return false; 
 
	if( !isset($_POST['extra']) ) return false;	
 
	$_POST['extra'] = array_map('trim', $_POST['extra']);
	foreach( $_POST['extra'] as $key=>$value ){
 
	if( empty($value) )
    continue; delete_post_meta($post_id, $key); 
 
		update_post_meta($post_id, $key, $value);
	}
	return $post_id;
}

↑ Создаем шорткоды, с помощью которых будем вставлять ссылки в текст поста

Шорткодов будет два - для размещения ссылок слева и справа.
Cкопируйте код и вставьте его в файл functions.php, перед закрывающим тегом " ?> ".

// shortcode-Right
add_shortcode('link-right', 'shortcode_link1');
function shortcode_link1($atts){
      extract(shortcode_atts(array(
      'post_id' => NULL,
 ), $atts));
 if(!isset($atts[0])) return;
      $field = esc_attr($atts[0]);
 global $post;
 $post_id = (NULL === $post_id) ? $post->ID : $post_id;
     return '<div class="vr-right">' .get_post_meta($post_id, $field, true).'</div>';
}
// shortcode-Left
add_shortcode('link-left', 'shortcode_link2');
function shortcode_link2($atts){
      extract(shortcode_atts(array(
      'post_id' => NULL,
 ), $atts));
 if(!isset($atts[0])) return;
      $field = esc_attr($atts[0]);
 global $post;
 $post_id = (NULL === $post_id) ? $post->ID : $post_id;
     return '<div class="vr-left">' .get_post_meta($post_id, $field, true).'</div>';
}

↑ Прописываем стиль для перелинкованых ссылок

Чтобы не перегружать пост лишним кодом, стиль для ссылки-картинки я вынесла в отдельный файл. Ссылку на скачивание его вы можете найти в конце поста.

Cкопируйте этот код, вставьте его в самый конец файла style.css.

↑ Добавляем кнопки для вставки шорткодов в редактор

Cкопируйте код, вставьте его в файл functions.php, перед закрывающим тегом " ?> ".

// add buttons
add_action( 'admin_print_footer_scripts', 'add_buttons' );
function add_buttons() {
	if ( !wp_script_is('quicktags') ) 
		return;
?>
   <script>
        QTags.addButton( 'lk-1', 'Ссылка справа', '[link-right "post-link1"]', '', 'lk-1', 'Ссылка 1', 56 );
        QTags.addButton( 'lk-2', 'Ссылка слева', '[link-left "post-link1"]', '', 'lk-2', 'Ссылка 2', 57 );   
   </script>
<?php
}

После этого в текстовом редакторе должны появиться выделенные кнопки:

Кнопки для перелинковки

↑ Как всем этим пользоваться?

1. Создайте ссылку:

  • На странице редактирования поста найдите мета-бокс "Перелинковка".

    Там вы увидите три поля для ссылок:

  • Метабокс для перелинковки сайта

  • В первом блоке кликните по кнопке "Добавить медиафайл", выберите изображение поста, на который вы планируете создать ссылку.
  • Из выпадающего списка выберите изображение нужного размера.
    Выбирайте небольшое - 100 - 200 px.
    В пункте "Ссылка" выберите "Произвольный URL".
  • Далее, найдите пост, на который вы ссылаетесь, скопируйте из адресной строки его URL, вставьте в поле для URL.
  • Нажмите кнопку "Вставить в запись".
  • Вы получите примерно такой код:
    <a href="https://site.ru">
       <img src="https://site.ru/wp-content/uploads/2018/04/1.jpg" alt="" width="210" height="210" />
    </a>

    Следующие теги - это непосредственно ссылка:

     <a href="">, </a>

    Тег img - это изображение.
    Ссылка содержит картинку, т.е. картинка сама стала ссылкой.

  • Осталось добавить текст ссылки.
    Для этого можно использовать название статьи или любой текст, например:
    "Вот статья по этой теме - читайте - наслаждайтесь" :).
<a href="https://site.ru">
   <img src="https://site.ru/wp-content/uploads/2018/04/1.jpg" alt="" width="210" height="210" />
   Вот статья по этой теме - читайте - наслаждайтесь :).
</a>

Обратите внимание, текст ссылки нужно вставить после закрывающей угловой скобки " /> ".

2. Вставьте ссылку в текст статьи:

  • В поле для текста переключитесь в текстовый редактор.
  • В тексте статьи выберите место, куда вы хотите вставить ссылку.
  • В панели редактора найдите кнопку "Ссылка слева" или "Ссылка справа", в зависимости от того, куда вы хотите пометить ссылку - справа или слева.
  • Кликните по ней и в текст статьи будет вставлен шорткод:
    [link-right "post-link1"]   или   [link-left "post-link1"]
    P.S. Архив со всеми файлами + инструкцией по использованию можно скачать по ссылке внизу поста.
    Инструкция встроена в код - вы увидите ее внутри мета-бокса.

    Обратите внимание на часть шорткода: post-link1

    Цифра 1 сообщает о том, что мы вставили ссылку из первого поля нашего метабокса.

    Как вы помните, полей у нас три.
    Если вы заполняли второе поле, значит единицу нужно поменять на двойку. Вот так:

    [link-right "post-link2"]

    Соответствено, если вы заполняли третье поле, значит единицу меняем на тройку.

Теперь можно сохранить страницу, перейти на сайт, чтобы увидеть результат перелинковки.

↓ Как всегда, архив доступен для загрузки моим подписчикам

Уже скачали 26 раз(а)
Открыть ↓
Для разблокировки содержимого, введите код из последнего, присланного вам письма.

Пример описанной ссылки-картинки вы можете увидеть в верхней части этого поста:

Пример перелинковки

Как видите, внутренняя перелинковка страниц сайта может выглядеть по-разному.

Это все. Удачного использования!

Если вам пригодился мой способ перелинковки, напишите об этом в комментариях, кликните на звездочки рейтинга и социальные кнопки Смайл

Комментарии

  1. Спасибо за инструкцию! Вот бы еще увидеть, как это примерно будет выглядеть, а если бы видео засняли по этой теме, то этому посту цены бы не было.

    • Чтобы увидеть, как это будет выглядеть, посмотрите внимательно на этот пост - в нем как раз и есть ссылка-картинка на другой пост.

      Называется "Как сделать правильную перелинковку читайте здесь" :).

  2. Прикольно, но было бы круто сделать всё это автоматически, т.е. как похожие статьи под статьёй, только раскидать их вот так по тексту, и сразу будет понятно работает оно или нет, ибо править старые статьи таким методом не вариант.

    • Ну, если работает на моем сайте, то почему не должно работать на вашем?

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

  3. на мобильных, если такое будет слева или справа от теста, то текст растянется по одному слову на строчку, тут лучше без картинки

    • Обратите внимание: в стилях есть указание для мобильных устройств :).

  4. Здравствуйте, Ксана.
    Все сделал как у Вас в статье. Почему - то первое слово в картинке - ссылке находится справа от картинки вверху, продолжение фразы как в Вашем примере, внизу картинки.

    Вот ссылка: https://zdravstvyite.ru/nastojka-piona-ot-chego-pomogaet-i-kak-ee-pravilno-prinimat/.

    Подскажите, пожалуйста, что не так.

    • При добавлении изображения вы выбрали "Выравнивание по левому краю",
      а нужно выбрать "Без выравнивания".

      Можно, также увеличить размер картинки до 200px или
      Уменьшить ширину блоков с 38% до 30%:

      .vr-left, .vr-right {
      max-width: 30%;

  5. Посмотрел на мобильном, там весь текст справа от картинки.

    • При добавлении изображения вы выбрали "Выравнивание по левому краю",
      а нужно выбрать "Без выравнивания".

      Можете добавить в стили для картинок принудительное запрещение выравнивания на случай, если в вашей теме не указан стиль для картинок:

      .vr-left img, .vr-right img {
      float: none!important;

      Но, это не отменяет того, что я написала выше по поводу выбора.

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

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

Войти, чтобы написать отзыв.

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

Для того чтобы снять блок и увидеть скрытый контент или ссылку на закачку, подпишитесь на обновления блога.

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 204
Отзывов 4532