Контентные сайты, имеющие страницы статей с версией для печати, сталкиваются с проблемой возникновения дублей, что плохо в плане поисковой оптимизации. Помимо возникновения дублей контента, отдельная страница "для печати" затратачивает ресурсы индексирующего бота, а также серверные ресурсы самого сайта, особенно при наличии на нём тысяч страниц.
Проблему дублей можно решить атрибутом 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 {content: " (" attr(href) ") ";font-size:.8em;}');
docprint.document.write('a[href^="/"]:after {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 {content: " (" attr(href) ") ";font-size:.8em;}');
docprint.document.write('a[href^="/"]:after {content: " (http://"'+document.domain+' attr(href) ") ";}');
Эти строчки также необязательны, они расшифровывают ссылки в тексте, чтобы тем, кто читает статью с листа, было понятно, куда ведут ссылки (и что это вообще ссылки, а не подчеркнутый текст).
docprint.document.write($("#article").html());
В этой строчке берется отмеченный нами элемент (в данном случае с атрибутом id="article") и всё его содержимое помещается в новый документ для будущей печати.
Такой простой механизм позволит "убить сразу несколько зайцев", позволяя удобно печатать статьи читателям. При этом, не надо заботиться о дублях контента или проблемах краулинга. Рекомендую использовать подобную технику!
Кстати, вы можете проверить, как работает описанный выше приём, прямо сейчас, кликнув на соответствующую ссылку в конце статьи :)