Как создать быстрые ссылки для сайта


что это такое, как добавить быстрые ссылки на сайт

Быстрые ссылки – это своего рода бонусный элемент навигации в выдаче, который предоставляется надежным с точки зрения поисковиков сайтам. Вспомогательные ссылки обычно отображаются под сниппетом сайта в результатах поиска Яндекс и Google.

Дополнительный блок навигации – это эффективный инструмент для привлечения внимания пользователей. Например, сниппет сайта с расширенными быстрыми ссылками может занимать до 60% страницы выдачи. Что это значит – вы догадываетесь: как минимум половина трафика будет на вашем сайте. Помимо увеличения числа посещений, быстрые ссылки повышают и поведенческие характеристики. В расширенном сниппете проще дать максимум информации о компании, услугах и продуктах. А значит, стать более привлекательным и полезным пользователям.


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

Чтобы полностью закрыть вопрос с пониманием, что такое быстрые ссылки, приведем оригинальное сравнение с супермаркетом. Представьте, что расширенный сниппет в поисковой выдаче Яндекса – это некий огромный магазин. В нём есть главная страница – вход, а есть отделы с продуктами: «молочные», «мясные и рыбные», «гастрономия» и другие. Чтобы купить мясо вы идете в мясной отдел, а за молоком – в молочный. Так же распределяют потоки посетителей и быстрые ссылки в сниппете.

Вы вбили в поиск запрос: «заказать пиццу в Москве» и видите в результатах предложения пиццерий – сниппеты с расширенным блоком навигации:  пицца от 188 руб, роллы от 110 руб, салаты от 260 руб и другое. Вам не нужно заходить на главную, можно сразу перейти по быстрой ссылке в нужный раздел и заказать доставку. Так это работает.


Как посмотреть быстрые ссылки

Быстрые ссылки на сайте отображаются под сниппетом или сразу после заголовка объявления в поисковой выдаче. Яндекс предлагает выводить их двумя способами:

  1. Обычное отображение в виде строки. Дополнительные ссылки отображаются сразу под заголовком сниппета или после описания. Как правило, такой формат используется с ограничением и только для сайтов из ТОП-3 выдачи. Быстрые ссылки в строку используют практически все популярные онлайн-магазины и сайты коммерческой направленности.

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


Некоторые онлайн-магазины подключают дополнительно к ссылкам и поисковую строку сразу в расширенном сниппете как на примере Эльдорадо.


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

Как добавить быстрые ссылки на сайт?

Быстрые ссылки нельзя взять и просто включить в настройках. Формирование дополнительных навигационных меню, особенно расширенного типа, делается автоматически по алгоритмам Яндекса и Google. Таким образом, сам поисковик решает: может ли ваш сайт занимать больше пространства в выдаче или нет.

Быстрые ссылки в Яндексе

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

  • Тег Title должен быть релевантен названию раздела. То есть заголовок должен точно отображать содержание страницы;

  • Удобная навигация по сайту, включая меню и «хлебные крошки»;

  • Все ссылки должны быть правильно оформлены, картинки и прочая графика иметь атрибут alt, который подходит по смыслу;

  • На сайте должна быть внутренняя перелинковка, обязательно наличие тегов h2 (желательно, чтобы он совпадал с заголовком).

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


Проще всего проверить наличие быстрых ссылок в Яндекс.Вебмастер. Для этого нужно добавить сайт в этот сервис и перейти в раздел «Информация о сайте» и далее в «Быстрые ссылки». Значок «chg» говорит о том, что ссылку можно переименовать. Собственно – это и весь функционал, который предлагает сервис для работы с быстрыми ссылками: отключить отображение, поменять имя ссылки и порядок расположения.    

Быстрые ссылки в Google

Как сделать быстрые ссылки в сниппете выдачи Google? Первым делом нужно тщательно проработать структуру сайта, в частности расставить все alt-ссылки на разделы сайта. Обязательное условие – это внутренняя перелинковка. С её помощью можно четко указать боту поисковика, какие страницы подходят для показа в расширенном сниппете.

Дальше все как в Яндексе: релевантные содержанию страницы заголовки, качественный контент, понятные анкоры, удобная навигация и «размеченные» тегами alt картинки. Тщательно проверьте:

  • Правильность заполнения description и title;

  • Наличие тегов h2 – желательно, чтобы заголовки содержали ключевые слова;

  • Контент на наличие дублей.

