Дублированный контент. Какие причины и решения? Распечатать страницу без лишних элементов

Это устранение ошибок под названием «дубли контента». Дублирующийся контент означает, что подобный контент отображается в нескольких местах (URL-адресах) в интернете. В результате поисковые системы не знают, какой URL показывать в результатах поиска. Это может навредить ранжированию веб-страницы сайта. Проблема становится серьезней, когда люди начинают ссылаться на разные версии контента. В этой статье мы расскажем о причинах дублирования контента и найдем решения для каждой из них.

Представьте себе, что вы находитесь на перекрестке, а дорожные знаки указывают по двум разным направлениям на один и тот же конечный пункт назначения: какую дорогу вы должны выбрать? И если пойти по «худшему» направлению, конец пути также может слегка измениться. Как читателю, вам всё равно: вы получили контент, к которому стремились. Но поисковая система должна выбрать, какой из них показывать в результатах поиска, так как она не должна показывать один и тот же контент дважды.

Допустим, ваша статья о «ключевом слове x» появляется на http://www.example.com/keyword-x/ и точно такой же контент появляется на http://www.example.com/article-category/keyword-x/. Это происходит во многих современных системах управления контентом (СМS). Ваша статья была поднята несколькими блоггерами, одни из которых сослались на первый URL, другие сослались на второй URL. Этот дублирующийся контент - проблема для вашего интернет-ресурса, так как ссылки одновременно рекламируют разные URL-адреса. Если бы все они ссылались на один и тот же URL-адрес, ваш рейтинг в топ-10 для «ключевого слова x» был бы намного выше.

1. Причины дублирующегося контента

Есть уйма причин, которые вызывают дублирование контента. Большинство из них являются техническими: не так уж часто человек решает разместить один и тот же контент в двух разных местах, не выделяя исходный источник. Тем не менее, технические причины многочисленны. Это происходит в основном потому, что разработчики не думают как браузер или пользователь, не говоря уже о паутине поисковых систем, они думают как разработчик. А как же вышеупомянутая статья, которая появляется на http://www.example.com/keyword-x/ и http://www.example.com/article-category/keyword-x/? Если вы спросите разработчика, он скажет, что она одна.

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

1.1.Непонимание смысла URL-адресов

Разработчик просто разговаривает на другом языке. Вы видите, что весь сайт, вероятно, снабжен системой баз данных. В этой базе данных есть только одна статья, программное обеспечение веб-сайта просто позволяет найти одну и ту же статью в базе данных через несколько URL-адресов. Это объясняется тем, что в глазах разработчика уникальный идентификатор для этой статьи - это идентификатор статьи, который есть в базе данных, а не URL. Однако для поисковой системы URL-адрес является уникальным идентификатором части контента. Если вы объясните это разработчику, он увидит проблему. И после прочтения этой статьи вы сможете сразу же предоставить ему её решение.

1.2. Идентификаторы сеансов посетителей

Когда вы отслеживаете посетителей и предоставляете возможность сохранять товары, которые они хотят купить, в корзине покупок, вы даете им сессию. Сессия - это, в основном, краткая история того, что посетитель сделал на вашем сайте, и может содержать такие вещи, как элементы в корзине покупок. Чтобы сохранить сессию посетителя, переходящего с одной страницы на другую, нужно где-то хранить уникальный идентификатор этой сессии, так называемый идентификатор сеанса. Наиболее распространенное решение - сделать это с помощью cookie. Однако поисковые системы обычно не хранят файлы cookie.

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

1.3. Параметры URL, используемые для отслеживания и сортировки

Другой причиной дублирования контента является использование параметров URL-адресов, которые не изменяют контент страницы, например, в ссылках отслеживания. Вы видите, http://www.example.com/keyword-x/ и http://www.example.com/keyword-x/?source=rss - это на самом деле не один и тот же URL для поисковой системы. Последний может позволить вам отслеживать, из каких источников зашли посетители, но это может также затруднить вам ранжирование. Очень нежелательный побочный эффект!

