Регистрация Войти
Вход на сайт

Делаем идеальную SEO-версию страницы для печати

Делаем идеальную SEO-версию страницы для печати

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

Проблему дублей можно решить атрибутом rel=canonical, но при этом мы не решаем проблему индексации. Можно закрывать нужные адреса отдельных страниц версий для печати в файле robots.txt, но здесь мы сталкиваемся с другими проблемами: впустую теряется вес, распределяемый по внутренним ссылкам, а также в панели для веб-мастеров появляются ошибки сканирования типа “Заблокирован файлом robots.txt”.

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

1. Создаем ссылку “Версия для печати”
Нам необходимо создать элемент на странице, при клике на который будет инициализирован процесс печати. Это может быть стилизованная с помощью CSS ссылка с хеш-тегом в адресе (например, href=”#print”) или кнопка, или любой другой элемент. На этом сайте использована ссылка вида:

<a class="print" href="#print">Версия для печати</a>


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

2. Помечаем область печати
Пользователю совсем не интересно печатать страницу со всеми элементами дизайна, навигацией, баннерами и дополнительными блоками. Поэтому, необходимо пометить в HTML-коде, какой из элементов содержит требуемый для печати контент. На данном блоге используется DIV-элемент с id=“article”.

<div id="article">Текст статьи с изображениями</div>


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

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

$(document).ready(function(){
$('a.print').click(function(){
var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";

var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<html><head><title>'+document.title+'</title>');
// set some styles
docprint.document.write('<style media="all" type="text/css">');
// hide excessive blocks
docprint.document.write('.post-views,.post-date,.banner-top,.retweet-parent,.sibscribe-form,.related,.print-link{display:none;}');
// style images
docprint.document.write('img{margin-bottom:1em;border:1px solid #bbb;}');
docprint.document.write('.left{margin-right:1em;}.right{margin-left:1em;}');
// describe links
docprint.document.write('a[href]:after &#123;content: " (" attr(href) ") ";font-size:.8em;}');
docprint.document.write('a[href^="/"]:after &#123;content: " (http://"'+document.domain+' attr(href) ") ";}');
// auto print page on load
docprint.document.write('</style></head><body onload="self.print()">');
// echo article inner html
docprint.document.write($('#article').html());
docprint.document.write('</body></html>');
docprint.document.close();
docprint.focus();

return false;
});
});


Рассмотрим подробно важные элементы скрипта и возможные настройки:

$(document).ready(function(){


Эта строчка означает, что внутренний скрипт будет инициализирован после загрузки страницы в браузер. Те, кто работает с jQuery постоянно используют данную конструкцию.

$("a.print").click(function(){


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

// hide excessive
docprint.document.write(".post-views,.post-date,.banner-top,.retweet-parent,.sibscribe-form,.related,.print-link{display:none;}");


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

// style images
docprint.document.write("img{margin-bottom:1em;border:1px solid #bbb;}");
docprint.document.write(".left{margin-right:1em;}.right{margin-left:1em;}");


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

// describe links
docprint.document.write('a[href]:after &#123;content: " (" attr(href) ") ";font-size:.8em;}');
docprint.document.write('a[href^="/"]:after &#123;content: " (http://"'+document.domain+' attr(href) ") ";}');


Эти строчки также необязательны, они расшифровывают ссылки в тексте, чтобы тем, кто читает статью с листа, было понятно, куда ведут ссылки (и что это вообще ссылки, а не подчеркнутый текст).

docprint.document.write($("#article").html());


В этой строчке берется отмеченный нами элемент (в данном случае с атрибутом id=“article”) и всё его содержимое помещается в новый документ для будущей печати.

Такой простой механизм позволит “убить сразу несколько зайцев”, позволяя удобно печатать статьи читателям. При этом, не надо заботиться о дублях контента или проблемах краулинга. Рекомендую использовать подобную технику!

по материалам блога Сергея Кокшарова
Категория: SEO и SEM
Актуальные версии, стоимость и возможности сервисов и программ уточняйте на сайтах их авторов.
comments powered by Disqus
» » Делаем идеальную SEO-версию страницы для печати