Также рекомендуется в консоли Вебмастера Google добавить карту сайта – она проведет поискового робота по всем нужным разделам, а те которые закрыты от индексации, не покажет. Более подробную инструкцию по работе с быстрыми ссылками в Google можно получить в справке Search Console.

Быстрые ссылки в рекламе

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

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

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

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

Почему быстрые ссылки не отображаются?

Главные причины того, что быстрые ссылки перестали отображаться в сниппетах – это динамический процесс формирования естественной выдачи и несоблюдение требований поисковика. Иными словами, Яндекс или Google нашел более подходящие страницы, чем ваша для предоставления ссылок. Кроме того, причина может быть на стороне сайта:

  • Поменяли структуру страниц, сбилась внутренняя перелинковка и прочее – робот проверил ваш сайт, но не понял структуру и отключил быстрые ссылки.

  • При формировании быстрых ссылок не соблюдались рекомендации поисковика. Это касается и блока дополнительной навигации в рекламных объявлениях.

Чтобы восстановить показ быстрых ссылок нужно делать всё по правилам и регулярно размещать на сайте полезный оптимизированный контент.

Как отключить быстрые ссылки?

Если вы не хотите показать в дополнительном блоке рекомендуемые поисковиком страницы, то ссылки на них можно отключить. В Яндексе перейдите в сервис Вебмастер и далее в раздел «Быстрые ссылки». Чтобы отключить показ просто деактивируйте ссылку.

В Google также есть похожие опции. В сервисе для вебмастеров перейдите в раздел «Вид в поиске» и далее «Ссылки сайта». Чтобы убрать страницу из быстрых ссылок нужно понизить её рейтинг в поисковой системе. Это временная мера – понижение рейтинга действует 90 дней.

Альтернатива быстрым ссылкам


Быстрые ссылки отличный инструмент, но не для всех сайтов. Если ресурс молодой, то в 99% случаев ему не получить дополнительный блок в сниппете от поисковика. Ждать 2-3 месяца пока Яндекс или Google «проникнется» доверием никому не хочется, тем более, если продвигается коммерческий проект.

Альтернатива быстрым ссылкам одна – навигационный инструмент «хлебные крошки». Это панель с меню по принципу уровней вложенностей. Располагается она в контентной части страницы/сайта.

Например, онлайн-магазин продает акриловые, гидромассажные ванны. Блок «хлебные крошки» выглядит так: «сайт ванн – акриловые ванны – гидромассажные ванны – модель ванны»  

Поисковик подгружает «хлебные крошки» в выдачу и вместо названия сайта показывает кликабельные разделы меню. Чем вам не быстрые ссылки!

Резюме

Мы рассмотрели, что представляют собой быстрые ссылки в сниппетах выдачи Яндекса и Google. Узнали, какие виды может принимать дополнительный блок навигации и что нужно для его отображения в результатах поиска. Научились подключать и выключать ссылки в сервисах для вебмастеров, а также рассмотрели альтернативное решение для сайтов-стартапов.

Использование веб-части «Быстрые ссылки»

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

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

Добавить веб-часть быстрых ссылок

  1. Если ваша страница еще не находится в режиме редактирования, щелкните Изменить в правом верхнем углу страницы.

  2. Наведите указатель мыши на существующую веб-часть или под ней, и вы увидите строку с кружком +, например:

  3. Нажмите а затем выберите веб-часть Quick Links .

  4. Напечатайте поверх заголовка быстрых ссылок, чтобы добавить свой заголовок.

  5. Щелкните веб-часть Edit кнопка для установки ваших опций:

  6. Выберите макет и выберите необходимые параметры для этого макета.У каждого макета есть разные варианты. Например, вы можете выбрать Показать изображение в макете для макета Compact , и вы можете выбрать Показать описания для макетов Список и Кнопка .

    Вот сравнение того, как выглядит каждый из макетов:

    Компактный

    Компактный макет предназначен для отображения значков размером 48 x 48 пикселей.

    Диафильм

    Макет «Диафильм» предназначен для отображения изображений шириной от 212 до 286 пикселей с соотношением сторон 9/16, где высота равна 9, а ширина - 16.

    Сетка

    Только SharePoint

    Кнопка

    Только SharePoint

    Список

    Только SharePoint

    Плитка

    Только SharePoint

