Как сделать карту для html

HTML-карта сайта как проявление гуманизма поисковой оптимизации

О необходимости наличия карты сайта знает SEO-специалист любого уровня (по крайней мере, мы на это надеемся). Вот только карты сайта бывают двух типов — XML и HTML. И если на первый взгляд, они отличаются парочкой символов, то на самом деле это не так. Экзистенциальная пропасть, лежащая в их предназначении, является причиной следующего пассажа: в теории XML-карта нужна больше поисковому роботу, чем пользователю, HTML — наоборот.

А как на самом деле? На самом деле выходит так, что большинство пользователей даже не подозревают о наличии HTML-карты, несмотря на мнение некоторых специалистов, что HTML-карта создаётся, прежде всего, для людей. Как можно заметить, даже поисковой оптимизации не чужды вопросы этики и гуманизма, и всё из-за какой-то HTML-карты сайта. Впрочем, не какой-то, а какой! В этой статье мы объясним почему.

HTML-карта сайта — это страница-каталог с гиперссылками разной степени серьёзности (принцип иерархичности — разделы, их категории и подкатегории) с 200 кодом ответа, расположенная в подвале (футере) сайта. Этакая полярная звезда, призванная облегчить поисковому роботу доступ к труднопроходимым страницам. Поэтому, если ваше детище с трудом поддаётся индексации (например, из-за причудливой структуры сайты), HTML-карта будет очень кстати.

Исходя из описательных предпосылок, можно выделить следующие преимущества HTML-карты

Каким принципам реализации HTML-карты сайта нужно следовать, чтобы она не потеряла человеческий облик?

Лаконичность: всё должно быть просто и понятно. Даже ребёнку.

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

Сводка общих рекомендаций при формировании HTML-карты сайта

Пример реализации, где наименование страны — отдельная карта сайта.

Варианты создания HTML-карты сайта

Вариант 1 — ручками. Попросите знакомого программиста и отправьте ему эту статью как техническое задание.

Вариант 2 — с помощью плагинов (особенно актуально для WordPress). Плагинов много, имя им — легион: Hierarchical HTML Sitemap, HTML Page Sitemap, Simple Sitemap, PS Auto Sitemap, WP SEO HTML Sitemap, Simple Wp Sitemap etc.

С какими проблемами можно столкнуться при создании карты?

HTML-карта сайта на примере крупных проектов

Как говорилось выше, одна из фич HTML-карты сайта — помочь сайту лучше индексироваться. Эта цель особенно актуальна для больших проектов. Ниже полюбуемся примерами реализации карты крупными онлайн-проектами. В комментариях к статье (ну а куда без конверсионной удочки? Тоже хотим хлеб с маслом по утрам) напишите, какая вам нравится больше?

airbnb.com — интересная реализация многоступенчатой карты сайта.

На прощание

От наличия HTML-карты сайта выигрывают все — вы, пользователи, поисковые роботы. Такой себе поисковый win-win и абсолютный must have, если у вашего сайта недоскан. Соблюдайте по возможности все рекомендации по её созданию, ибо, если Колумбу несовершенство карты позволило открыть Америку, вам оно откроет невиданные горизонты плохой индексации.

Источник

Карта-изображения в HTML

Дата публикации: 2009-07-30

Всем привет. С Вами Бернацкий Андрей.

В этом уроке я расскажу о том, как создавать карты-изображений в HTML.

Карта-изображения – это какая-либо картинка, может быть фотография, которая имеет несколько активных зон.

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

Сначала предлагаю Вам видео версию данного урока:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Делается это все достаточно просто. Берем любую фотографию с друзьями. Лучше вставить ее в свой отдельный блок

Я взял для примера свою фотографию.

Для div задан id для того, что бы можно было назначить какие-нибудь отступы или еще, что нужно будет. Я в своем примере ничего задавать не буду.

Главный параметр у тега img в данном случае – это usemap=»#img-nav». Он указывает на карту с каким именем мы будем ссылаться.

— значение параметра name должно совпадать со значением параметра usemap тега img, только у тега map оно записывается без символа #.

Далее тег — говорит, что сейчас выделим активную зону.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Параметр shape тега — показывает, какого типа будет наша область. На то, какая будет наша область, показывает значение параметра shape:

rect – указывает, что область будет в виде прямоугольника.

