Главная intitle версия для печати. Используем малоизвестные функции Google, чтобы найти сокрытое. Использование rel = "канонических" линков

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

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

Решение - таблицы стилей для печати

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

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

Сегодня вы можете взять любой (X)HTML-документ и подготовить его к
печати с помощью стилевой таблиц, не прикасаясь к разметке. И вот в
прошлое уходят проблемы с созданием и синхронизацией двух версий
документа — одной для экрана, другой — для печати. И что самое
приятное: сделать это проще простого.

Обходим ошибку с плавающими элементами

Браузеры семейства Gecko, такие как Netscape 6.x или Mozilla, имеют
проблему с печатью длинных «плавающих» блоков (long floated elements).
Если плавающий элемент вышел за пределы печатной страницы, то
оставшаяся часть полностью пропадает, так и не появившись на следующей
странице.

Если ваш сайт похож на «A List Apart», т.е. статьи в нём заключаются
в один большой плавающий блок, то это значит, что читатели при
распечатке получат лишь первую страницу статьи.

Решение, как и следовало ожидать, заключается в отмене свойства
«плавающий» у блока с текстом перед печатью. Если вкратце, для всех
плавающих элементов устанавливается стилевое правило «float: none».
Сделав это, вы вернёте все плавающие элементы к обычному виду, и
документ будет напечатан так, как и предполагалось — страница за
страницей вплоть до самого конца.

Итак, именно это я и предложил сделать Зельдману для ALA, и, как
только он это сделал, проблема с печатью исчезла. У броузеров семейства
Gecko эта ошибка по-прежнему не исправлена (на момент написания
статьи), но всё же её можно легко обойти предложенным выше способом.

В путь

Ниже представлена «печатная» таблица стилей, с помощью которой «A List Apart» решил проблему печати плавающих элементов:

#menu { display: none; } #wrapper, #content { width: auto; border: 0; margin: 0 5%; padding: 0; float: none !important; }

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

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

Если посмотреть на содержимое тега новых статей на сайте ALA, мы обнаружим (в гуще начинки) следующие строки:

У нас есть файл таблицы стилей, print.css, применение которого для
печатных устройств «print» было оговорено значением атрибута «media».
Файл таблицы стилей nucss2.css, который импортируется с помощью
конструкции @import дабы скрыть его от Navigator 4.x, будет использован
при отображении страницы на любом устройстве вывода (атрибут
media=»all»). Это может быть дисплей, принтер, проектор, синтезатор
речи и так далее. Разойдясь, мы могли бы записать в таблицу стилей для
печати директивы для фонового цвета страницы и указать шрифты в
пикселях.

Статья по теме: Базовый набор плагинов для WordPress

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

Поэтому давайте немного улучшим нашу таблицу стилей для печати и решим несколько других проблем с расположением ее компонентов.

Отбеливание фонов

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

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

Если мы призовем на помощь свойство background, мы одним махом решим
обе проблемы. Чтобы сделать решение более гибким, зададим для элемента
«body» белый фон, а элементы «wrapper» и «content» пусть имеют
прозрачный фон (и тем самым через них будет проступать белый цвет
«body»):

body { background: white; } #menu { display: none; } #wrapper, #content { width: auto; margin: 0 5%; padding: 0; border: 0; float: none !important; color: black; background: transparent; }