Добавить ссылки

  1. Нажмите + добавьте .

  2. Выберите недавний файл или получите файл или изображение из одного из следующих мест:

    • Стандартные изображения, предоставленные Microsoft

    • Поиск в Интернете

    • А участок

    • Ваш компьютер

    • Ссылка

    • Если ваша организация указала набор утвержденных образов, вы сможете выбрать из этого набора в разделе «Ваша организация».

      Примечания:

      • Поиск

        в Интернете использует изображения Bing, которые используют лицензию Creative Common. Вы несете ответственность за проверку лицензирования изображения перед тем, как вставить его на свою страницу.

      • Если вы являетесь администратором SharePoint и хотите узнать, как создать библиотеку активов для вашей организации , см. Раздел Создание библиотеки активов организации.

      • Если вы являетесь администратором SharePoint, мы рекомендуем включить сеть доставки контента (CDN), чтобы повысить производительность при получении изображений. Узнайте больше о CDN.

  3. Выберите изображение, страницу или документ и нажмите Открыть .

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

Редактировать ссылки

  1. Если ваша страница еще не находится в режиме редактирования, щелкните Изменить в правом верхнем углу страницы.

  2. Наведите указатель мыши на элемент, который нужно отредактировать, и выберите карандаш Edit item внизу элемента, который вы хотите отредактировать.

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

    Чтобы удалить ссылки, щелкните X для элемента. Чтобы изменить порядок ссылок, перетащите элементы на новые позиции с помощью кнопки Move . Вы также можете изменить порядок ссылок, используя клавиши со стрелками Ctrl + Left или Ctrl + Right.

    Примечание. Вы не можете изменить порядок ссылок в макете диафильма.

.

Как добавлять быстрые ссылки | Веб-ресурсы

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

Измените текст и ссылку для каждой быстрой ссылки и убедитесь, что вы удалили все быстрые ссылки, которые не используются. Вы можете добавить дополнительные быстрые ссылки, но рекомендуется использовать максимум 7 быстрых ссылок на страницу.

Цвета быстрых ссылок будут отражать факультет, колледж или школу, с которыми связан ваш сайт. Черная версия быстрых ссылок также доступна при выборе шаблона Быстрые ссылки (черный) .


Добавление быстрых ссылок в область дополнительного содержимого боковой панели

  1. На панели администрирования щелкните My Workbench .
  2. Выберите вкладку Create / Manage Content и выберите тип контента, в который вы будете вставлять быстрые ссылки.
  3. Прокрутите вниз до Дополнительное содержимое боковой панели . Нажмите кнопку Template на панели инструментов.

  4. Выберите шаблон Быстрые ссылки из списка шаблонов.

  5. Будет вставлен список из 5 быстрых ссылок (в цвете темы вашего сайта).

  6. Измените текст ссылки для каждой быстрой ссылки. Отредактируйте ссылку для каждой быстрой ссылки, выделив текст ссылки и нажав кнопку Ссылка на панели инструментов.Выберите необходимый Тип ссылки для каждого пути ссылки.

  7. Чтобы добавить еще одну быструю ссылку, поместите курсор в конец текста ссылки и нажмите Введите . Появится серая рамка.

  8. Введите текст ссылки в серое поле.

  9. Выберите текст ссылки и нажмите кнопку Ссылка на панели инструментов. Выберите необходимый Тип ссылки для пути ссылки.

  10. Серое поле будет заменено цветом для конкретного сайта.

.

5 простых шагов для создания карты сайта для веб-сайта

Когда дело доходит до ранжирования вашего веб-сайта, вам нужно воспользоваться как можно большим количеством SEO-хаков. Создание карты сайта - это один из методов, который определенно поможет улучшить вашу стратегию SEO.

Что такое карта сайта?

Некоторые из вас могут быть знакомы с этим больше, чем другие. Я дам вам краткий курс по основам работы с файлами Sitemap, прежде чем я покажу вам, как самостоятельно создать карту сайта.

Проще говоря, карта сайта или XML-карта сайта - это список различных страниц на веб-сайте.XML - это сокращение от «расширяемого языка разметки», который представляет собой способ отображения информации на сайте.

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

Зачем вам карта сайта?

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

XML-карты сайта упрощают поисковым роботам чтение содержимого вашего сайта и соответствующее индексирование страниц. В результате это увеличивает ваши шансы на повышение SEO-рейтинга вашего сайта.