poly – произвольный многоугольник.

circle – область будет в виде круга.

Параметр coords содержит координаты нашей области.

Если shape=»rect», то указываются координаты левого верхнего угла и правого нижнего. То есть первая пара чисел указывает на левый верхний, а вторая пара чисел – на правый нижний угол.

Если shape=»poly», то указываются координаты каждой вершины многоугольника. shape=»poly» coords=»80,100,150,100,210,40,300,40,300,110″ в данном случае координаты первой вершины будут 80,100, второй 150,100, третий — 210,40, четвертой — 300,40, пятой — 300,110.

Далее параметр shref содержит адрес страницы, или E-mail адрес. То есть, то же что и у обычной ссылки.

title=»Andrey» alt=»Andrey» уже знакомые параметры. Останавливаться на них не буду.

Источник

HTML Изображение карта

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

Карта изображений

Нажмите на компьютер, телефон или чашку кофе на изображении ниже:

Пример

Вот исходный код HTML для приведенной выше карты изображений:

Как это работает?

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

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

Создание изображения

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

Совет: Вы можете использовать любое изображение в качестве карты изображений.

Создание карты изображений

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

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

Создание области

Затем добавьте кликабельные области.

Форма

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

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

Shape=»rect»

Координаты для shape= «rect» приходят парами, один для оси x и один для оси Y.

Координата 34, 44 находится на расстоянии 34 пикселей от левого края и 44 пикселей от верхнего:

Координата 270, 350 находится на расстоянии 270 пикселей от левого края и 350 пикселей от верхнего:

Теперь у вас достаточно данных для создания кликабельной прямоугольной области:

Это область, которая становится кликабельной и отправляет пользователя на страницу computer.htm:

Shape=»circle»

Чтобы добавить область круга, сначала найдите координаты центра круга:

Затем укажите радиус окружности:

Теперь у вас есть достаточно данных, чтобы создать кликабельную круговую область:

Это та область, которая становится кликабельной и отправляет пользователя на страницу coffee.htm :

Shape=»poly»

shape=»poly» содержит несколько координатных точек, которые создают фигуру, образованную прямыми линиями (многоугольник).

Это может быть использовано для создания любой формы.

Например, в форме круассана!

Как мы можем сделать круассан на изображении ниже кликабельной ссылкой?

Мы должны найти координаты x и y для всех краев круассана:

Координаты делятся на пары: одна для оси x, другая для оси y:

Пример

Это та область, которая становится кликабельной и отправляет пользователя на страницу «croissant.htm»:

name attribute of the tag is associated with the ‘s usemap attribute and creates a relationship between the image and the map.

Изображение карта с JavaScript

Кликабельная область не обязательно должна быть ссылкой на другую страницу, она также может вызвать функцию JavaScript.

Пример

Вы можете использовать атрибут onclick для выполнения функции JavaScript при щелчке области.

Краткое содержание

HTML Теги изображений

Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.

Источник

Как сделать карту сайта и зачем она нужна поисковикам

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

Содержание

Что такое XML- и HTML-карты и для чего они нужны

Это специальная страница (HTML) или файл (XML), которые содержат ссылки на все (или только важные) страницы сайта, доступные для индексирования поисковиками.

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

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

Какую информацию для поисковиков содержит sitemap.xml

Остановимся на XML-файле подробнее. Какую информацию он дает поисковым роботам? В целом ничего космического. Внутри обычно указаны:

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

Обязательно ли наличие sitemap.xml

Непосредственно на то, будет сайт в ТОПе или нет, наличие XML-карты если и влияет, то на какую-то десятую часть процента. Это просто инструмент для ускорения индексации, что особенно важно для молодых ресурсов. Так что ее наличие лишь рекомендация.

Стоит отметить, что карта зачастую нужна многостраничникам. Индексацию всех страниц отслеживать трудно, а sitemap.xml в Вебмастере позволяет оперативно отслеживать этот момент и исправлять ошибки. Например:

Как решать эти проблемы подскажет справка Вебмастера.

Какие sitemap бывают

HTML sitemap

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

HTML-карта полезна для SEO, так как равномерно распределяет вес по всем страницам сайта, создавая дополнительную перелинковку. Страница, загруженная ссылками, воспринимается роботом как спам. Так что больше 100 ссылок размещать не стоит (даже если они внутренние). В этом случае целесообразно разместить ссылки на главные разделы или категории, а подразделы со вспомогательными страницами исключить.

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

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