Задание цвета переднего плана (цвет шрифта) не было абсолютно
необходимым, но лучше не забывать об этом. Итак, сейчас у нас есть два
«неплавающих» элемента (#wrapper, #content) с прозрачным фоном, и
страница — с белым фоном.

Вас может взволновать то, как Navigator 4.x обходится со значением
«transparent», но выше нос: NN4.x обращает внимание лишь на таблицы
стилей, у которых атрибут «media» имеет значение «screen». Так же как и
в случае с директивой @import, наши таблицы стилей для печати всегда
сокрыты от подслеповатых глаз Navigator 4. Так что, здесь не о чём
беспокоиться.

Размер шрифта для печати

Общая таблица стилей задаёт размер шрифта равный 11 пикселям. Весьма
неудачный выбор при печати. Само семейство шрифтов — сначала Georgia ,
а потом serif — отлично подходит для печати, так как шрифты с засечками
обычно лучше выглядят на бумаге. Необходимо изменить лишь размер
шрифта. Вот так:

body { background: white; font-size: 12pt; }

«Постойте!», — вероятно, воскликнете вы. — «Пункты — это зло!»

Что ж, да, так он и сказал, и был полностью прав — для экрана нельзя
задавать размеры шрифта в пунктах. При печати же применение пунктов
имеет такой же смысл, как и многие десятилетия назад. Раз уж мы готовим
таблицу стилей для печати, то определить размера шрифта для «body» в 12
пунктов будет правильным и естественным.

Вы, конечно, можете задать любой размер, какой пожелаете, однако
шрифт в 12 пунктов наиболее употребителен. И так как в общей таблице
стилей размеры всех остальных элементов страницы даны относительно
размера в элементе «body», наша работа закончена.

Marginalia

Существующие стилевые правила задают для левых и правых границ
(margins) элементов wrap и content размер в 5%. Это значит, что с обеих
сторон статьи будет «пустое место», и каждое такое «пустое место» будет
составлять 10% ширины области печати. Это следствие того, что блок с
текстом статьи «content» лежит внутри обрамляющего блока «wrapper», и
каждый их них имеет поля по 5% с левой и правой сторон.

Статья по теме: Яндекс.Школа вебмастеров

Исходная общая таблица стилей задаёт 15%-ный правый отступ (padding)
для блока «content». Границы уже дали нам 10%, так что нам надо
добавить ещё 5%. Это достаточно просто сделать:

div#content { margin-left: 10%; }

В другом варианте решения можно бы быть оставить границы (margin) в
покое и добавить 5% к левому отступу (padding). Так как блок «content»
не имеет видимого фона, мы получили бы такой же результат.

К сожалению, некоторые броузеры имеют проблемы с адекватной
обработкой отступов (padding), так что перемещать элементы по странице
лучше с помощью границ (margin).

Ссылки при печати

Был один хитрый вопрос — что же делать с гиперссылками? Очевидно, на
печати они не могут быть столь полезны, как на мониторе, но часто важно
дать ключ к тому, на что же они ссылались в оригинале. Итак, вот что я
изобрёл:

a:link, a:visited { color: #520; background: transparent; font-weight: bold; text-decoration: underline; }

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

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

#content a:link:after, #content a:visited:after { content: " (" attr(href) ") "; font-size: 90%; }

Попробуйте это в броузерах на платформе Gecko — Mozilla или Netscape
6.x. На распечатке после каждой ссылки вы увидите в скобках относящийся
к ней URL.

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

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

С этим новым правилом есть одна эстетическая проблема. Дело в том,
что оно предписывает дословно вставлять в документ значение атрибута
href.

Заглянув в код любой страницы с сайта «A List Apart», мы быстро
заметим там множество так называемых «относительных ссылок» вида
«/issues/144». Они будут вставлены в документ в таком виде, в каком они
есть, а хотелось бы что это были полные URL-ы.

В подобных случаях нам может помочь CSS3. Любой селектор атрибута,
использующий оператор ^=, выбирает элементы, основанные на начале их
значений атрибута. Таким образом, мы можем выбрать любой атрибут href ,
начиняющийся символом слэша, и вставить туда текст, заменяющий
существующее значение атрибута.

#content a:after { content: " (//www.alistapart.com" attr(href) ") "; }

Это правило преобразует все значения типа «/issues/144/», в
«//www.alistapart.com/issues/144/». Это правило не сможет помочь в
случае с относительными URL, которые не начинаются со слэша, но, к
счастью, ALA не использует этот тип ссылок.

ВНИМАНИЕ! ВАЖНО! Как было сказано, селектор вида ^=
относится к селекторам спецификации CSS3. Валидатор для CSS от
консорциума W3 может тестировать лишь на соответствие спецификациям
CSS1 и CSS2. Не понимая селектор, относящийся к CSS3, валидатор будет
сообщать об ошибке даже в том случае, когда селектор не противоречит
рекомендациям спецификации.

Украшаем начало страницы

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

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

Как видите, у нас есть таблица с тремя ячейками, которые расположены горизонтально. Все как у обычного сайта: слева навигация, посередине контент, а в правой части рекламные блоки или новости. Каждой ячейке был присвоен свой id. Для левой части это leftcolumn, для правой – rightcolumn, а для средней ячейки с контентом – content.

Добавляем CSS

Теперь с помощью CSS нужно указать браузеру какие стили он должен использовать для отображения элементов страницы на экране и какие он должен использовать при печати. Создаем style.css и пишем туда следующее:

Первый блок CSS-кода описывает как должны отображаться элементы страницы в браузере. Блок был взят в дополнительные фигурные скобки перед которыми мы дописали @media screen. Это дает браузеру понять что данные стили нужно применить для вывода на экран:

Так выглядит страница при просмотре в браузере

Второй блок описывает отображение тех же элементов страницы, что и первый, но в данном случае в том виде, в котором будет выглядеть документ при печати и обозначается параметром @media print. Поскольку мы хотим чтобы был напечатан только полезный контент, то мы запрещаем для отображения левую (#leftcolumn) и правую (#rightcolumn) ячейки присвоив им значение display: none.

Так выглядит распечатанная версия страницы сайта

Отдельные файлы стилей

Обьединять все в один файл стилей совсем не обязательно. Вместо этого вы можете использовать два файла стилей и при их подключении к страницам сайта указывать браузеру какой файл стилей использовать при печати, а какой для вывода на экран. Первый (для вывода на экран) определяется параметром media="screen", а второй будет использоваться для печати и определяется параметром media="print":

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

Также при печати мы строго уменьшаем ширину блока с контентом до 600px, потому как при ширине 100% принтер "обрезает" небольшую полосу текста с правой стороны страницы. Обратите также свое внимание на то, что при печати из Opera отступ по краям листа немного меньше чем в Internet Explorer и строчки текста на листе бумаги получаются шире.

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

Копирование статьи запрещено.

Это устранение ошибок под названием «дубли контента». Дублирующийся контент означает, что подобный контент отображается в нескольких местах (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. Вывод: дублирующийся контент можно исправить, и его необходимо исправить!

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

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

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

В левой части экрана присутствует боковая панель с рядом функций для редактируемой страницы:

• сохранение редактируемой страницы в форматы PDF, HTML;
• изменение размера текста, типа шрифта;
• удаление заднего фона или изображений одним нажатием кнопки мыши.

Для удобства пользователя PrintWhatYouLike предлагает поместить на панель закладок кнопку для редактирования перед печатью любой, посещенной нами страницы. Также предусмотрена опция PageZipper. Она будет удобна при чтении тех ресурсов, где любят разделить одну статью на пять, десять или более страниц. Вы жмете “Следующая страница”, еще раз “Следующая страница”, а затем понимаете, что и читать было нечего. PageZipper разложит всю статью целиком на одной странице для дальнейшего редактирования и печати. Если букмарклет ставить не хочется, то доступен плагин для Firefox PageZipper 0.6.1 .

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

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

• Перевод

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. Расшифровка сокращений