Ваша карта сайта сообщит поисковым системам местоположение страницы на вашем веб-сайте, время ее обновления, частоту обновления и важность страницы, поскольку она связана с другими страницами вашего сайта.Без правильной карты сайта роботы Google могут подумать, что на вашем сайте дублированный контент, что на самом деле повредит вашему SEO-рейтингу.

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

Шаг 1. Просмотрите структуру ваших страниц

Первое, что вам нужно сделать, это посмотреть на существующий контент на вашем веб-сайте и посмотреть, как все структурировано.

Посмотрите на шаблон карты сайта и выясните, как ваши страницы будут отображаться в таблице.

Это очень простой пример, которому легко следовать.

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

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

Согласно Search Engine Journal, вы должны стремиться создать карту сайта с небольшой глубиной, то есть для перехода на любую страницу вашего сайта требуется всего три клика. Это намного лучше для целей SEO.

Итак, вам нужно создать иерархию страниц на основе важности и того, как вы хотите их индексировать. Распределите приоритеты по уровням, которые следуют логической иерархии. Вот пример, чтобы показать вам, о чем я говорю.

Как видите, на странице «О нас» есть ссылки на нашу команду, а также на миссию и ценности.Затем на странице «Наша команда» есть ссылки на «Управление» и «Связаться с нами».

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

Точно так же, если базовый ценовой пакет будет расположен над страницей «Сравнить пакеты», логическая структура выйдет из строя.

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

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

Шаг 2. Закодируйте свои URL-адреса

Теперь, когда вы прошли и определили важность каждой страницы и сопоставили ее важность в структуре вашего сайта, пора закодировать эти URL-адреса.

Это можно сделать путем форматирования каждого URL-адреса с помощью тегов XML. Если у вас есть какой-либо опыт кодирования HTML, это будет для вас пустяк.Как я сказал ранее, «ML» в XML означает язык разметки, что и HTML.

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

Sublime Text - отличный вариант для вас.

Затем добавьте соответствующий код для каждого URL.

  • местоположение
  • последнее изменение
  • измененная частота
  • приоритет страницы

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

  • http://www.examplesite.com/page1
  • 2019-1-10
  • еженедельно
  • 2

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

Шаг 3. Подтвердите код

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

К счастью, есть инструменты, которые помогут проверить ваш код и убедиться в правильности синтаксиса.В Интернете доступно программное обеспечение, которое может помочь вам в этом. Просто выполните быстрый поиск в Google для проверки карты сайта, и вы что-нибудь найдете.

Мне нравится использовать инструмент XML Sitemap Validator.

Это укажет на любые ошибки в вашем коде.

Например, если вы забыли добавить конечный тег или что-то в этом роде, это можно быстро идентифицировать и исправить.

Шаг 4. Добавьте карту сайта в корень и файл robots.txt.

Найдите корневую папку своего веб-сайта и добавьте файл карты сайта в эту папку.

Это фактически добавит страницу на ваш сайт. Это вообще не проблема. Фактически, это есть на многих сайтах. Просто введите веб-сайт и добавьте «/ sitemap /» к URL-адресу и посмотрите, что появится.

Вот пример с веб-сайта Apple.

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

Теперь можно сделать еще один шаг вперед. Вы даже можете посмотреть код на разных сайтах, добавив «/ sitemap.xml »к URL-адресу.

Вот как это выглядит на сайте HubSpot.

Помимо добавления файла карты сайта в корневую папку, вы также можете добавить его в файл robots.txt. Вы также найдете это в корневой папке.

По сути, это инструкции для поисковых роботов, индексирующих ваш сайт.

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

Давайте вернемся в Apple и посмотрим, как выглядит их страница robots.txt.

Как видите, у них есть «запрет» для нескольких страниц на своем сайте. Поэтому сканеры игнорируют их.

Однако Apple также включает сюда свои файлы карты сайта.

Не каждый, кого вы спросите, скажет вам добавить свои карты сайта в файл robots.txt. Так что я позволю вам решить это для себя.

С учетом сказанного, я определенно твердо верю в то, что следую лучшим практикам успешных веб-сайтов и предприятий.Если такой гигант, как Apple, использует это, это может быть неплохой идеей, чтобы вы ее рассмотрели.

Шаг 5. Отправьте карту сайта

Теперь, когда карта сайта создана и добавлена ​​в файлы сайта, пора отправить их в поисковые системы.