Разумеется, это не просто отслеживание параметров, это касается каждого параметра, который вы можете добавить к URL-адресу, который не меняет жизненно важную часть контента. Этот параметр предназначен для «изменения сортировки по набору продуктов» или «показа другой боковой панели»: все они вызывают дублирование содержимого.

1.4. Парсинг и синдикация контента

Большинство причин дублирования контента принадлежат вам самим или, по крайней мере, по вине вашего веб-сайта, когда другие сайты используют ваш контент с вашего согласия или без него. Они не всегда ссылаются на вашу оригинальную статью, и поэтому поисковая система не «получает» ее и приходится иметь дело с еще одной версией той же статьи. Чем популярнее становится ваш сайт, тем больше и чаще вы будете его парсить, расширяя эту проблему все больше и больше.

1.5. Порядок параметров

Другая распространенная причина заключается в том, что CMS не использует красивые и чистые URL-адреса, а скорее URL-адреса, такие как / id = 1 & cat = 2, где ID ссылается на статью, а cat относится к категории. URL /? Cat = 2 & id = 1 будет давать те же результаты в большинстве систем сайта, но они фактически совершенно разные для поисковой системы.

1.6. Пагинация комментариев

В моем любимом WordPress, а также и в некоторых других системах, есть возможность осуществлять пагинацию комментариев. Это приводит к дублированию содержимого по URL-адресу статьи и URL-адресу статьи + / comment-page-1 /, / comment-page-2 / и т. д.

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

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

1.8. с WWW и без WWW

Одна из старых ситуаций: домен с WWW и без WWW, дублирующие контент, в случае, когда доступны обе версии вашего сайта. Ещё одна менее распространенная ситуация, которая существует: http и https дублируют контент, когда один и тот же контент передается на оба адреса.

2. Концептуальное решение: «канонический» URL

Как было определено выше, когда несколько URL-адресов ведут к одному и тому же контенту - это является проблемой, но её можно решить. Человек, работающий в одном издании, как правило, сможет легко сказать вам, какой «правильный» URL-адрес для определенной статьи должен быть. Но самое смешное, что иногда, когда вы спрашиваете трёх человек в одной компании, они дают три разных ответа...

Это проблема, которая требует обязательного решения в таких случаях, потому что конечный адрес может быть только один (URL). Этот «правильный» URL-адрес должен быть определен поисковым сервером как канонический URL-адрес.

Ироническое примечание

Канонический - термин, вытекающий из римско-католических традиций, где список священных книг был создан и принят как подлинный. Их окрестили каноническими Евангелиями Нового Завета. А ирония заключается в следующем: Римской Католической церкви потребовалось около 300 лет и многочисленные бои, чтобы придумать этот канонический список, и в конечном итоге они выбрали 4 версии одной и той же истории...

3. Как найти дубли контента?

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

3.1. Инструменты Google для веб-мастеров

Инструмент Google для веб-мастеров - отличный инструмент для идентификации дублированного контента. Если вы заходите в Инструменты для веб-мастеров Google для своего сайта, см. Раздел «Вид в поиске» «Оптимизация HTML», и вы увидите следующее:

Проблема в том, что если у вас есть статья, похожая на статью о «ключевом слове X», и она отображается в двух категориях, названия могут быть разными. Они могут быть, например, «Ключевое слово X - Категория X - Пример сайта» и «Ключевое слово X - Категория Y - Пример сайта». Google не будет выбирать эти названия в качестве дубликатов, но вы можете найти их с помощью поиска.

3.2. Поиск заголовков или фрагментов

Существует несколько операторов поиска , которые очень полезны для подобных случаев. Если вы хотите найти все URL-адреса на вашем сайте, которые содержат вашу статью с ключевым словом X, введите в Google следующую поисковую фразу:

Site:example.com intitle:"Ключевое слово X"

Затем Google покажет вам все страницы example.com, содержащие это ключевое слово. Чем конкретнее вы отразите эту часть intitle, тем легче будет отсеять дублированный контент. Вы можете использовать один и тот же метод для идентификации дублированного контента в интернете. Допустим, что полное название вашей статьи было «Ключевое слово X - почему оно классное», вы искали: Intitle: «Ключевое слово X - почему это классно»

Google предоставит вам все сайты, соответствующие этому названию. Иногда стоит поискать одно или два полных предложения из вашей статьи, так как некоторые парсеры могут изменить заголовок.

4. Практические решения по дублированию контента

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

Существует четыре метода решения, в порядке предпочтения:

1. Не создавайте дублирующийся контент;
2. Перенаправляйте дубли контента на канонический URL-адрес;
3. Добавляйте канонический элемента ссылки на дубликат страницы;
4. Добавляйте ссылки HTML с дублированной страницы на каноническую страницу.

4.1. Как избежать дублирования контента?

Некоторые из приведенных выше ошибок при дублировании контента имеют очень простые исправления:

• Используете идентификаторы сеанса в ваших URL-адресах? Их часто можно просто отключить в настройках вашей системы.
• У вас есть дубликаты страниц для печати? Это совершенно не нужно: вам нужно просто использовать таблицу стилей печати.
• Использование пагинации комментариев в WordPress? Эту функцию нужно просто отключить (в настройках «обсуждение») на 99% сайтов.
• Параметры URL в разном порядке? Скажите своему программисту, чтобы он создал скрипт, который позволит использовать параметры в одном порядке.
• Проблемы с отслеживанием ссылок? В большинстве случаев вы можете использовать отслеживание кампаний на основе хеша вместо отслеживания кампаний на основе параметров.
• Две версии сайта с WWW и без WWW? Выберите один вариант и придерживайтесь его, перенаправляя один на другой. Вы также можете отдать предпочтение инструментам Google для веб-мастеров, но вам придется заявлять права на обе версии имени домена.

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

4.2. 301 редирект дублированного контента

В некоторых случаях невозможно полностью запретить системе, которую вы используете, создавать неправильные URL-адреса для контента, но иногда их можно перенаправить. Помните об этом во время разговора с разработчиками. Кроме того, если вы вообще избавляетесь от некоторых повторяющихся проблем с контентом, убедитесь, что вы перенаправляете все старые дублированные URL-адреса контента на соответствующие канонические URL-адреса.

4.3. Использование rel = "канонических" линков

Иногда нет возможности избавиться от дублируемой версии статьи, но вы знаете, что это неправильный URL-адрес. Для этой конкретной проблемы поисковые системы ввели элемент канонической ссылки. Он размещен в разделе вашего сайта и выглядит следующим образом:

href="http://example.com/wordpress/seo-

В разделе канонической ссылки вы размещаете правильный канонический URL для своей статьи. Когда Google (или любая другая поисковая система, поддерживающая его) находит этот элемент ссылки, он выполняет автоматическую мягкую переадресацию: передаётся большая часть значения ссылки, собранной этой страницей, на вашу каноническую страницу.

Этот процесс немного медленнее, чем 301 редирект, упомянутый Джоном Мюллером от Google, который вы можете сделать, что было бы намного предпочтительнее.

4.4. Возврат к исходному контенту

Если вы не можете выполнить любое из вышеперечисленных действий, возможно, потому, что вы не контролируете раздел сайта, на котором отображается ваш контент, добавление ссылки на исходную статью сверху или снизу статьи всегда является хорошей идеей. Это может быть то, что вы хотите сделать в своем RSS-канале: добавьте ссылку на статью в ней. Если Google встретит несколько ссылок, указывающих на вашу статью, он вскоре выяснит, что это фактическая каноническая версия статьи.