Тем не менее, HTML-sitemap — это не полноценная карта. Все-таки, когда на сайте больше сотни страниц, на «древе» органично все разместить не получится.

XML-карта

XML-карта нужна поисковым роботам. Здесь нужно указывать не только URL страницы, но еще прописывать частоту и дату последнего обновления, приоритет (главная – 1, подраздел – 0.6, страница – 0.1) и пр.

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

То есть, если обобщить, HTML дает ясное представление о ресурсе пользователям, а XML делает то же самое, но для робота.

Карта для мультимедийного контента

Если сайт генерирует видео- или фото-контент — это стоит отразить на карте. Так поисковые роботы получат больше данных о содержании страниц и индексировать их в своих сервисах (например, «Поиск по картинкам»), чем принесет доп. клики.

Карта для видео- или фото-контента отличается только наличием доп. тегов:

Для создания карты под фото- и видео-контент подойдет плагин WP Video SEO.

Основные требования поисковиков к XML

Перед тем, как перейти к гайду как бесплатно сделать xml-карту сайта (sitemap), важно ознакомиться с требованиями поисковиков. Например, Яндекс просит:

У Гугл тоже самое, только допускаются файлы до 50 Мб, а кириллицы, ясное дело, в URL быть не должно — только латинские буквы и цифры. Для сжатия файла можно использовать архиватор gzip, а для перевода русских доменов подойдет кодировщик Punycode.

Где создать и как подключить sitemap?

Ну а теперь самое время разобраться, как правильно сделать карту сайта. Сегодня владельцам интернет-ресурсов доступны три варианта действий. Ознакомимся с ними подробнее.

С помощью онлайн-генератора

Этот способ подойдет всем и каждому. Неважно, создан сайт на статичном HTML или каком-нибудь CMS. Но есть нюансы:

Конкретно в Рунете достаточно бесплатных вариантов: XML-Sitemaps, XML sitemap generator, Online XML sitemap generator, My Sitemap generator.

Как создать XML-карту сайта в XML-Sitemaps:

После остается скачать файл на компьютер, загрузить его в корневую директорию сайта (для этого подойдет любой FTP-клиент) и добавить его в Вебмастер Яндекса и Google.

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

Используем плагин для CMS

Плагины позволяют бесплатно создать карту сайта, которая будет обновляться автоматически. Это удобная игра в долгую. Учитывая, что половина Рунета базируется на WordPress, то вот инструкция по работе с Google XML Sitemaps:

Ссылку на карту можно найти в меню настроек данного плагина в самом верху.

Для других CMS-сайтов можно посмотреть плагины: для Joomla — Sitemap Generator, для Drupal — XML Sitemap, для OpenCart — Yandex Sitemap.

Через ПО

И последний вариант, как сделать xml-карту сайта — это использовать программы. В Сети их много, но мы остановимся на Majento. Кодить здесь не надо. Программа все сделает сама. Инструкция:

Majento поддерживает многостраничники (до 500 страниц). Но, если на сайте 501 и больше, можно использовать более мощный сервис: www.freesitemapgenerator.com.

Как добавить XML-файл в Вебмастер

Все. Как сделать карту сайта самому разобрались. Теперь ее нужно добавить в Вебмастер Яндекса и Гугла.

Для отечественного поисковика инструкция следующая:

Для Google Search Console инструкция немного другая:

Тут также придется выждать некоторое время, прежде чем появится сообщение «Успешно» или информация об ошибках. В последнем сценарии нужно нажать на кнопку с пиктограммой, где подробно расскажут о возможных проблемах.

Где размещать карту на сайте

Напоследок, еще немного о том, как сделать HTML-карту сайта. Точнее, как ее оформить. Проанализировав десятки ресурсов, начиная от Госуслуги и ПФР, заканчивая банками и интернет-магазинами, можно прийти к выводу, что большой разницы нет.

HTML-карту можно разместить:

Все зависит от редполитики, дизайна, количества разделов и пр. Главное, чтобы пользователь мог найти то, зачем пришел. Все-таки сайт должен быть полезным и удобным, а уже потом быть субъективно «красивым».

Полезное видео про правильную настройку карты сайта

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