Для этого вам необходимо пройти через Google Search Console. Некоторые из вас, возможно, уже настроили это. В противном случае вы можете очень легко начать работу.

На панели инструментов консоли поиска перейдите в Сканирование> Карты сайта.

Затем нажмите «Добавить / протестировать карту сайта» в правом верхнем углу экрана.

Это возможность еще раз проверить карту сайта на наличие ошибок, прежде чем продолжить. Очевидно, вы захотите исправить все найденные ошибки. Как только ваша карта сайта не будет содержать ошибок, нажмите "Отправить" и все. Отсюда Google займется всем остальным. Теперь сканеры с легкостью проиндексируют ваш сайт, что повысит ваш рейтинг в SEO.

Альтернативные варианты

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

Я рассмотрю некоторые из лучших вариантов.

Плагин Yoast

Если у вас есть веб-сайт WordPress, вы можете установить плагин Yoast, чтобы создать карту сайта для своего сайта.

Yoast дает вам возможность включать и выключать карту сайта с помощью простого переключателя. Вы можете найти все свои параметры карты сайта XML на вкладке SEO через WordPress после установки плагина.

Screaming Frog

Screaming Frog - это программное обеспечение для настольных ПК, которое предлагает широкий спектр инструментов SEO. Использование и создание карты сайта бесплатно, если на сайте меньше 500 страниц. Тем из вас, у кого есть более крупные сайты, потребуется обновить платную версию.

Screaming Frog позволяет вам вносить все изменения в код, о которых мы говорили ранее, но без фактического изменения кода самостоятельно. Вместо этого вы следуете более удобной подсказке, написанной на простом английском языке.Тогда код файла карты сайта будет изменен автоматически. Вот скриншот, чтобы понять, что я имею в виду.

Просто перейдите по вкладкам, измените настройки, и файл карты сайта будет соответствующим образом скорректирован.

Slickplan

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

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

Slickplan - платное программное обеспечение, но оно предлагает бесплатную пробную версию. По крайней мере, стоит попробовать, если вы сомневаетесь в покупке плана.

Заключение

Если вы готовы вывести свою стратегию SEO на новый уровень, вам необходимо создать карту сайта для своего веб-сайта.

Больше нечего бояться этого. Как видно из этого руководства, всего за пять шагов создать карту сайта.

  1. Просмотрите свои страницы
  2. Кодируйте URL-адреса
  3. Подтвердите свой код
  4. Добавьте карту сайта в корень и robots.txt
  5. Отправьте карту сайта

Вот и все!

Для тех из вас, кто все еще не знает, как вручную изменить код на своем веб-сайте, есть другие варианты, которые вы можете рассмотреть. Интернет полон ресурсов карты сайта, но плагин Yoast, Screaming Frog и Slickplan - отличный выбор для начала.

Другие руководства, которые могут вам понравиться

.

Создание гиперссылок - Изучение веб-разработки

Гиперссылки действительно важны - они делают Интернет веб . В этой статье показан синтаксис, необходимый для создания ссылки, и обсуждаются передовые методы создания ссылок.

Предварительные требования: Базовое знакомство с HTML, как описано в Приступая к работе с HTML. Форматирование текста HTML в соответствии с основами работы с текстом HTML.
Цель: Чтобы узнать, как эффективно реализовать гиперссылку и связать несколько файлов вместе.

Что такое гиперссылка?

Гиперссылки - одно из самых интересных нововведений, которые может предложить Интернет. Они были особенностью Интернета с самого начала, и именно они делают Web Интернетом. Гиперссылки позволяют нам связывать документы с другими документами или ресурсами, ссылаться на определенные части документов или делать приложения доступными по веб-адресу. Практически любой веб-контент можно преобразовать в ссылку, чтобы при нажатии или иным образом веб-браузер переходил на другой веб-адрес (URL).

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

Например, домашняя страница BBC содержит множество ссылок, которые указывают не только на несколько новостей, но и на разные области сайта (функции навигации), страницы входа / регистрации (инструменты пользователя) и многое другое.

Анатомия звена

Базовая ссылка создается путем обертывания текста или другого содержимого, см. Ссылки на уровне блока, внутри элемента и использования атрибута href , также известного как Hypertext Reference или target , который содержит веб-адрес.

 

Я создаю ссылку на домашнюю страницу Mozilla .

Это дает нам следующий результат:

