Я корь на странице
Содержание статьи
Ссылки и изображения
HTML
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<title>Сайт начинающего верстальщика</title>
<link rel=»stylesheet» href=»style.css»>
</head>
<body>
<header>
<p>Блог</p>
<nav>
<a href=»index.html»>На главную</a>
</nav>
</header>
<main>
<article>
<h2>День тринадцатый. Нашёл статью</h2>
<p>Решил, что полезно будет.</p>
<h2>Зачем нужны заголовки?</h2>
<!— Добавьте идентификатор content этому заголовку —>
<h3>Оглавление</h3>
<ul>
<li>
<!— Добавьте адрес #intro этой ссылке —>
<a>Введение</a>
</li>
<li><a>Заголовки и неявные секции</a></li>
<li><a>Тег section</a></li>
<li><a>Уровни заголовков</a></li>
<li><a>Не всё так просто</a></li>
</ul>
<article>
<!— Добавьте идентификатор intro этому заголовку —>
<h3>Введение</h3>
<p>Когда много лет назад придумали HTML, мир был совсем другим. Авторы спецификации вдохновлялись текстовыми документами, где в одном потоке подряд шли абзацы, списки, таблицы, картинки и конечно заголовки. Прямо как в ваших рефератах и курсовых: самый большой заголовок — название, заголовки поменьше — части или главы.</p>
<h3>Заголовки и неявные секции</h3>
<p>В HTML с тех пор шесть уровней заголовков: от h2 до h6. Они озаглавливают всё, что за ними следует и образуют, так называемые, неявные секции. Такие логические части страницы. Неявные они потому, что закрываются только когда появляется следующий заголовок.</p>
<pre><code><h2>Еда</h2>
<h2>Фрукты</h2>
<p>Классные</p>
<h3>Яблоки</h3>
<p>Вообще</p></code></pre>
<p>Из-за такой системы неявных секций, спецификация настойчиво рекомендует не использовать элементы h* для подписей под заголовками. Это обычный параграф, а заголовок должен обозначать отдельную часть содержимого. В спецификации есть глава с примерами разметки сложных элементов: подписи, крошки, диалоги — почитайте.</p>
<h3>Тег section</h3>
<p>Но секции лучше задавать явно с помощью элемента section. Эти два фрагмента идентичны с точки зрения семантики, но этот гораздо понятнее, хоть и многословнее.</p>
<pre><code><h2>Еда</h2>
<section>
<h2>Фрукты</h2>
<p>Классные</p>
<section>
<h3>Яблоки</h3>
<p>Вообще</p>
</section>
</section></code></pre>
<h3>Уровни заголовков</h3>
<p>Ладно! Раз у нас есть явные секции, то по вложенности легко определить отношение частей. Так может браузеры сами догадаются какого уровня заголовки нужны? А то считать: h2, h2, аш… сбился. Так было бы удобнее менять части кода местами. Такая же идея пришла в голову авторам HTML5 и они описали в спецификации алгоритм аутлайна. Он разрешает использовать на странице только h2, а важность обозначать вложенностью структурных элементов вроде article и section.</p>
<pre><code><h2>Еда</h2>
<section>
<h2>Фрукты</h2>
<section>
<h2>Яблоки</h2>
</section>
</section></code></pre>
<p>Разработчикам идея очень понравилась, многие даже бросились её внедрять. Но вот беда: алгоритм аутлайна до сих не внедрил ни один браузер, читалка или поисковик. На таких страницах все заголовки кричат, что они №1 и самые важные. Но если важно всё, то уже ничего не важно.</p>
<p>Не надо так делать, об этом теперь пишет сама спецификация. За уровнем заголовков нужно следить самим. На самом деле, это не так сложно: на типичной странице вряд ли наберётся структурных частей больше, чем на 3 уровня. Так что не ленитесь.</p>
<h3>Не всё так просто</h3>
<p>Нет, погоди. Я ставлю класс на div и все сразу видят — это самый большой заголовок, ставлю другой класс — заголовок становится меньше, видно же. Зачем тогда эта ерунда с расчётом уровней, если есть CSS?</p>
<pre><code><div class=»big-black»>
Фрукты бесплатно
</div>
<div class=»small-grey»>
Только за деньги
</div></code></pre>
<p>Вы конечно правы, стили создают визуальную модель важности: крупный чёрный текст важнее, меленький серенький вообще не важен. Но только если вы смотрите на такую страницу.</p>
<p>Есть две важные группы пользователей, которые читают вашу страницу по тегам разметки. Они не смотрят насколько крупный и чёрный ваш div — чтобы найти на странице самое важное, они ищут h2. Это читалки и роботы. С роботами всё понятно: это поисковики, которым нужно помогать понимать ваши страницы.</p>
<p>Читалками или скринридерами пользуются люди, которые плохо или совсем не видят ваши интерфейсы, или не могут управлять браузером привычным образом. VoiceOver, NVDA, JAWS читают содержимое вслух и ориентируются только по значимым тегам. Элементы div и span не значат ни-че-го, какие бы классы и стили вы не накрутили. Такой сайт — как газета без заголовков, просто месиво текста.</p>
<p>Да какая газета! Очнись, 2017 на дворе, я изоморфное одностраничное приложение делаю, а не стенгазету. У меня тут стейты компонентов — нафига семантика там, где нет текста? Очень хороший вопрос.</p>
<p>Все читалки идут по странице тег за тегом, от первого к последнему. И читают подряд всё, что внутри. Крайне неэффективно: каждая страница начинается с шапки и пока её пройдёшь, забудешь за чем шёл. Поэтому у читалок есть специальные режимы, показывающие только важные части страницы. Структурные элементы header, nav, main и другие, все ссылки, все заголовки.</p>
<p>Если вывести все заголовки и прочитать их, можно составить ментальную, а не визуальную модель страницы. А потом взять и сразу перейти к нужной секции, выбрав её заголовок. Меню, поиск, каталог, настройки, логин — все эти части вашего приложения можно озаглавить, чтобы упростить доступ к ним.</p>
<pre><code>— Инстаграм
— Лента
— Закат
— Латте
— Настройки
— Профиль</code></pre>
<p>Но бывает, что в дизайне нет заголовков для важных частей. Дизайнер рисует, ему всё ясно: меню с котлетой, поиск с полем и так далее. Но это не должно мешать вам делать доступные интерфейсы. Расставьте нужные заголовки, а потом доступно их спрячьте. Как? Только не display: none, его читалки игнорируют. Есть такой паттерн visually hidden, подробнее в описании к видео.</p>
<p>Думайте не только о том, как выглядит ваша вёрстка, но и о том, насколько логично организована разметка. Не забывайте о заголовках: пусть стили показывают, а заголовки рассказывают о ваших страницах или приложениях.</p>
<p>
<!— Добавьте адрес #content этой ссылке —>
<a>К оглавлению</a>
</p>
</article>
</article>
<aside>
Тут могла быть ваша реклама
</aside>
</main>
<footer>
Подвал сайта
</footer>
</body>
</html>
Источник
Как правильно использовать якоря html?
ÐдÑавÑÑвÑйÑе, дÑÑзÑÑ!
ÐавайÑе более деÑалÑно ÑаÑÑмоÑÑим ÑкоÑÑ HTML и оÑобенноÑÑи Ð¸Ñ Ð¸ÑполÑзованиÑ.
ЯкоÑÑ HTML пÑедÑÑавлÑÑÑ Ñобой ÑÑÑлки на опÑеделÑннÑе блоки на ÑÑÑаниÑе. Ðни оÑÐµÐ½Ñ ÑаÑÑо пÑименÑÑÑÑÑ Ð½Ð° ÑÑÑаниÑÐ°Ñ Ñ Ð±Ð¾Ð»ÑÑим колиÑеÑÑвом ÑекÑÑа Ð´Ð»Ñ Ð±Ð¾Ð»ÐµÐµ Ñдобной навигаÑии. ЯкоÑнÑе ÑÑÑлки HTML ÑаÑе вÑего пÑименÑÑÑ Ð´Ð»Ñ ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ñ Ð¼ÐµÐ½Ñ Ð½Ð° Ð»ÐµÐ½Ð´Ð¸Ð½Ð³Ð°Ñ , а Ñак же Ð´Ð»Ñ Ð½Ð°Ð²Ð¸Ð³Ð°Ñии по ÑÑаÑÑе.
Ðак поÑÑавиÑÑ ÑкоÑÑ Ð² HTML?
- 1.ÐÑкÑÑваем HTML код ÑÑÑаниÑÑ Ð² лÑбом Ñдобном Ð´Ð»Ñ Ð²Ð°Ñ ÑедакÑоÑе кода и Ð½Ð°Ñ Ð¾Ð´Ð¸Ð¼ ÑÐ¾Ñ ÑÑÐ°Ð³Ð¼ÐµÐ½Ñ ÑекÑÑа или блок, к коÑоÑÐ¾Ð¼Ñ Ð´Ð¾Ð»Ð¶ÐµÐ½ оÑÑÑеÑÑвлÑÑÑÑÑ Ð¿ÐµÑÐµÑ Ð¾Ð´.
- 2.ÐÑли в ÑÑом меÑÑе ÑÑÑаниÑÑ Ñже еÑÑÑ ÐºÐ°ÐºÐ¾Ð¹ Ñо Ñег, Ñо нам нÑжно допиÑаÑÑ ÐµÐ¼Ñ Ð°ÑÑибÑÑ ID и в кавÑÑкаÑ
ÑказаÑÑ ÑникалÑное Ð¸Ð¼Ñ Ð½Ð°Ñего ÑкоÑÑ, в моÑм пÑимеÑе ÑÑо block1.
<div id=»block1″>
ÐÑÐ¸Ð¼ÐµÑ ÑекÑÑа
</div>
- 3.Так же вмеÑÑо аÑÑибÑÑа ID можно иÑполÑзоваÑÑ Ð°ÑÑибÑÑ name
ÐÑÐ¸Ð¼ÐµÑ ÑекÑÑа
- 4.ÐÑли в Ñом меÑÑе, где Ð²Ñ Ñ
оÑиÑе ÑазмеÑÑиÑÑ ÑкоÑÑ Ð½Ðµ ÑÑÐ¾Ð¸Ñ Ð½Ð¸ÐºÐ°ÐºÐ¾Ð³Ð¾ HTML Ñега, Ñо нÑжно его допиÑаÑÑ. ÐбÑÑно нÑжнÑй ÑÑÐ°Ð³Ð¼ÐµÐ½Ñ ÑÑÑаниÑÑ Ð¾Ð±Ð¾ÑаÑиваÑÑ Ð² Ñег div или span.
<span id=»yakor»>ТекÑÑ, на коÑоÑÑй бÑÐ´ÐµÑ Ð¸Ð´Ñи пеÑÐµÑ Ð¾Ð´ </span>
Ðли же пÑоÑÑо ÑÑавÑÑ Ð¿ÑÑÑой HTML Ñег без ÑодеÑжимого.
РболÑÑинÑÑве ÑлÑÑаев в ÑовÑеменной вÑÑÑÑке иÑполÑзÑÑÑ Ð·Ð°Ð´Ð°Ð½Ð¸Ðµ ÑкоÑÑ Ð² HTML пÑи помоÑи аÑÑибÑÑа ID, однако еÑÑÑ Ð´Ð²Ð¸Ð¶ÐºÐ¸ или оÑделÑнÑе модÑли, Ð´Ð»Ñ ÑабоÑÑ ÐºÐ¾ÑоÑÑÑ Ð¿ÑинÑипиалÑно важно ÑÑÐ¾Ð±Ñ Ð¾Ð½ бÑл задан ÑеÑез аÑÑибÑÑ name.
Ðак вÑÑÐ°Ð²Ð¸Ñ ÑкоÑнÑÑ ÑÑÑлкÑ?
ÐÐ»Ñ ÑÑого пиÑем код обÑÑной ÑÑÑлки и в аÑÑибÑÑе href ÑÑавим ÑнаÑала Ñимвол #, а заÑем пиÑем Ð½Ð°Ð·Ð²Ð°Ð½Ð¸Ñ ÑкоÑÑ, коÑоÑÑй Ð¼Ñ Ð·Ð°Ð´Ð°Ð»Ð¸ Ñанее.
<a href=»#yakor»>ТекÑÑ ÑкоÑной ÑÑÑлки HTML</a> |
ÐоÑле ÑÑÐ¸Ñ Ð½ÐµÑ Ð¸ÑÑÑÑ Ð¼Ð°Ñ Ð¸Ð½Ð°Ñий Ñ HTML кодом пÑи клике на Ñозданной вами ÑÑÑлке ÑÑÑаниÑа должна пÑокÑÑÑиваÑÑÑÑ Ðº ÑÐ¾Ð¼Ñ Ð±Ð»Ð¾ÐºÑ, коÑоÑÐ¾Ð¼Ñ Ð¿ÑиÑвоен аÑÑибÑÑ ID или name, ÑказаннÑй в ÑÑÑлке.
Ðак вÑÑÐ°Ð²Ð¸Ñ ÑкоÑнÑÑ ÑÑÑÐ»ÐºÑ Ñ Ð¿ÐµÑÐµÑ Ð¾Ð´Ð¾Ð¼ на дÑÑгÑÑ ÑÑÑаниÑÑ?
ÐÑи иÑполÑзовании ÑкоÑей HTML Ð´Ð»Ñ ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ñ Ð½Ð°Ð²Ð¸Ð³Ð°Ñии ÑаÑÑо Ð²Ð¾Ð·Ð½Ð¸ÐºÐ°ÐµÑ ÑиÑÑаÑиÑ, когда вам нÑжно наÑÑÑоиÑÑ Ð¿ÐµÑÐµÑ Ð¾Ð´ к ÑкоÑÑ, коÑоÑÑй Ð½Ð°Ñ Ð¾Ð´Ð¸ÑÑÑ Ð½Ð° дÑÑгой ÑÑÑаниÑе. Ð ÑÑаÑÑÑÑ, Ñакое Ñоже возможно!
ÐÐ»Ñ ÑÑого нам нÑжно вÑего лиÑÑ Ð² аÑÑибÑÑе ÑÑÑлки href ÑказаÑÑ ÑнаÑала название ÑÑÑаниÑÑ, на коÑоÑÑÑ Ð½Ñжно пеÑейÑи, поÑом поÑÑавиÑÑ Ð·Ð½Ð°Ðº # и ÑказаÑÑ Ð½Ð°Ð·Ð²Ð°Ð½Ð¸Ðµ нÑжного ÑкоÑÑ.
//impuls-web.ru/uslugi#yakor |
ÐÑобенноÑÑи иÑполÑÐ·Ð¾Ð²Ð°Ð½Ð¸Ñ ÑкоÑей HTML
- 1.ÐÑи клике на ÑкоÑной ÑÑÑлке Ñ Ð²Ð°Ñ Ð² адÑеÑной ÑÑÑоке бÑаÑзеÑа авÑомаÑиÑеÑки к адÑеÑÑ ÑÑÑаниÑÑ Ð¿ÑипиÑеÑÑÑ Ð·Ð½Ð°Ðº # и название ÑкоÑÑ.
ÐоÑÑÐ¾Ð¼Ñ ÐµÑли Ð²Ñ ÑеÑиÑе воÑполÑзоваÑÑÑÑ ÐºÐ½Ð¾Ð¿ÐºÐ¾Ð¹ «Ðазад» Ð´Ð»Ñ Ð²Ð¾Ð·Ð²ÑаÑа на пÑедÑдÑÑÑÑ ÑÑÑаниÑÑ, Ñо Ð²Ð°Ñ Ð¿ÐµÑÐµÐºÐ¸Ð½ÐµÑ ÑнаÑала на ÑÑÑ Ð¶Ðµ ÑÑÑаниÑÑ, и ÑолÑко поÑле повÑоÑного нажаÑÐ¸Ñ Â«Ðазад» Ð²Ñ Ð²ÐµÑнÑÑеÑÑ Ð½Ð° пÑедÑдÑÑÑÑ ÑÑÑаниÑÑ.
Так же ÑÑÐ¾Ñ Ð½ÑÐ°Ð½Ñ Ð½Ñжно ÑÑиÑÑваÑÑ Ð¿Ñи ÑабоÑе ÑкÑипÑами, коÑоÑÑе иÑполÑзÑÑÑ Ð°ÑÑибÑÑ href.
- 2.ЯкоÑÑ Ð² HTML Ð¼Ð¾Ð¶ÐµÑ Ð±ÑÑÑ Ð²Ð¸Ð´Ð¸Ð¼Ñм и невидимÑм. ÐÑли Ð²Ñ ÑазмеÑаеÑе внÑÑÑи HTML Ñега Ñ ÑкоÑем какой Ñо ÑекÑÑ, Ñо он бÑÐ´ÐµÑ Ð²Ð¸Ð´Ð¸Ð¼Ñм. ÐÑли в Ñеге Ñ ÑкоÑем ниÑего неÑ, Ñо он бÑÐ´ÐµÑ Ð½ÐµÐ²Ð¸Ð´Ð¸Ð¼Ñм.
ÐожалÑй, ÑÑо вÑе оÑновнÑе моменÑÑ, каÑаÑÑиеÑÑ Ð¸ÑполÑÐ·Ð¾Ð²Ð°Ð½Ð¸Ñ ÑкоÑей в HTML ÑÑÑаниÑÐ°Ñ . ÐÑли Ñ Ð²Ð°Ñ ÐµÑÑÑ ÐµÑÑ ÐºÐ°ÐºÐ°Ñ Ñо ÑÐµÐ½Ð½Ð°Ñ Ð¸Ð½ÑоÑмаÑÐ¸Ñ Ð¿Ð¾ данной Ñеме â не ÑÑеÑнÑйÑеÑÑ, пиÑиÑе Ñвои комменÑаÑии!
УÑÐ¿ÐµÑ Ð¾Ð² вам!
С Ñважением Ð®Ð»Ð¸Ñ ÐÑÑаÑÑ
Источник
Якорь на сайте — что это и как сделать якорь на сайте | History-of-Blog.ru
Якорь на сайте: что это такое, зачем нужно и как сделать?
Здравствуйте уважаемые читатели блога history-of-blog.ru. Немногим известно, что на страницу сайта можно поставить якоря, а тех, кто пользуется ими еще меньше. Однако использование якорей на сайте в некоторых случаях является очень удобной функцией – она помогает сразу находить нужную информацию и экономить время. Но давайте обо всем по порядку.
Вот один из примеров использования якорей:
Позднее я опубликовал еще одну очень важную статью:
Как сделать прокрутку страницы до якоря плавной (на jQuery)
Как Вы видите я сделал небольшое содержание данной статьи, которое выполнено в виде ссылок, кликнув по одной из них, Вы, без перезагрузки страницы, окажетесь в определенном месте статьи. Итак:
Что такое якорь на сайте.
Якорь на сайте – это такой тег, который ставится в html-код страницы, на который мы можем сделать ссылку. Таким образом кликая по ссылке якоря мы можем открыть страницу на любом месте, в зависимости от того куда ссылается якорь.
Самый распространенный пример якоря на сайте – это тег more (читать далее), который используется практически в каждом шаблоне WordPress. Кликая по ссылке “читать далее” перед посетителем открывается статья не с самого начала, а на том моменте где он закончил чтение.
Зачем нужны якоря и в каких случаях их использовать.
Как было сказано выше якоря нужны для того, чтобы пользователь мог сразу найти нужную ему информацию. Кликнув по ссылке которая ему интересна он сразу отправляется на определенное место на странице.
Например:
Посетителю стало интересно мнение Руслана Ахматьянова по поводу вопроса: “Что важнее для сайта? Посещаемость, пузомерки, траст или какой-либо другой параметр?”. Самым удобным вариантом ответить на этот вопрос является предоставить посетителю следующую ссылку. Согласитесь, предоставить человеку такую ссылку гораздо удобнее, ведь в таком случае ему не придется искать этот вопрос в интервью. Может быть это не самый лучший пример, но чтобы понять суть якорей вполне сгодится.
Так же с помощью якорей очень удобно разбивать большие статьи. Например если читатель знает что такое якорь для сайта и его устройство, но не знает как его установить, то кликнув по последней ссылке в содержании статьи он сразу перейдет к этой теме.
Практически ни одна страница FAQ (правила) уважающего себя сервиса не обходится без якорей. Зайдите в свой аккаунт GoGetLinks и посмотрите как устроена у них эта страница:
Кликая по интересующему нас вопросу – сразу под ним “выезжает” ответ, а в строке браузера добавляется небольшая приписка к странице # и целое число:
В данном случае вместе с якорями используются другие средства, благодаря которым страница FAQ становится еще удобнее – прием скрытия контента, то есть пока мы не кликнем по вопросу мы не узнаем на него ответ, что в принципе нам и не нужно. Таким образом целая страница, с большим обилием контента, практически помещается в первом экране (часть страницы которую мы видим не прокручивая ее колесиком мышки).
Как сделать якоря на странице с записью.
Вставить якоря на страницу с записью можно несколькими способами. Давайте рассмотри самый удобный, простой и органичный из них. Поделим его на два этапа:
1. Делаем якорь на странице сайта:
Сначала нужно определится с тем местом сайта, которое будет находится в самом верху. Например мне нужно чтобы страница открылась с этого места:
Нет проблем! Открываем статью в Html-редакторе:
и ищем заголовок H3 “Зачем нужны якоря и в каких случаях их использовать.“:
Затем в месте где открывается заголовок (<h3>) приписываем через пробел id=”2″, где вместо двойки можно использовать любое целое число или символы. Таким образом наша строчка в html будет выглядеть вот так:
Вместо заголовка h3 может использоваться любой тег: новый абзац (<p>), выделение жирным (<strong> или <b>) и так далее. Таким образом мы может “закинуть якорь” куда угодно.
2. Делаем ссылку на якорь:
Теперь подбираем анкор ссылки, который будет вести на якорь. В моем примере это элемент списка в начале статьи: “Зачем нужны якоря и в каких случаях их использовать”.
Так же открываем статью в HTML-редакторе и ищем эти строки:
Делаем из нашего анкора ссылку следующего вида:Перед анкором добавляем:
<a href=»#2″>
А после закрываем эту ссылку:
</a>
Обратите внимание на двойку – это число мы указывали в предыдущем шаге, оно должно совпадать.
Теперь при переходе по этой ссылке мы сразу окажемся в нужной части страницы, а в строке бразера появится приписка #2.
Это самый простой метод вставки якорей на сайт без дополнительных “украшательств”. В заключении поста вот такая картинка в тему, которая отражает смысл данной статьи:
Комментировать через ВКонтакте:
Источник
Что такое якорный текст
Вебмастера расходятся во мнениях относительно якорного текста. Одни считают, что он вредит продвижению, другие, напротив, утверждают, что якоря помогают оптимизировать страницу. Разберемся, что такое анкорный текст, и стоит ли его использовать.
Что такое якорный текст?
Якорь – это определенное место на странице. Для перехода к нему используется закладка – хеш-ссылка. В составе закладки присутствует символ «#» – решетка (или хеш). Отсюда и название. Якорный текст – текст, содержащий якоря и ссылки на них.
Якоря всегда работают в паре с закладками. Кликая по заякоренной ссылке, пользователь попадает в нужное, увязанное с линком, место страницы.
Зачем нужны якоря?
Якоря используют для облегчения навигации по странице, перегруженной контентом. Чаще всего якорный текст применяют для создания оглавления. Вместо того, чтобы самостоятельно искать требуемый раздел, пользователю достаточно перейти по ссылке – браузер проскроллит страницу самостоятельно.
Якоря облегчают и межстраничную, и даже междоменную навигацию. По умолчанию любая страница открывается в самом начале. Если требуется отослать читателя в другую часть страницы или на другой сайт, обращаются за помощью к аналогичному коду. Закладки и анкоры в этом случае находятся не на одной странице, а на разных.
Якорный текст часто используют на лендингах (одностраничных сайтах). В этом случае им отводят роль элементов главного меню. Только вместо переброски на другие страницы хеш-ссылки перенаправляют посетителей на подразделы этого же документа.
Как поисковики относятся к якорному тексту?
Есть две причины, по которой некоторые вебмастера относятся к якорям с недоверием. По их мнению, анкоры способны ввести поисковых ботов в заблуждение – якоря похожи на циклические ссылки и намекают на дублирование контента.
Анкоры, циклические ссылки и дублированный контент
Ссылка на ту же страницу, на которой находится линк, называется циклической. Например: ссылка <a href=»https://site.ru»>, расположенная в документе по адресу https://site.ru, ведет к зацикливанию. Пользователи, кликающие по ней, по сути, обновляют страницу. Боты, индексирующие сайт, в этом случае ходят по кругу. Google и Яндекс за это не сильно наказывают, но какая-то доля рейтинга пропадает.
Якорный текст (например, оглавление) – это список одинаковых ссылок, напоминающих циклические. Идущие подряд ссылки отличаются только идентификатором, следующим за хешем.
- <a href=» https://site.ru#1″>
- <a href=» https://site.ru#2″>
- <a href=» https://site.ru#3«>
Может показаться, что поисковики от такого будут не в восторге. Возникает вопрос: кроме зацикливания, могут ли здесь быть еще и разные ссылки, ведущие на одну и ту же страницу? И, как следствие, возможно ли индексирование одного и того же контента под разными URL?
На самом деле поисковые системы хорошо понимают роль якорей. Как ссылку они воспринимают только первый линк в документе – все остальные аналогичные они не учитывают. К тому же, наличие хеша – признак структурированного документа. Поэтому обе проблемы надуманы – никакие санкции якорный текст за собой не влечет.
Положительное влияние якорного текста на SEO
Якоря не только не отражаются негативно на оптимизации, но и влияют на продвижение положительно. Напрямую они не имеют отношения к SEO – поисковики их попросту не учитывают. Но якоря служат дополнительными крючками, на которые попадаются читатели: любая ссылка – это призыв кликнуть на нее. Кроме того, анкоры значительно упрощают навигацию по документу – это улучшает поведенческие факторы. А ПФ в 2018 году – один из важнейших критериев, которыми руководствуются поисковые системы при ранжировании.
Яндекс и Google видят в якорях обычные элементы управления. Как, например, кнопки. Поэтому ограничений по количеству анкоров, с точки зрения SEO, нет. Главные ограничители – здравый смысл и юзабилити. Элементы должны облегчать поиск и восприятие информации, а не уводить читателя в сторону.
Заключение
Якоря – полезный инструмент. Однако использовать их нужно обдуманно. Они уместны далеко не везде – только там, где есть необходимость в дополнительной навигации. Правило простое – если анкоры упрощают пользователям жизнь на сайте, текст стоит «якорить». В иных случаях от них проку нет.
;
Источник