5. Вывод: дублирующийся контент можно исправить, и его необходимо исправить!

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

От фронтенд-разработчика Мануэля Матузовича.

В закладки

Мануэль Матузович

Бывший менеджер Microsoft Аарон Густафсон в октябре 2016 года написал в Twitter обращение к Indiegogo , где обратил внимание компании на то, что страницы с деталями заказа невозможно распечатать.

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

Оптимизация интернет-страниц для печати очень важна, потому что в наших же интересах, чтобы сайты были максимально доступны пользователям, вне зависимости от того, в каком виде. Не нужно предполагать , какими являются пользователи и каким будет их поведение: люди все еще печатают страницы сайтов. Только подумайте о всех этих статьях или блогах, рецептах, контактной информации, страницах «как добраться» или сайтах с недвижимостью. Однажды кто-то где-то обязательно попробует распечатать одну из созданных вами страниц.

Я давно перестал пользоваться принтером дома, потому что он ломался каждые 10 минут. Но не все такие как я.

Гейдон Пикеринг

Inclusive Design Patterns

Если вы обнаружите ту же самую проблему, что и у меня, то надеюсь, что эта статья быстро освежит ваши знания. Если вы еще не оптимизировали свои страницы с помощью CSS, следующие советы помогут вам начать это делать.

1. Встраиваем стили для печати

Лучший способ встроить стили для печати - описать директиву @media в своем CSS.

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

2. Тестирование

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

Чтобы откорректировать стили для печати в Firefox, откройте Панель разработчика (Shift + F2 или Разработка → Веб-разработка → Панель разработчика), введите media emulate print в строчке ввода внизу окна браузера и нажмите Enter. Активная вкладка будет вести себя, как если бы тип медиа был print до тех пор, пока вы не закроете или не обновите страницу.

Эмуляция стиля печати в Firefox

В браузере Chrome откройте Инструменты разработчика (CMD + Opt + I (для macOS) или Ctrl + Shift + I (для Windows) или View → Developer → Developer Tools), отразите Console drawer (Esc), откройте панель Rendering, поставьте галочку в пункте Emulate CSS Media и выберите Print.

Эмуляция стиля печати в Chrome

3. Абсолютные единицы

Абсолютные единицы не годятся для экранов, но хорошо работают для печати. В стилях для печати совершенно безопасно и даже рекомендуется использование таких абсолютных единиц как cm, mm, in, pt или pc.

section { margin-bottom: 2cm;}

4. Отдельные правила для страницы

Можно также определить параметры, действующие на этой странице: размеры, ориентация и поля, - с помощью директивы @page. Это очень удобно, если вы хотите, чтобы у всех страниц были определенные поля.

@media print { @page { margin: 1cm; }}

В котором он указал, что их страницы детального заказа непригодны к использованию в напечатанном виде.

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

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

Оптимизация веб-страниц для печати важна потому, что печатая страницы мы делаем сайт максимально доступным, независимо от среды. Мы не должны делать предположений о наших пользователях и их поведении. Люди продолжают печатать веб-страницы. Подумайте о статьях, записях в блогах, рецептах, контактной информации, сайтах с картами или объектами недвижимости. Кто-нибудь когда-нибудь обязательно попытается распечатать одну из ваших страниц.

Я забросил домашние принтеры очень давно, так как мне всегда казалось, что они ломаются после 10 минут работы. Но не все такие, как я. - Хейдон Пикеринг (Inclusive Design Patterns)

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

1. Подключение стилей для печати

Лучшим способом подключения стилей для печати является объявление директивы @media в вашем CSS.

Body { font-size: 18px; } @media print { /* print styles go here */ body { font-size: 28px; } }

Альтернативно вы можете подключить стили в HTML, но это потребует дополнительного запроса HTTP.

2. Тестирование

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

Для отладки стилей для печати в Firefox откройте панель разработки (Shift + F2 или меню Tools > Web Developer > Developer Toolbar), введите в поле ввода media emulate print и нажмите enter . Активная вкладка до перезагрузки будет работать так, как будто типом медиа является print .

