Как создать «Версию для печати» на сайте?

Многие контекстные сайты, которые имеют специальные страницы с версиями статей для печати, испытывают неудобства из-за возникновения дублей, негативно влияющих на поисковую оптимизацию. Кроме того, отдельная страница, предназначенная для распечатывания текста, «съедает» серверные ресурсы сайта (особенно, если на нем сотни страниц) и затрачивает ресурсы индексирующего бота.

С помощью атрибута rel=canonical можно решить проблему дублей, но он никак не поможет с вопросом индексации. Есть возможность закрыть нужные адреса страниц, предназначенных для печати, в файле robots.txt, однако возникает другая проблема: вес, который распределяется по внутренним ссылкам, теряется впустую, а в вебмастерской панели появляются ошибки сканирования с текстом вроде «Заблокирован файлом robots.txt».

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

Создайте ссылку «Версия для печати».

Вам необходимо создать на нужной страничке ресурса элемент, который инициирует процесс печати. Вариантов несколько: кнопка, стилизованная с использованием CSS ссылка с хеш-тегом

Версия для печати

или любой другой элемент.

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

Определите область печати.

Когда пользователи хотят распечатать страницу, их абсолютно не интересует навигация, баннеры, элементы дизайна и дополнительные блоки. Поэтому чтобы создать идеальную «Версию для печати», укажите в HTML-коде информацию о том, какой из элементов содержит нужную для распечатки информацию. Для этого можно использовать DIV-элемент:

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

Создайте функцию печати

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

Теперь проанализируем скрипт и укажем возможности для настройки.

$(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” элемент и переносим его в новый документ для печати.

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