Нововведенные атрибуты в HTML и их назначениеи применение. Практический 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 они не стандартизированы.
Секреты оптимизации сайтов заключаются не только в их продвижении по ключевым запросам, заботе о юзабилити и увеличении трафика, но и в правильном использовании html-кода. Правильное применение тегов и их атрибутов часто помогает избежать многодневной работы. Есть популярные и эффективные приемы. Наверное, в SEO-оптимизации нельзя отделить друг от друга атрибуты rel nofollow и тег noindex. Поэтому в этой статье пойдет речь и о том и о другом, а также о том, для чего они нужны, стоит ли их ставить рядом и в каких случаях ими пользоваться, а когда этого делать не стоит.
Индексирование страниц и их вес
Один из важнейших параметров попадания сайта в ТОП 10 поисковых систем - вес его страниц. Именно они попадают в первую выдачу Яндекса и Google, а за ними и интернет-порталы. Вес каждой из них повышается за счет ссылок - как внешних, так и внутренних. Понимать, как происходит процесс распределения этого параметра между страницами своего сайта и интернет-проектами, ссылки которых размещены на собственном ресурсе, важно каждому веб-мастеру.
Куда уходит вес
Рассмотрим элементарный пример. Допустим, что в главном тексте расположены две ссылки, ведущие на другие публикации. Изначально присвоим каждой странице вес равный 1. При индексации поисковый робот учтет обе ссылки. При этом вес главной страницы уменьшится на коэффициент равный 0,85. Несложно подсчитать, сколько получат публикации, на которые ведут ссылки: 0,85/2=0,425.
Алгоритм этот не является точным и официальным расчетом поисковых систем. Он изложен для того, чтобы читателю в общих чертах было понятно распределение такого параметра, как вес страницы. Когда его значение ясно, легче воспринимать информацию о том,
Скрыть ссылки от поисковых роботов
Конечно, любой сайт создается с целью получить какую-либо прибыль с него. И вес каждой страницы ценится веб-мастером. Но не размещать в своих публикациях невозможно. На это есть причины, и вот несколько из них:
Покупка и продажа ссылок приносит прибыль;
Повышается посещаемость интернет-проекта.
Существует мнение, что атрибут тега a - rel nofollow поможет скрыть анкоры от поисковых роботов и при этом вес страницы сохранится. Но это утверждение возможно только при правильном написании кода. Точное написание этого атрибута выглядит так:
>анкор.
Правильная перелинковка только придает сайту вес и повышает его ранжирование. Излишне говорить, что для внутренних ссылок нет нужды использовать a href rel nofollow.
Пример использования
Объяснение в общих чертах не всегда открывает полную картину важности применения тех или иных тегов и их атрибутов. Скрыть ссылку, не отдать вес страницы своего сайта другому. Что это? Просто жадность? Нет, это далеко не так. К примеру, на многих сайтах есть кнопки социальных сетей. Согласитесь, что их траст и так велик. Коды социальных кнопок с сохранением веса собственных страниц прописываются с использованием атрибутов target blank, rel nofollow. Первый из них после клика приведет посетителя на сторонние интернет-ресурсы, открыв еще одну вкладку браузера. Второй - не позволит уменьшить вес страницы. Например, для кнопки социальной сети Twitter это будет выглядеть так:
a rel=”nofollow”target=”_blank”href=”URL/home/.
Стоит оговориться о валидности кода - соблюдении всех технических требований html-разметки. Тег rel external nofollow не только не хуже заменяет атрибут target_blank, но и лучше воспринимается роботами поисковых систем.
A rel href nofollow, или Когда он еще нужен
Скрытия от поисковиков ссылок на «плохие» или нетематические сайты;
Того, чтобы спрятать большое количество адресов на сторонние ресурсы;
Скрытия ссылок в случае, если веб-мастер ими торгует;
Непередачи веса мегапопулярным порталам, таким как Яндекс или Google;
Скрытия ссылок в комментариях.
Nofollow спасает сайты, а особенно блоги от спама. Непроверенные ссылки, закрытые таким атрибутом, будут все реже и реже появляться в комментариях.
Noindex, и почему о нем стоит говорить
Запрет индексирования можно задать не только на ссылке внешние и внутренние, но и на отдельные элементы текстов, а также страницы целиком. Для этого веб-мастера используют тег noindex. Скрывает он только тексты. К картинкам и фотографиям не применим. Ссылки же, которые успешно прячет rel nofollow, noindex утаить от поисковых систем не может. Анкоры робот не увидит, а вот адреса проиндексирует. Noindex обычно используют для скрытия части контента:
С нецензурными выражениями;
С неуникальным текстом;
Тег, безусловно, использовать нужно. Но работает он не на каждом движке. Дело в том, что noindex не валиден, то есть не соответствует стандартам. Именно поэтому одна из самых популярных платформ для ведения блогов WordPress «выкидывает» тег из своего кода. Секрет валидности заключается в применении нескольких знаков. . Написав код в таком виде, можно быть уверенным, что страницы блога на WordPress Яндекс не проиндексирует.
Совместное использование
Стоит ли прописывать и тег, и атрибут в коде страницы? Ничего не мешает использовать noindex и a rel nofollow в паре. Тег не мешает атрибуту, и наоборот. Ставят их рядом потому, что поисковые системы по-разному видят код сайта. Например, при использовании и тег, и атрибута веб-мастер может быть уверен, что анкор робот Яндекса не распознает, как и не увидит и саму ссылку. Google же увидит текст, но вес не передаст сторонним страницам других сайтов.
Специально для новичков
Оптимизация сайтов - новая на рынке труда и интересная работа. Отсутствие системно спланированных информационных ресурсов для новичков значительно усложняет их деятельность. И естественно, молодые веб-мастера совершают ошибки. Кто-то наполняет контент безумным количеством ссылок, кто-то оставляет страницы вообще без одной. Та же картина в случае с расстановкой тега noindex и атрибута rel nofollow.
Стремление вывести сайт в ТОП поисковых систем является причиной совершения критической ошибки. Дело в том, что новички часто закрывают внешние ссылки и тегом, и атрибутом. Это в какой-то степени действительно сохраняет вес каждой страницы сайта. Но правда и в том, что те же внешние ссылки повышают доверие со стороны поисковых систем. Компенсировать потерю веса можно продвижением по низко-, и среднечастотным запросам.
Любому оптимизатору стоит помнить, что любая информация будет восприниматься читателями с большим доверием в случае возможности перейти по ссылке к ее источнику. Наверняка сами веб-мастера вряд ли возьмут на вооружение книгу или брошюру, в которой отсутствует список используемой литературы.
Все больше пользователей Интернета ориентируется на авторитетные источники. И если молодой сайт не будет ссылаться на их мнение, то ему будет намного сложнее удержать читателей, привлечь подписчиков. Само собой это негативно повлияет на оптимизацию ресурса по Так стоит ли слепо использовать атрибуты rel nofollow?
Хороший веб-мастер заботится о своем читателе. Помнит, что одна из основ Интернета - это ссылки на авторитетные ресурсы, предоставляющие достоверную информацию. Сайты, сделанные для людей, поисковики «любят». И вес страниц не единственный параметр, по которому страницы с контентом попадают в ТОП. По 800 параметрам Яндекс оценивает интернет-проекты.
И в конце концов, вес страниц имеет значение только для публикаций, получивших его от ссылок со сторонних сайтов. Как показывает опыт, доноры, оставив этот параметр ранжирования себе, не поднимаются по нему выше в «глазах» поисковых систем.
Ноуфоллоу!
В данной заметке напишу о таком «популярном» атрибуте ссылок (тегов .. ), как rel=nofollow . Кратко я упомянул о нём в статье « «.
Вообще, на самом деле атрибутом является rel , а nofollow — это лишь одно из его значений. Также как, например, author и другие. Но так уж повелось, что просто говорят «атрибут nofollow» и всё.
С английского «no follow» буквально переводится как «не следовать» . Фактически, это указание поисковым роботам (появилось в 2005 году) не следовать (т.е. не переходить) по адресу, указанному после href= в HTML-теге ссылки. Например, сайт Яндекса — указание роботу не заходить на сайт Яндекса.
Смысл атрибута rel=nofollow
Смысл здесь простой: показать поисковикам, что сайт, на который вы ставите ссылку, не пользуется вашим доверием . Звучит несколько абстрактно, но суть в том, что если ресурс, на который вы ссылаетесь, не так хорош, как ваш, то вашему ресурсу от этого плохо .
«Плохо» — это означает то, что вам будет не очень просто и весело.
Кроме того, это один из способов защиты . Ведь ссылка с проставленным атрибутом nofollow не передает ссылочный вес и не влияет . Поэтому-то на всех биржах по продаже ссылок (как вечных, так и с месячной оплатой) покупаются ссылки без этого атрибута. И поэтому же можно приписывать ноуфолоу к — для манипуляций с ссылочным весом.
Например, всем известная Wikipedia в своё время позволяла оставлять авторам прямые ссылки (не закрытые от индексации) на любой сайт. Т.к. у Википедии , то её начали спамить — для наращивания ссылочной массы — и качество статей на ней ухудшилось. Вот и пришлось закрыть ссылки, добавив к ним атрибуты rel nofollow.
Точно ли поисковые роботы не переходят по ссылкам с nofollow?
В сети можно встретить разговоры о том, что на самом деле роботы поисковиков «бегают» по таким ссылкам . На самом деле если и бегают, то плохого от этого ничего нет — ведь для них есть указание не воспринимать подобные ссылки. Так что можно не беспокоиться и не придумывать редиректы и т.п для всех . Лучше посмотреть видео из первоисточника.
Как Google относится к сайтам, где все внешние ссылки закрыты атрибутом nofollow:
В общем, нормально относится и вес по ссылкам не передаётся, влияния на ранжирование они не оказывают.
Nofollow в Яндекс
Yandex стал учитывать этот атрибут относительно недавно и раньше вебмастерам, при закрытии ссылок, приходилось принимать во внимание как «предпочтения» Гугла, так и Яндекса. Но теперь можно закрывать ссылки универсальным способом — через rel=nofollow.
Вообще, все актуальные на данный момент поисковые системы — Google, Яндекс, Bing.com ну и Mail.ru — правильно воспринимают атрибут nofollow и можно не «подстраиваться» под каждую из них в отдельности.
Стоит отметить, что в последнее время идёт некая стандартизация поисковых механизмов. Конечно, в «глубине души» поисковики очень разные, и выдачи могут совсем уж сильно различаться. Но это как у автомобилей — и BMW и Toyota ездят на бензине, например, стандартной марки АИ-95, а не каждый на своём собственном .
Рад приветствовать Вас на блоге сайт! В сегодняшней статье мы начнем говорить о языке гипертекстовой разметки 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, в обозримом будущем будут еще публикации на эту тему.
Видео-эпилог: художник очень быстро рисует картины на стекле