- Создание содержания в статье на сайте:
- Как сделать якорную ссылку HTML тегами;
- Пример HTML и CSS кода для создания навигации по статье.
Создание содержания в статье на сайте
- Улучшается навигация по статье. Читатель понимает что где находится и, уже на этапе изучения содержания, знает какой именно раздел его интересует.
- Улучшаются SEO показатели. Материалы с оглавлением котируется гораздо выше, чем без них.
Навигация по сайту делается при помощи якорных ссылок. Поэтому, сначала разберемся как они работают и где применяются.
Как сделать якорную ссылку HTML тегами
Существует два элемента:
- Якорь. Помечается место в документе, куда будем ссылаться.
- Якорная ссылка. Ссылка, указывающая на якорь.
Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу.
Исходя из этого, первое что нужно сделать для правильной навигации по сайту, разметить статью якорями. Делается это следующим образом, находим кусок текста (обычно это заголовки либо изображения) и добавляем код:
Статьи ВКонтакте: Ссылка на конкретное место в статье или перекрестные ссылки
Как сделать якорную ссылку HTML тегами
Тем самым, мы пометили заголовок «Как сделать якорную ссылку HTML тегами» идентификатором «id=»soderzhanie-v-state-na-sajte-1-1″».
После этого, устанавливаем якорную ссылку. Она добавляется при помощи тега «а» с хештегом в атрибуте «href».
В результате, получаем ссылку в статье на интересующий блок.
Кроме того, якорная ссылка может содержать в себе не только адрес текущей статьи, но и адрес другой web-страницы. К примеру:
То есть, при помощи HTML, мы указали, что хотим перейти на страницу «https://wamotvet.ru/webmaster/soderzhanie-v-state-na-sajte.html» к «якорю soderzhanie-v-state-na-sajte-1-1».
Надеюсь с этим все понятно, потому что буду переходить дальше, к теме статьи. Если остались вопросы, либо перечитайте материал, либо задайте свой вопрос в комментариях.
Пример HTML и CSS кода для создания навигации по статье
Долго думал как интереснее написать этот раздел и не придумал ничего лучше, как просто показать то, что делаю я.
- информаю которую хочешь рассказать;
- последовательность раскрываемого материала.
- Создание содержания статьи на сайте:
- Как сделать якорную ссылку HTML тегами;
- Пример HTML и CSS кода для создания содержания.
Далее, создаю копию этих же пунктов и переделываю их в заголовки и .
Создание содержания статьи на сайте
Как сделать якорную ссылку HTML тегами
Пример HTML и CSS кода для создания содержания
Оглавление с плавной прокруткой страницы
После этого, мне остается разметить код на якоря и якорные ссылки:
Как сделать навигацию Вконтакте
Кстати, я не добавляю теги вручную, это было бы очень долго. Ускорить работу поможет добавление нужных кнопок в текстовый редактор WordPress. Детально, процесс описывался здесь.
Вот, в принципе, и все. Содержание в статье создано, якоря расставлены, ссылки присутствуют. Осталось наполнить материал контентом и опубликовать для читателей.
Оглавление с плавной прокруткой страницы
Как уже говорилось выше, навигация по статье сайта, это не просто красиво, но еще и эффективно. При помощи небольших манипуляций, вебмастер может постараться увеличить время пребывания посетителя на своем сайте.
Увеличение времени посещения сайта посетителем, благоприятно сказывается на поведенческих факторах. Что в будущем, приводит к лояльности со стороны поисковых систем.
Прокрутку от якорной ссылки к якорю, можно сделать не молниеносной, а плавной. На этом вебмастер выиграет доли секунд, но этого может хватить для поисковиков. Да и сам посетитель будет приятно удивлен анимацией на сайте.
Добавьте javascript в код сайта, либо вызовите его при помощи из другого файла.
var linkNav = document.querySelectorAll(‘[href^=»#»]’), V = 2; // скорость, может иметь дробное значение через точку for (var i = 0; i < linkNav.length; i++) < linkNav[i].addEventListener(‘click’, function(e) < e.preventDefault(); var w = window.pageYOffset, // прокрутка hash = this.href.replace(/[^#]*(.*)/, ‘$1’); // id элемента, к которому нужно перейти t = document.querySelector(hash).getBoundingClientRect().top, // отступ от окна браузера до id start = null; requestAnimationFrame(step); // подробнее про функцию анимации [developer.mozilla.org] function step(time) < if (start === null) start = time; var progress = time — start, r = (t < 0 ? Math.max(w — progress/V, w + t) : Math.min(w + progress/V, w + t)); window.scrollTo(0,r); if (r != w + t) < requestAnimationFrame(step) >else < location.hash = hash // URL с хэшем >> >, false); >
После этого, навигация по статье сайта будет плавной. Пример реализации, можно посмотреть здесь: https://jsfiddle.net/Kilnart/37wyce01/1/.
Источник: wamotvet.ru
Якоря в статьях (лонгридах) ВКонтакте
Кто не знает, якорь — это ссылка на определенное место на странице. При клике на якорь браузер автоматически прокручивает страницу до нужного места.
Очень крутая возможность. Позволяет:
— копировать и отправлять подписчикам ссылку на определенное место в статье;
— делать оглавления для больших статей;
— не плодить много страниц (так как среди сотен статей сложно найти нужную)
Как скопировать ссылку на якорь:
1) Важно! Работает только для «заголовков», поэтому для начала создайте статью с заголовками (кнопочки «H» — heading).
2) Сохраните статью и откройте ее готовую и сохраненную в новой вкладке.
3) Наведите мышкой на любой заголовок и кликните по иконке ссылки слева от него (с подсказкой Скопировать ссылку).
4) Все, готово! Используйте скопированную ссылку в статье, постах или сообщениях.
Творческих взлетов и 
лайк, если было полезно. 
Источник: skyjoom.com
Делаем навигацию по статье, прописывая якоря в подзаголовки
Приветствую вас на блоге ИнетСоветы.ру! Этот пост я хочу посвятить теме «Как сделать навигацию по статье или как создать меню для перехода к интересующей читателя части статьи.» Возможно не все поняли о чем я говорю, тогда, чтобы было понятно посмотрите на следующий скрин.
На сайт Википедии, я думаю, Вы заходили хоть раз в жизни. Там на каждой странице есть вот такой блок содержания статьи:
Использовать такую навигацию в статье нужно тем, кто пишет длинные статьи с подзаголовками. Многие заметили, что такая навигация оказывает положительный результат на ранжировании статьи в поисковой выдаче. Каждая ссылка в меню позволяет переместиться непосредственно к той части документа, в заголовке которой использован якорь.
В коде это реализуется несложно. К каждому подзаголовку добавляется якорь (метка). Наглядный пример реализации:
Предположим, что в статье использовано 3 заголовка h2.
- заголовок h2 №1
- заголовок h2 №2
- заголовок h2 №3
В нужном нам месте статьи (обычно после вступительного абзаца) добавляем меню код меню. Обратите внимание, что нужно перейти на вкладку Текст в редакторе.
заголовок h2 №1 заголовок h2 №2 заголовок h2 №3
Мы добавили обычный список ссылок с анкорами. В качестве анкоров у наших ссылок выступают фразы скрывающиеся за заголовок h2 №1, 2, 3.
В качестве адреса ссылки у нас используются #1, 2, 3.
Каждому заголовку добавляем якорь со своим номером. Для первого заголовка это будет . И так далее.
заголовок h2 №1
заголовок h2 №2
заголовок h2 №3
Обращаю Ваше внимание, что не нужно ставить символ # в якорь.
Если Вы сделали все правильно, что после клика по ссылке в содержании, Вас переместит на ту часть статьи, на которую Вы поставили якорь.
Чтобы как-то выделить данный блок css оформление блока и оформляйте списком.
тут текст
А Вы используете у себя на сайте такую навигацию внутри статей? Пишите в комментариях.
Источник: inetsovety.ru