Эмуляция стилей для печати в Firefox

В Chrome откройте инструменты разработчика (CMD + Opt + I (macOS) или Ctrl + Shift + I (Windows) или меню View > Developer > Developer Tools) и вывести консоль, открыть панель рендеринга и в меню Emulate CSS Media выбрать Print.

Эмуляция стилей для печати в Chrome

3. Абсолютные единицы измерения

Абсолютные единицы измерения это плохо на экране, но отлично для печати. В стилях для печати их использование совершенно безопасно и даже рекомендовано использовать такие единицы как cm , mm , in , pt или pc .

Section { margin-bottom: 2cm; }

4. Специфические правила для страниц

Можно задать свойства, специфичные для печатной страницы, такие как ее размеры, ориентация и отступы с помощью директивы @page . Это очень удобно, если вы хотите, чтобы у всех страниц были определенные отступы.

@media print { @page { margin: 1cm; } }

Директива @page это часть спецификации Paged Media Module , в которой есть такие замечательные вещи, как возможность выбрать первую печатаемую страницу или пустые страницы, позиционировать элементы в углу страницы и многое другое . Это можно использовать даже для печати книг .

5. Управление разрывами страниц

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

Разрыв страницы перед элементом.

Если мы хотим, чтобы элемент всегда был в начале страницы, мы можем задать принудительный разрыв страницы с помощью правила page-break-before .

Section { page-break-before: always; }

Разрыв страницы после элемента.

Правило page-break-after позволяет нам форсировать или запрещать разрывы страниц после элемента.

H2 { page-break-after: always; }

Разрыв страницы внутри элемента

Это свойство удобно, если вам надо избежать разрыва страницы внутри элемента.

Ul { page-break-inside: avoid; }

Вдовы и сироты (висячие строки)

Иногда вам не нужен контроль над разрывом страницы, но важен контроль над тем, сколько строчек будет выведено на текущей, а сколько на следующей странице. Например, если последняя строка параграфа не помещается на текущей странице, на следующую страницу она будет перенесена вместе с предпоследней. Это потому, что соответствующее свойство widows по умолчанию равно 2. Мы можем изменить его.

P { widows: 4; }

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

P { orphans: 3; }

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

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

6. Сброс стилей

Имеет смысл сбросить для печати некоторые стили типа background-color , box-shadow и color .

*, *:before, *:after, *:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }

Стили для печати это одно из тех немногих исключений, когда использование ключевого слова!important вполне нормально.

7. Удаление необязательного контента

Чтобы избежать излишней траты чернил, вы должны удалить ненужное - оформительские элементы, рекламу, навигацию и т.п. с помощью свойства display: none .

Вы, в принципе, можете показать только основной контент и спрятать все остальное:

Body > *:not(main) { display: none; }

8. Печать адресов ссылок

A:after { content: " (" attr(href) ")"; }

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

A:not():after { content: " (" attr(href) ")"; }

Смотрится безумно, я знаю. Эти строчки работают так: выводится значение атрибута href рядом с любой ссылкой, у которой он есть, если он начинается с http , но не ведет на наш mywebsite.com .

9. Печать расшифровок аббревиатур

Аббревиатуры должны оборачиваться элементом с указанием расшифровки в атрибуте title . Имеет смысл вывести это на печать.

Abbr:after { content: " (" attr(title) ")"; }

10. Печать фона

Обычно браузеры не печатают фоновый цвет и фоновые изображения, если вы прямо не укажете им. Есть нестандартизированное свойство print-color-adjust , позволяющее переписать настройки по умолчанию в некоторых браузерах.

Header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

11. Медиазапросы

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

@media screen and (min-width: 48em) { /* screen only */ }