Я создаю ссылку на домашнюю страницу Mozilla.

Добавление вспомогательной информации с помощью атрибута title

Еще один атрибут, который вы можете добавить к своим ссылкам, - это заголовок . Заголовок содержит дополнительную информацию о ссылке, например, какой тип информации содержит страница или что нужно знать на веб-сайте.

 

Я создаю ссылку на на главную страницу Mozilla .

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

Я создаю ссылку на домашнюю страницу Mozilla.

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

Активное обучение: создание собственного примера ссылки

Создайте документ HTML, используя местный редактор кода и наш шаблон для начала работы.

  • Внутри тела HTML добавьте один или несколько абзацев или других типов содержимого, о которых вы уже знаете.
  • Измените часть содержимого на ссылки.
  • Включить атрибуты заголовка.

Ссылки уровня блока

Как упоминалось ранее, практически любой контент может быть преобразован в ссылку, даже элементы уровня блока.Если у вас есть изображение, которое вы хотите превратить в ссылку, используйте элемент и укажите ссылку на файл изображения с помощью элемента .

  логотип mozilla, который ведет на главную страницу mozilla  

Примечание : вы узнаете больше об использовании изображений в Интернете в следующей статье.

Краткое руководство по URL-адресам и путям

Чтобы полностью понять цели ссылок, вам необходимо понимать URL-адреса и пути к файлам.В этом разделе представлена ​​информация, необходимая для этого.

URL-адрес или унифицированный указатель ресурсов - это просто строка текста, которая определяет, где что-то находится в сети. Например, домашняя страница Mozilla на английском языке находится по адресу https://www.mozilla.org/en-US/ .

URL используют пути для поиска файлов. Пути указывают, где находится интересующий вас файл в файловой системе. Давайте посмотрим на пример структуры каталогов, см. Каталог create-hyperlinks.

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

В нашем корне также есть два каталога - pdfs и проектов . Каждый из них имеет внутри один файл - файл PDF ( project -rief.pdf ) и файл index.html соответственно. Обратите внимание, что в одном проекте может быть два файла index.html , если они находятся в разных местах файловой системы. Вторая index.html , возможно, будет главной целевой страницей для информации, связанной с проектом.

  • Тот же каталог : если вы хотите включить гиперссылку в индекс .html (верхний уровень index.html ), указывающий на contacts.html , вы должны указать имя файла, на которое хотите создать ссылку, потому что оно находится в том же каталоге, что и текущий файл. Используемый URL-адрес: contacts.html :

    .
     

    Хотите связаться с конкретным сотрудником? Подробную информацию можно найти на нашей странице контактов .

  • Переход в подкаталоги : если вы хотите включить гиперссылку в индекс .html (верхний уровень index.html ), указывающий на projects / index.html , вам нужно будет спуститься в каталог projects , прежде чем указывать файл, на который вы хотите создать ссылку. Это делается путем указания имени каталога, затем косой черты, а затем имени файла. Используемый URL-адрес: projects / index.html :

    .
     

    Посетите мою домашнюю страницу проекта .

  • Возврат в родительские каталоги : если вы хотите включить гиперссылку в проектов / index.html , указывающий на pdfs / project -rief.pdf , вам нужно будет подняться на уровень каталога, а затем вернуться в каталог pdf . Чтобы перейти вверх по каталогу, используйте две точки - .. - так что URL, который вы будете использовать, будет ../pdfs/project-brief.pdf :

    .
     

    Ссылка на мой краткий обзор проекта .

Примечание : При необходимости вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, например: ../../../complex/path/to/my/file.html .

Фрагменты документа

Можно ссылаться на определенную часть документа HTML, известную как фрагмент документа , а не только на верхнюю часть документа. Для этого сначала необходимо присвоить атрибут id элементу, на который вы хотите создать ссылку. Обычно имеет смысл ссылаться на определенный заголовок, поэтому это будет выглядеть примерно так:

 

Почтовый адрес

