Практический HTML: улучшаем семантику ссылок. Атрибут «rel=» что собой представляет и для чего нужен
В ней освещается использование атрибутов rel и rev, а также некоторые микроформаты.
Часть HTML-тегов и атрибуты мы используем каждый день в свой работе. Заголовки, параграфы, списки и картинки являются основой разметки каждого веб-разработчика. Но наиболее распространенным элементом, наверное, будет ссылка — простой тег, который связывает воедино все страницы, создавая ту самую беспорядочную структуру, которую мы называем Всемирная Сеть Интернет (WWW).
Ссылка как она есть
Весь потенциал ссылок заключается в атрибуте href , сокращение от hypertext reference . Он создает одностороннюю связь текущей страницы с другим ресурсом, обычно другой такой же страницей в интернете:
Атрибут href находится в открывающем теге a , между открывающим и закрывающим тегами находится текст для описания ссылки:
«Ну и что», — скажите вы. — «Это я все и так знаю», — и будете абсолютно правы! Но у ссылки есть еще кое-что, кроме атрибута href .
Теория относительности (rel ativity)
Может быть, вы уже читали про атрибут rel у ссылки. Я готов поспорить, что в секции head ваших страниц будет располагаться что-нибудь типа этого:
Атрибут rel описывает связь между текущим документом и тем, на который он указывает. В этом случае, значением атрибута rel является stylesheet . Это означает, что связанный документ является таблицей стилей для текущего: между ними именно такая связь.
Еще одно распространенное употребление rel:
В данном случае связь между текущим документом и связанным — RSS-лентой — указана как alternate: альтернативное преставление текущего документа.
Оба этих примера используют тег link , но вы можете использовать атрибут rel и у обычных ссылок. Например, мы ссылаетесь на вашу RSS-ленту из секции:
Подпишитесь на мою RSS-ленту.
Вы можете добавить дополнительную информацию к этой ссылке, используя атрибут rel:
Подпишитесь на мою RSS-ленту.
Не существует определенного списка значений для атрибута rel , поэтому вы можете использовать все, что посчитаете семантически разумным. Например, если у вас сложное коммерческое веб-приложение, в котором присутствует ссылка на подсказку, то вы можете определить связь между текущей страницей и этой подсказкой, используя значение help:
нужна подсказка?
Элементарные микроформаты
Хотя вы абсолютно свободны в использовании значений атрибута rel , существует уже некоторые общепринятые значения при использовании микроформатов . Некоторые из простейших микроформатов предлагают варианты грамотного использования rel . Например, если вы ссылаетесь на лицензию, под которой опубликован данный документ, используйте микроформат rel-license :
Распространяется под лицензией Creative Commons
Эта конструкция описывает, что текущая страница ссылается на документ, помеченный как «лицензия».
Микроформат rel-tag идет немного дальше. Он используется для указания на то, что последняя часть URL"а у ссылки является «меткой» для текущего документа:
Прочитайте про семантическую верстку
В данном случае для этого документа добавлена метка «Microformats».
XFN (XHTML Friends Network) является способом описания отношений между людьми:
Drew McLellan
Этот микроформат в значительной степени расширяет возможное применение атрибута rel . Так же, как и атрибут class , rel может принимать несколько значений, разделенных пробелом:
Drew McLellan
Таким образом я указываю, что Drew мой друг, я с ним встречался, и он мой коллега (ведь мы оба фанатеем от интернета (Web monkies )).
«Мы — хотим перемен» (rev olution)
Если rel описывает связь между текущей страницей и той, на которую она ссылается, (прим.: текущая страница -> другая страница ) то rev используется для обратной зависимости: он определяет вид связи страницы, на которую ссылаются, с текущей (прим.: текущая страница <- другая страница ). Ниже приведен пример, который может быть использован в help.html:
вернуться в магазин
Атрибут rev указывает, что текущая страница является страницей помощи, подсказкой для той, на которую она ссылается.
Микроформат vote-links позволяет вам использовать атрибут rev для уточнения ваших ссылок. Например, определяя значение vote-for , вы можете указать, что ваш документ поддерживает тот, на который ссылается:
Я согласен с Richard Dawkins.
Есть и соответствующее значение vote-against . Оно означает, что хоть вы и ссылаетесь на этот документ, но вы явно указываете, что с ним не согласны.
Я согласен с Richard Dawkins
по поводу креационистов.
Естественно, ничего не мешает использовать в одной ссылке и rel , и rev:
Richard Dawkins
Разумность большинства
За легкостью использования rel и rev скрывается богатый потенциал. Они позволяет относительно легко добавить в ваши ссылки больше семантического смысла, что создает связи, которые затем могут быть обработы поисковыми роботами, агрегаторами или браузерами. Пусть вашим следующим шагом станет тесное знакомство с этими атрибутами и расширение возможностей ссылок.
В апреле, поисковик Yandex, обрадовал рунетовских веб-мастеров, включением поддержки атрибута rel=»nofollow» в ссылках. Какую пользу это нам — блоггерам принесет? Как правильно прописать атрибут rel=»nofollow» в ссылках и что теперь будет с ?
Давайте попробуем разобраться в этих новинках Яндекса.
Небольшая предыстория атрибута rel=nofollow
Что такое rel=nofollow?
Rel=» « — атрибут в ссылке , указывающий отношение ссылки к целевой странице. Также, есть еще атрибут Rev=» « , указывающий отношение целевой страницы к ссылке, например (ссылка с rev=»sponsor» указывает, что это спонсорская ссылка). Но об этом в следующей статье.
Nofollow — статус, говорящий о том,что вы не одобряете данную ссылку.
Исходя из вышесказанного:
Rel=nofollow — определяет отношение вашей ссылки к целевой странице как не одобряемое. Применительно к поисковикам, данный атрибут указывает индексирующим роботам, что по данной ссылке не следует переходить на целевую страницу.
Rel=nofollow был введен и стандартизирован в 2005 году, в ответ на многочисленный ссылочный спам, присутствующий в блогах. Инициатором введения была поисковая система Google, .
Google , встречая ссылку с данным атрибутом, не следует по данной ссылке и не передает вес PR целевым страницам. Также, данные ссылки не учитывались в расчетах распределения ссылочного веса по ссылкам страницы. Но, так было до 2010 года. На данный момент, Google, также не передает ссылочный вес и не следует по ссылкам с rel=»nofollow», но вот ссылочный вес, внутри страницы, стал распределятся и на эти ссылки но впустую. То есть, если у вашей страницы PR-10 и 10 ссылок на странице, где 5 из них закрыты, то каждая открытая ссылка передавала по 2PR на целевую страницу. Теперь каждая открытая ссылка будет передавать 1PR по открытым ссылкам и по 1PR в пустоту по закрытым. Но эта статья не о Google, вернемся к Яндексу.
Yandex, до апреля месяца 2010г., не учитывал данный статус. В рекомендациях Яндекса находим нашумевший тег
В чем разница rel=nofollow и
Так в чем же проблема?
Зачем Яндексу понадобилось вводить поддержку rel=»nofollow»?
Все дело в том, что тег . Данный тег нигде в мире, кроме самого Яндекс, не поддерживается и не стандартизирован. При проверке ресурса на ошибки в коде и поддержке web-стандартов, веб-мастера всегда получали «не валидный» код. То есть, ваш ресурс содержит ошибки. Но, спешу вас успокоить, это не критическая ошибка и практически ни на что не влияет. Для тех кому важен валидный код, вот структура, рекомендованная самим Yandex для валидности вашего кода:
Еще одна проблема тега
Атрибут со статусом rel=»nofollow»
стандартизирован и используется во всем мире для указания поисковикам, что ссылка не одобрена автором и по ней не нужно следовать.
Например, если закрыть служебную страницу от индексации в robots.txt, а ссылку оставить открытой, робот проследует на данную страницу, но не проиндексирует ее. Зачем тогда тратить ресурсы робота на переходы по ненужным страницам? Еще есть один нюанс, если на вашу служебную страницу ведут открытые ссылки с других внешних источников, то ваша, как бы закрытая страница, попадет в поиск, даже если она закрыта в robots.txt. Об этом также расскажу в следующих статьях.
Исходя из всего этого, по многочисленным просьбам и жалобам веб-мастеров, Яндекс ввел поддержку стандартизированного W3C атрибута со статусом rel=»nofollow». Атрибут закрывает ссылки от переходов роботом и не передает вес. Теперь многое стало проще. Но есть один нюанс. Анкоры ссылок будут проиндексированы как текст.
Зачем нужен
Тег очень важен, если вы хотите, чтобы часть текста, со всеми анкорами ссылок и т.д., не индексировалась и не попала в поисковую базу Yandex.
Например, у вас на странице может быть служебная информация, или блок текста с сайта, который используется как негативный пример. Вы не хотите, чтобы поисковик связал ваш сайт с данным текстом или индексировал служебную информацию и сохранил у себя в базе. Для этого данный блок обрамляется тегом .
К сожалению, такого инструмента для Google не существует. Вполне возможно, что Google или консорциум W3C в будущем обратят внимание на данный тег или придумают свой, и веб-мастера получат в свой инструментарий еще один полезный инструмент.
Как правильно прописать rel=nofollow и
- Для закрытия ссылок от индексации, с помощью rel=»nofollow»
, используется простая схема:
Ссылка на сайт
перехода по ссылке не будет. - Для закрытия блока текста тегом , со всем содержимым, в том числе и с анкорами ссылок, используется схема:
Блок вашего закрываемого текста
данный текстовый блок не будет проиндексирован в Яндекс, со всеми текстами ссылок. - Для закрытия блока текста тегом и ссылок в блоке, используется схема:
Блок вашего закрываемого текста Текст анкор ссылки Блок вашего закрываемого текста
данный блок не будет проиндексирован в Яндекс, со всеми ссылками содержащимся в данном блоке.
Что изменилось с вводом поддержки rel=nofollow?
- Для тех, кто ведет ресурсы для людей и не использует спам-продвижения, почти ничего не изменится. Возможно некоторое уменьшение числа внешних ссылок, закрытых с rel=»nofollow».
- Для тех, кто использовал в продвижении ссылочный спам (спам в комментариях, спам в форумах, соц. сетях, Википедии и т.д), и у кого основная ссылочная масса, дающая ТИЦ, состояла из таких ссылок, будет существенное снижение ТИЦ и как правило, проседание в поисковой выдаче Yandex.
Кратко, о новинках апреля 2010 года в Яндекс:
- У страницы поисковой выдачи Яндекс теперь фиксированная ширина.
- Появились в выдаче навигационные цепочки, у некоторых сниппетов и даты публикации.
- Появился колдунщик видео.
- В панели веб-мастера появилась возможность просмотра статистики по собственным ключевым словам.
P.S.
Теперь осталось дождаться включения поддержки Яндексом канонического атрибута rel=»canonical»,
о котором я писал в , и многие блогеры вздохнут с облегчением.
Хорошая новость, в конце мая 2011г. Яндекс стал учитывать атрибут rel=»canonical»
. Принесет это облегчение или нет, покажет время.
Рад приветствовать Вас на блоге сайт! В сегодняшней статье мы начнем говорить о языке гипертекстовой разметки html
. Данная публикация будет первой в своем роде (и далеко не последней), так как прежде я ничего подобного не писал.
План поста:
А вот сейчас, когда я набрал необходимые знания и проверил их на практике, с удовольствием поделюсь ими со своими читателями. Ведь недаром, сколько сил и времени на первоначальном этапе было потрачено, к примеру для того, чтобы знать, как вставить ссылку в html . Естественно, после прочтения моего поста Вы также будете это знать и уметь делать.
Вообще, стоит отметить, что теги ссылок просто необходимы в работе оптимизаторов, потому что их хлеб, это как раз поисковая оптимизация и , и естественно без ссылок гуру в области SEO скорее всего не обходятся, что уж говорить про обычных блоггеров:).
Пожалуй, html тег ссылки A является одним из моих самых используемых, на ряду, с тегом img, который необходим для вывода изображений в тексте. В среднем, в каждой публикуемой мной статье, проставляется примерно пять ссылок, как на внутренние страницы, так и на внешние.
Не стоит забывать о том, что теги для сайта html используются не только при написании постов. Также, они будут нужны при изменении кода установленного Вами шаблона на CMS WordPress или любой другой системы управления сайтом.
Поэтому, нужно изучить хотя бы самые основные html теги , чтобы в дальнейшем не иметь проблем при работе со ссылками. К примеру, если Вы пользуетесь «Визуальным редактором», когда пишите свои статьи, то это не очень хорошо, потому как, если данный редактор не будет работать, Вы даже не будете знать элементарного кода, чтобы проставить ссылку.
В общем, знание основных понятий в языке разметки html, я считаю, сильно поможет Вам и упростит жизнь. Все таки время, которые Вы потратите сейчас на изучение, возможно нового для Вас материала, не будет потрачено зря.
Также существует еще очень много нюансов, которые облегчат Вам работу, и о которых, Вы прочитаете ниже в моей статье – это и rel=” nofollow” , и target=“_ blank” , и много еще чего интересного связанного со ссылками.
Тег ссылки А – создаем гиперссылку в html документе с анкором и без него
Как я уже выше успел заметить, ссылка один из самых используемых мною html тегов. Нужны они для того, чтобы пользователи могли без особых усилий из одного документа переходить на другой с помощью одного щелчка мышкой.
Однако, чтобы указать путь гиперссылке, нужно обязательно использовать атрибут href . Благодаря ему можно и нужно указывать URL страницы, на которую Вы хотите сослаться. Это могут быть как внутренние страницы Вашего сайта, так и страницы любого другого ресурса во всемирной паутине.
Анкор html тега ссылки А весомый фактор, который учитывают поисковые роботы, поэтому на него нужно обратить особое внимание. Я рекомендую использовать в анкоре ключевые слова, по которым Вы хотите, чтобы Ваша статья попала на первые позиции в выдаче.
Разобравшись немного с теорией гиперссылок в html документе, можно приступить и к наглядным примерам. Вот такой код будет иметь ссылка:
Как видите, ссылка начинается с открывающейся скобки «<», затем идет html тег A, после него должен быть обязательный атрибут href и знак равенства. Далее, следуют две скобки следующего типа – «”», между ними нужно указать URL адрес ссылающегося ресурса, при использовании «http://». Затем, нужно указать анкор ссылки и в конце концов закрыть тег ссылки А при помощи «».
Также, я советую Вам использовать безанкорные ссылки, так как, если на Ваш ресурс будут вести только гиперссылки с анкором это может вызвать вопросы у поисковых систем и привести к плохим последствиям. Наверняка, Вы слышали о нашумевшем алгоритме Google, который имеет устрашающее название Пингвин:).
Открытие ссылки в новом окне. Атрибут target _blank
Что же, с html тегом А разобрались, но это еще не все. Существует еще множество атрибутов, которые будут полезны Вам при работе со ссылками. Один из них – атрибут target _blank .
Нужен он для того, чтобы вставленная Вами в html документ ссылка открывалась в новом окне интернет-браузера. Это очень полезно, когда Вы пишите одну объемную статью и ссылаетесь на свои прошлые публикации. Таким образом, читаемая страница пользователем остается открытой, а ссылки открываются уже на других вкладках в браузере.
Target blank в html используют очень часто так, как это помогает, в плане поведения посетителей на Вашем сайте, то есть влияет на его поведенческие факторы. Поэтому, если Вы до сих пор не используете атрибут target с параметром _blank, рекомендую очень внимательно прочитать данный раздел.
Как Вы могли заметить, особой разницы, где будет проставлен необходимый атрибут – нет, так как их порядок не имеет значения внутри html тегов.
Атрибут rel nofollow и тег noindex. Закрываем ссылку от индексации
Приступим к работе с атрибутом ссылок rel в html документе. Данный атрибут с параметром nofollow служит для того, чтобы не передавать вес Вашей страницы на какую-либо другую.
Как известно в любой страницы, даже в только, что созданной и не имеющей внешних ссылок с других ресурсов есть свой вес, который выше нуля. Пользователи не могут этого видеть, но вот поисковые системы это все учитывают.
Поэтому, чтобы внутренний вес Ваших страниц не уплывал от Вас, некоторые ссылки нужно заключать атрибутом rel nofollow . Ссылки, включающие в себя, данный атрибут не будут передавать вес другим сайтам.
Естественно, атрибут rel nofollow не стоит использовать, когда Вы ссылаетесь на внутренние страницы Вашего сайта, так как грамотная внутренняя перелинковка залог успешной оптимизации ресурса и дальнейшего его развития.
Я использую вышеупомянутый атрибут только, если ссылаюсь на внешние сайты. К примеру, как Вы могли заметить, часто в конце своих статей я предлагаю постетилям стать моим читателем в твиттере (), и даю ссылку на свой аккаунт, естественно эту ссылку я заключаю в rel nofollow. Выглядит это следующим образом:
Опять таки, где будет размещен rel с параметром nofollow, перед атрибутом href или после него, не имеет значения. Также в таких ссылках не стоит прописывать ключевые слова в анкоре, так как это не имеет никакого смысла, ведь мы предварительно делаем ссылку nofollow , а значит она не передает вес.
Теперь стоит обсудить тег noindex . Он служит для того, чтобы поисковые роботы не индексировали не нужные элементы страницы. При чем, это касается не только гиперссылок, но и определенных участков текста.
Кстати, я зайдя на любой сайт сразу вижу, где гиперссылка закрыта от индексации, а где наоборот открытая. Все благодаря, отличному дополнению для браузера Opera . Также, с помощью данного плагина я могу отслеживать и другие параметры ресурсов, такие как , а также AlexaRank.
Ссылка якорь и как ее сделать. Атрибут Name
А сейчас я, возможно, для многих открою весьма занимательную вещь при работе со ссылками. Лично я узнал о ней лишь после того, как более полугода пользовался WordPress. Так вот, сейчас речь пойдет о якоре ссылок .
Благодаря ему, а также при использовании хэш-ссылки , можно ссылаться не просто на какую-то статью, но и на место в ней, которое необходимо, то есть на определенный участок текста. Это ннужно, когда публикация очень объемная и найти на ней нужную информацию будет затруднительно.
Сначала, нужно в статье, на которую Вы хотите сослаться выбрать участок текста, до которого будет прокручиваться страница в интернет браузере. То есть, если Вы даете ссылку, допустим о настройке (не является примером якоря), то и атрибут name должен размещаться в необходимом участке публикации.
Как видите, атрибут name не имеет анкора, так как якорь состоит из открывающегося и закрывающегося тега A. Параметр атрибута Вы должны задать сами, указывается он после знака равенства и скобок, как показано выше на примере.
Теперь непосредственно в новом посте нужно указать хэш-ссылку, используя заранее приготовленный якорь. Таким образом, ссылка будет открывать сразу то место в тексте, которое необходимо. Данная хэш-ссылка будет иметь следующий вид:
После этого читатели Вашего сайта смогут, переходя по таким ссылкам, добираться сразу до определенного участка на странице.
Что же, на этом у меня все, если возникли какие-либо вопросы, задавайте их в комментариях. Отмечу, что эта не последняя статья по html, в обозримом будущем будут еще публикации на эту тему.
Видео-эпилог: художник очень быстро рисует картины на стекле
Продолжая изучать язык HTML версии №5, содержание этой статьи будет посвящено понятию "ссылочные отношения". Обозначается система ссылочных отношений так: link relations . Что это такое? Это расширенное понимание ссылки. Так, если обыкновенная ссылка указывает путь к адресу ресурса, картинки или почты, то применение атрибута rel расширяет понимание ссылки, объясняя, почему именно эта конкретная ссылка отсылает нас к определенному адресу. Система отношений довольно обширна, и сегодня будут рассмотрены все возможные ее варианты. Реконструкция новой версии HTML затронула как систему link relations, так и атрибут rel.
Для более упрощенного понимания отношений link relations можно обрисовать ситуацию следующим образом: ссылка ведет нас к ресурсу, а атрибут rel объясняет нам, почему ссылка ведет к этому адресу. Ссылаться можно потому, что на данном ресурсе находится, например, файл стилей, который нужно задействовать с документом. Следующая причина – сайт, на который ведет ссылка, является лентой новостей RSS (это объединение нескольких XML-форматов, которые необходимы для отображения новостных лент, статей и их анонсов), которая наполнена тем же содержанием, что и документ (страница), но отображается в стандартном формате для подписки на RSS-новости. Также адрес может представлять языковый перевод этой страницы или быть её версией PDF. Ссылочные отношения применяются также, если ссылка ведет на последующие страницы электронной книги.
Помимо этого, разработаны еще несколько направлений в ссылочных отношениях. Гиперразметка HTML рассматривает отношения link relations в двух направлениях. Создание двух этих категорий происходит при помощи атрибута link . Первое направление содержит ссылки, ведущие на внешние веб-ресурсы, по определению включающиеся в документ. Второе направление – это гиперссылки на другие страницы. То есть, каждая ссылка ведет себя так, как указывает ей заданный атрибут rel . Ниже приведены несколько наглядных примеров:
Стандартный способ обращения к каскадным таблицам стилей CSS — , указывающий, что данная таблица стилей должна подключаться к документу для правильного его отображения.
Гиперссылка – внутренняя ссылка страницы. Переход по таким ссылкам необязателен, потому что к адресующимся страницам можно добраться и другим путем, а данная страница со ссылками будет правильно отображаться в браузере и без таких ссылок. Значение атрибута rel выглядит так:
или
Первый вариант выполняет подключение файлов стилей, второй же – обнаруживает новостную ленту RSS, представленную в Atom формате. Некоторая часть таких ссылочных отношений создавалась еще в стандарте HTML4, а некоторые – в microformats community. Задача пятой версии HTML в том, чтобы объединить в одно понимание все созданные ранее значения атрибута rel и стандартизировать их для более простого понимания всеми существующими браузерами. Также возможны варианты новых определений ссылочных отношений.
Как применяется rel-атрибут на практике? Зачастую этот атрибут работает вместе с тегом в боксе head. Некоторая часть атрибутов отношений может быть применена к обыкновенным гиперссылкам с употреблением тега <а>. Возможности языка HTML5 расширили возможности атрибута до использования его в элементе .
Такое определение в языке HTML5 также претерпело некоторые изменения. К примеру, если применять определение rel=alternate вместе с атрибутом type, то это будет будет обозначать другой формат того же содержания документа.
rel=alternate плюс type=application/rss+xml или rel=alternate плюс type=application/atom+xml обозначает новостную ленту формата Atom или RSS. Перевод страницы на другой язык также указывается при помощи rel=alternate. В HTML5 для осуществления этого варианта применяется пара hreflang плюс rel=alternate .
При помощи атрибута rel=archives документ определяется, как представляющий архивный, или временной интерес. То есть, такая ссылка ведет к, например, архивным статьям с атрибутом rel=archives или каким-либо старым записям на сайте, которые в силу объективных причин визуально уже не отображаются на странице, но имеются в архивных документах. Этот атрибут также был разработан специально для HTML5.
Для того, чтобы обозначить авторство конкретной статьи, применяется атрибут rel=author . Направленное применение имеет в адресации на форму контактов на сайте или форму обратной связи. В HTML3 вместо этого атрибута использовался rev=made , который был более ограничен в возможностях.
Применение атрибута rel=external указывает на то, что документ, на который адресует нас ссылка, является частью другого ресурса. В WordPress данный атрибут весьма широко применяется в комментариях. Также разработан специально для HTML5.
Такие атрибуты, как rel=first, next, up, last, prev , появились только в языке версии 4. Предназначение этих атрибутов – связывать в одно целое части документов – несколько страниц или разбитую на несколько частей одну страницу. Для пятой версии HTML добавили атрибут rel=first , указывающий на начальную страницу документа, а также по-прежнему поддерживаются атрибуты rel=prev и rel=next , и добавлен rel=previous . На последнюю страницу документа указывает атрибут rel=last .
Для ассоциации иконки сайта с его содержимым используется атрибут rel=icon. Вы замечали, что рядом с адресной строкой высвечивается иконка сайта? Это работа следующей строчки:
Данная ссылка – коммерческого характера – говорит атрибут rel=nofollow . Также он применяется для того, чтобы показать игнорирование данной ссылки автором документа. Это нововведение было применено компанией Google и приведено к стандартам microformats community. Разработан этот атрибут был для того, чтобы противостоять ссылкам спамеров в комментариях. То есть, данный атрибут не передавал PR страницы, и пользоваться такими ссылками было бессмысленно. В настоящее время многие блоггеры используют атрибут rel=nofollow для проставления комментаторских ссылок.
В этой статье мы ознакомились практически со всеми атрибутами, которые на данный момент применяются в языке HTML5. В данной версии языка есть еще несколько атрибутов, но с другими версиями HTML они не стандартизированы.