Вы спросите, почему? Потому что правила CSS применяются только при выполнении обоих условий: min-width равен 48em , media-type - screen . Если избавиться от ключевого слова screen , то медиазапрос будет учитывать только значение min-width .

@media (min-width: 48em) { /* all media types */ }

12. Печать карт

Текущие версии Firefox и Chrome способны печатать карты, а вот Safari нет. Некоторые сервисы предоставляют статические карты , которые можно печатать вместо оригинала.

Map { width: 400px; height: 300px; background-image: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true"); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

13. QR-коды

Дополнение 2: Gutenberg

Если вы ищете фреймворк, то вам может понравиться Gutenberg , делающий оптимизацию страниц немного проще.

Дополнение 3: Hartija

Это еще один фреймворк для создания стилей для печати от

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

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

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

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

Есть 2 варианта : создать отдельную страницу и создать отдельный файл стилей. Первый вариант, думаю, понятен. Создаёте ещё одну страницу с версией для печати и на основной странице даёте ссылку на эту печатную версию. Пользователь по ней переходит и через "Файл"->"Печать" он её распечатает.

Второй вариант подразумевает создание отдельной таблицы стилей, где Вы скроете все лишние блоки (через display: none; ) и поставите соответствующие размеры у выводимого контента. Дальше такой файл стилей подключается следующим образом:

Теперь если пользователь захочет распечатать эту страницу, то распечатается не то, что он видит, а то, что прописано в print.css . Фактически, пользователь видит страницу в одном виде, а принтер в совсем другом.

Вот таким образом создаётся версия для печати любой страницы сайта.

• Перевод

3. Абсолютные единицы измерения

Section { margin-bottom: 2cm; }

4. Свойства страниц

@media print { @page { margin: 1cm; } }
Правило @page – это часть стандарта Paged Media Module , который предлагает множество замечательных вещей, вроде выбора первой страницы для печати, настройки пустых страниц, позиционирования элементов в углах страницы и . Его можно использовать даже для того, чтобы готовить к печати книги .

5. Управление разрывами страниц

▍Разрыв страницы перед элементом

Section { page-break-before: always; }

▍Разрыв страницы после элемента

H2 { page-break-after: always; }

▍Разрыв страницы внутри элемента

Ul { page-break-inside: avoid; }

▍Верхние и нижние висячие строки

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

P { widows: 4; }
Если возникла другая ситуация и лишь одна строка абзаца помещается на текущей странице, весь абзац будет напечатан на следующей странице. Свойство, ответственное за нижние висячие строки (orphans), по умолчанию так же установлено в 2.

P { orphans: 3; }
Смысл вышеприведённого кода заключается в том, что для того, чтобы абзац не переносился целиком на следующую страницу, как минимум три строки должны поместиться на текущей странице.

Для того, чтобы лучше в этом разобраться, взгляните на пример, подготовленный с помощью CodePen . А вот – отладочная версия того же примера, её удобнее тестировать.

*, *:before, *:after, *:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
Кстати, CSS-стили для печати – одно из немногих исключений, где директива!important – это абсолютно нормально;)

7. Удаление ненужного контента

Body > *:not(main) { display: none; }

8. Вывод адресов ссылок

Для того, чтобы вывести адреса ссылок после их текстовых представлений, достаточно воспользоваться следующим стилем:

A:after { content: " (" attr(href) ")"; }
Конечно, при таком подходе «расшифровано» будет много лишнего. Например, относительные ссылки, абсолютные ссылки на том же сайте, где размещена печатаемая страница, ссылки с якорями и так далее. Для того, чтобы не засорять печатную страницу, лучше будет использовать примерно такую конструкцию:

A:not():after { content: " (" attr(href) ")"; }
Выглядит это, конечно, безумно. Поэтому объясню смысл данного правила обычным языком: «Отобразить значение атрибута href около каждой ссылки, у которой есть такой атрибут, который начинается с http , но не содержит mywebsite.com ».

9. Расшифровка сокращений