Затем, чтобы создать ссылку на этот конкретный id , вы должны включить его в конец URL-адреса, которому предшествует символ решетки / фунта ( # ), например:

 

Хотите написать нам письмо? Воспользуйтесь нашими контактами почтовый адрес .

Вы даже можете использовать ссылку на фрагмент документа отдельно, чтобы связать с другой частью того же документа :

 

почтовый адрес компании можно найти внизу этой страницы.

Абсолютные и относительные URL-адреса

В Интернете вы встретите два термина: абсолютный URL-адрес , и относительный URL-адрес :

абсолютный URL-адрес : указывает на местоположение, определяемое его абсолютным местоположением в сети, включая протокол и имя домена.Например, если страница index.html загружена в каталог с именем projects , который находится внутри корня веб-сервера, а домен веб-сайта - http://www.example.com , страница будет доступна по адресу http://www.example.com/projects/index.html (или даже просто http://www.example.com/projects/ , поскольку большинство веб-серверов просто ищут целевая страница, например index.html для загрузки, если она не указана в URL-адресе.)

Абсолютный URL-адрес всегда будет указывать на одно и то же место, независимо от того, где он используется.

относительный URL-адрес : указывает на местоположение, которое является относительно относительно файла, из которого вы ссылаетесь, больше похоже на то, что мы рассматривали в предыдущем разделе. Например, если мы хотим связать из нашего примера файла http://www.example.com/projects/index.html с файлом PDF в том же каталоге, URL-адресом будет просто имя файла - project- Short.pdf - дополнительная информация не требуется.Если PDF-файл был доступен в подкаталоге внутри проектов под названием pdfs , относительная ссылка была бы pdfs / project -rief.pdf (эквивалентный абсолютный URL-адрес был бы http://www.example.com/projects /pdfs/project-brief.pdf .)

Относительный URL-адрес будет указывать на разные места в зависимости от фактического расположения файла, из которого вы ссылаетесь - например, если мы переместили наш файл index.html из каталога projects в корень веб-сайта. (верхний уровень, не в каких-либо каталогах), файл pdf / project -rief.pdf относительная ссылка URL внутри него теперь будет указывать на файл, расположенный по адресу http://www.example.com/pdfs/project-brief.pdf , а не файл, расположенный по адресу http://www.example.com /projects/pdfs/project-brief.pdf .

Конечно, расположение файла project -rief.pdf и папки pdfs внезапно не изменится, потому что вы переместили файл index.html - это приведет к тому, что ваша ссылка будет указывать не в том месте, поэтому не будет работать, если щелкнуть.Будьте осторожны!

Ссылка на передовой опыт

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

Используйте четкую формулировку ссылки

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

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

Рассмотрим конкретный пример:

Хорошо Текст ссылки: Загрузить Firefox

 

Скачать Firefox

Неверный текст ссылки : Щелкните здесь, чтобы загрузить Firefox

 

кликните сюда скачать Firefox

Другие подсказки:

  • Не повторяйте URL-адрес в тексте ссылки - URL-адреса выглядят некрасиво и звучат еще хуже, когда программа чтения с экрана читает их по буквам.
  • Не говорите «ссылка» или «ссылки на» в тексте ссылки - это просто шум.Программы чтения с экрана сообщают людям, что есть ссылка. Визуальные пользователи также будут знать, что есть ссылка, потому что ссылки обычно имеют другой цвет и подчеркнуты (это соглашение, как правило, не следует нарушать, поскольку пользователи к нему привыкли).
  • Сделайте ярлык ссылки как можно короче - это полезно, потому что программы чтения с экрана должны интерпретировать весь текст ссылки.
  • Сведите к минимуму случаи, когда несколько копий одного и того же текста связаны с разными местами. Это может вызвать проблемы у пользователей программ чтения с экрана, если есть список ссылок вне контекста, которые помечены как «щелкните здесь», «щелкните здесь», «щелкните здесь».

По возможности используйте относительные ссылки

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

  • Во-первых, ваш код проще сканировать - относительные URL-адреса обычно короче абсолютных, что значительно упрощает чтение кода.
  • Во-вторых, по возможности более эффективно использовать относительные URL-адреса. Когда вы используете абсолютный URL-адрес, браузер начинает с поиска реального местоположения сервера в системе доменных имен (DNS). Дополнительные сведения см. В разделе «Как работает Интернет»). Затем он переходит к этому серверу и находит запрошенный файл. При использовании относительного URL-адреса браузер просто ищет файл, который запрашивается на том же сервере. Если вы используете абсолютные URL-адреса вместо относительных, вы постоянно заставляете свой браузер выполнять дополнительную работу, что означает, что он будет работать менее эффективно.

Ссылки на ресурсы, отличные от HTML - оставляйте четкие указатели

При связывании с ресурсом, который будет загружен (например, документ PDF или Word), передан в потоковом режиме (например, видео или аудио) или имеет другой потенциально неожиданный эффект (открывает всплывающее окно или загружает Flash-фильм), вы должны добавить очистить формулировка, чтобы избежать путаницы.

Например:

  • Если вы используете подключение с низкой пропускной способностью, щелкните ссылку, и затем неожиданно начнется загрузка нескольких мегабайт.
  • Если у вас не установлен проигрыватель Flash, щелкните ссылку, а затем внезапно попадете на страницу, для которой требуется Flash.

Давайте рассмотрим несколько примеров, чтобы увидеть, какой текст можно здесь использовать:

 

Скачать отчет о продажах (PDF, 10 МБ)

Посмотреть видео (поток открывается в отдельной вкладке, качество HD)

Играть в автомобильную игру (требуется Flash)

Используйте атрибут загрузки при ссылке на загрузку

Когда вы устанавливаете ссылку на ресурс, который должен быть загружен, а не открыт в браузере, вы можете использовать атрибут download , чтобы указать имя файла сохранения по умолчанию. Вот пример со ссылкой для загрузки последней версии Firefox для Windows:

  Загрузить последнюю версию Firefox для Windows (64-разрядная версия) (английский, США)  

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

Вам нужно будет сделать локальные копии следующих четырех страниц в одном каталоге.Полный список файлов см. В каталоге navigation-menu-start:

Вам следует:

  1. Добавьте неупорядоченный список в указанном месте на одной странице, который включает названия страниц, на которые нужно ссылаться. Меню навигации обычно представляет собой просто список ссылок, так что это семантически нормально.
  2. Измените имя каждой страницы на ссылку на эту страницу.
  3. Скопируйте меню навигации на каждую страницу.
  4. На каждой странице удалите только ссылку на одну и ту же страницу - это сбивает с толку и ненужно для страницы включать ссылку на себя.А отсутствие ссылки служит хорошим визуальным напоминанием о том, на какой странице вы находитесь.

Готовый пример должен выглядеть примерно так, как на следующей странице:

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

Ссылки на электронную почту

Можно создавать ссылки или кнопки, которые при нажатии открывают новое исходящее сообщение электронной почты, а не ссылаются на ресурс или страницу.Это делается с помощью элемента и схемы URL mailto: .

В самой простой и часто используемой форме ссылка mailto: просто указывает адрес электронной почты предполагаемого получателя. Например:

  Отправить письмо в никуда  

В результате появляется ссылка, которая выглядит так: Отправить письмо в никуда.

Фактически, адрес электронной почты указывать необязательно. Если вы его опустите и ваш href будет просто «mailto:»), почтовый клиент пользователя откроет новое окно исходящей электронной почты без адреса назначения.Это часто бывает полезно в виде ссылок «Поделиться», которые пользователи могут щелкнуть, чтобы отправить электронное письмо на адрес по своему выбору.

Уточнение деталей

Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля заголовка почты могут быть добавлены к указанному вами URL-адресу mailto . Чаще всего используются «тема», «копия» и «тело» (которое не является истинным полем заголовка, но позволяет указать короткое сообщение с содержимым для нового электронного письма). Каждое поле и его значение указываются как термин запроса.

Вот пример, который включает копию, скрытую копию, тему и текст:

  Отправить письмо с копией, скрытой копией, темой и телом  

Примечание. Значения каждого поля должны быть закодированы в URL-адресе, то есть с непечатаемыми символами (невидимые символы, такие как табуляция, возврат каретки и разрывы страниц) и пробелами с экранированием в процентах.Также обратите внимание на использование вопросительного знака (? ) для отделения основного URL-адреса от значений полей и амперсандов (&) для разделения каждого поля в URL-адресе mailto: . Это стандартная запись запроса URL. Прочтите Метод GET, чтобы понять, для чего чаще всего используется нотация URL-запросов.

Вот еще несколько примеров URL-адресов mailto :

Проверьте свои навыки!

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

Сводка

Вот и все по ссылкам, по крайней мере пока! Вы вернетесь к ссылкам позже, когда начнете рассматривать их стили. Далее в отношении HTML мы вернемся к семантике текста и рассмотрим некоторые более сложные / необычные функции, которые вы найдете полезными. Расширенное форматирование текста - ваша следующая остановка.

В этом модуле

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий