Как сделать графическую карту сайта
Карты-изображения
Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах — серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельные файлы для каждой карты-изображения.
В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение.
Клиентский вариант карты-изображения
Рис. 1. Закладки являются ссылками, созданными с помощью карты
Чтобы сделать ссылки на закладки, показанные на рис. 1, следует использовать следующий код (пример 1).
Пример 1. Использование карты-изображения
Атрибуты тега AREA
shape
Определяет форму активной области. Форма может быть в виде окружности ( circle ), прямоугольника ( rect ), полигона ( poly ).
Добавляет альтернативный текст для каждой области. Служит лишь комментарием для ссылки, поскольку на экран не выводится.
coords
Задает координаты активной области. Координаты отсчитываются в пикселах от левого верхнего угла изображения, которому соответствует значение 0,0. Первое число является координатой по горизонтали, второе — по вертикали. Список координат зависит от формы области.
Для окружности задаются три числа — координаты центра круга и радиус.
Для прямоугольника — координаты левого верхнего и правого нижнего угла.
Для полигона задаются координаты его вершин (рис. 2).
Рис. 2. Координатные точки для полигона
Карты-изображения позволяют создавать ссылки на разные области одного изображения. Использование этого подхода наглядней, чем обычные текстовые ссылки и позволяет применять всего один графический файл для организации ссылок. Однако не нужно считать, что карты-изображения следует включать везде, где требуются графические ссылки. Прежде всего, следует оценить все доводы за и против, а также просмотреть альтернативные варианты.
Преимущества карт-изображений
1. Карты позволяют задать любую форму области ссылки. Учитывая, что изображения по своей природе прямоугольны, сделать графическую ссылку сложной формы, например для указания географического района, без карт-изображений не представляется возможным. Как правило, в географической тематике карты-изображения и применяются наиболее часто.
2. С одним файлом удобней работать — не приходится заботиться о состыковке отдельных фрагментов и рисунок легко можно поместить в нужное место.
Недостатки
1. Нельзя установить всплывающую подсказку и альтернативный текст для отдельных областей. Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Для карт-изображений эта особенность является актуальной, ведь если отключить просмотр изображений, что делают многие пользователи, то в итоге увидим лишь один пустой прямоугольник.
2. При сложной форме области ссылки увеличивается объем кода HTML. Контур аппроксимируется набором прямых отрезков, для каждой точки такого отрезка следует задать две координаты, а общее количество таких точек может быть достаточно велико. Справедливости ради, следует отметить, что сложные формы являются частным случаем и применяются достаточно редко.
3. С картами-изображениями нельзя сделать разные эффекты, которые доступны при разрезании одного рисунка на фрагменты: эффект перекатывания, частичная анимация, индивидуальная оптимизация картинок для их быстрой загрузки.
Юзабилити
С позиции удобства пользователей, карты-изображения имеют только одно преимущество — ссылки разнообразной формы. Это добавляет наглядность в представлении информации — мы не ограничены прямоугольной формой ссылки и можем использовать ссылки сложной конфигурации для своих целей. Во всех остальных отношениях от них проку нет — обычные текстовые ссылки более информативны и им не страшно отключение показа картинок в браузере. Тот факт, что одно изображение загружается быстрее, чем та же картинка, но порезанная на фрагменты и сохраненная в виде набора графических файлов, легко обходится. Каждый из таких конечных файлов можно уменьшить, используя индивидуальные настройки оптимизации. В итоге, общий объем всех фрагментов будет занимать меньше места, чем одно изображение. Не стоит сбрасывать со счетов и психологический фактор — человеку кажется, что набор маленьких картинок загружается быстрее, чем одна большая.
Основной недочет карт — нет четко выделенных границ ссылок. Поэтому эти границы приходится выделять разными средствами уже на изображении. Если рисунок не загрузился по каким-либо причинам, то разобраться в наборе ссылок становится весьма проблематичным.
Альтернативные варианты
Не всегда есть острая необходимость использовать карты-изображения, поэтому следует обратить внимание на то, что существуют и другие возможные варианты выполнения поставленной задачи.
Использование FLash
Во flash-роликах можно создавать разные области ссылок, используя возможности векторной графики. Благодаря широким возможностям, на Flash можно создавать потрясающие меню и средства навигации. Но тут тоже требуется осторожность, чтобы не потерять за деревьями леса.
Разрезание изображений
Это одно из популярных средств в дизайне. Одно изображение в этом случае разрезается с помощью специальных программ на фрагменты, которые окончательно сводятся вместе, создавая иллюзию цельной картинки. Хотя области разрезания могут быть только прямоугольные, в большинстве случаев этого вполне достаточно для создания ссылок. Для каждого фрагмента можно выбрать наиболее подходящий графический формат, в котором он будет сохранен, параметры оптимизации, добавить альтернативный текст. Тогда даже при отключенном показе картинок, будут хорошо видны границы областей и замещающий изображение текст.
Резюме
Как выяснилось, причина использовать карты-изображения только одна — сложная форма ссылок, продиктованная задачами дизайна. Типичное применение — регионы географической карты, которые служат ссылками. Во всех остальных случаях можно обойтись и текстовыми ссылками, а при необходимости создания графической навигации, одно изображение для удобства можно разрезать на фрагменты. Такой подход создаст больше удобства пользователям, особенно тем, которые в силу разных причин отключают показ изображений в браузере. О них тоже нужно помнить.
Как создать и настроить карту сайта sitemap.xml
Время чтения: 10 минут Нет времени читать? Нет времени?
Из этой статьи вы узнаете, что такое sitemap.xml, как создать и настроить карту сайта.
Что такое карта сайта и зачем она нужна
В этом руководстве будем говорить преимущественно о картах сайта для поисковых систем. Это XML-документы, которые содержат служебную информацию. Они помогают поисковым роботам ориентироваться на сайтах и эффективно их индексировать.
Также существуют карты сайта для живых посетителей. Их еще называют HTML-картами. По сути они представляют собой каталог страниц сайта с отображением иерархии. HTML-карта помогает посетителям путешествовать по сайту и искать нужные страницы.
XML и HTML – языки разметки.
HTML-карты – устаревший и не очень удобный элемент навигации, поэтому уделим им совсем немного внимания в конце статьи. А пока сосредоточимся на XML-картах, которые важны для корректной индексации ресурсов.
Зачем нужна карта сайта sitemap.xml
Подробно об этом можно прочитать в справочниках для вебмастеров Google и «Яндекс». Краткая суть: в sitemap.xml содержится важная для поисковых роботов информация. Это:
Те есть карта сайта – навигатор для поисковых систем.
Можно ли обойтись без sitemap.xml
Можно. Поисковые системы считают XML-карту сайта рекомендованным инструментом. Например, если на сайте нет sitemap.xml, «Яндекс» отметит это в списке возможных, а не критичных или фатальных проблем.
Роботы – не дураки, они проиндексируют сайт и без sitemap.xml. Но в некоторых ситуациях отсутствие XML-карты приводит к проблемам с индексированием. Вот примеры:
Рекомендация: если у вас коммерческий сайт, от посещаемости которого зависит успех бизнеса, создайте и подключите sitemap.xml. Ниже подробно описано, как это сделать.
Как создать и подключить файл sitemap.xml
Создать карту сайта можно двумя способами. Первый – сделать sitemap.xml можно с помощью внешнего онлайн-генератора. Второй – понадобится модуль или внутренний генератор для конкретной CMS. Рассмотрим оба способа.
Как создать карту сайта онлайн с помощью генератора
Этот способ хорош тем, что вы не привязываетесь к конкретному движку. С помощью онлайн-генераторов можно сделать sitemap.xml для сайта на любой CMS или для статичного сайта на HTML.
У этого способа есть недостаток. Он подходит для сайтов с ограниченным количеством страниц, например, для сайтов-визиток. Если на сайте пять страниц, а новые создавать вы не планируете, сделайте sitemap.xml один раз с помощью бесплатного внешнего сервиса. Примеры будут дальше.
Если на сайте постоянно появляются новые страницы, бесплатные внешние генераторы не подходят. Они не включают в карту сайта новые URL, поэтому sitemap.xml теряет актуальность.
Вот несколько генераторов карты сайта:
Чтобы создать sitemap.xml с помощью XML-Sitemaps, укажите URL сайта и нажмите кнопку Start.
Генератор создаст карту сайта в течение нескольких минут. Скачайте файл sitemap.xml на жесткий диск ПК.
Теперь загрузите sitemap.xml в корневую директорию на сайте. Это можно сделать с помощью FTP-клиента, например, FileZilla. У нас есть руководство по работе с этой программой.
Если не знаете, где находится корневой каталог сайта, найдите файл index.html.
Как создать карту сайта с помощью дополнительных модулей для CMS
Этот способ создания карты сайта более удобный по сравнению с бесплатными онлайн-генераторами. Он обеспечивает дополнительную гибкость: вебмастер может управлять параметрами sitemap.xml. Кроме того, надстройки автоматически обновляют карту сайта после создания новых страниц и уведомляют об этом поисковые системы.
Если ваш сайт работает на WordPress, обратите внимание на плагин Google XML Sitemaps. Установите и активируйте модуль. Перейдите на страницу настроек. В базовых параметрах включите уведомления для Google, добавьте URL карты сайта в robots.txt и включите сжатие файла sitemap.xml.
В разделе «Приоритет статьи» отключите автоматический расчет приоритета публикаций. Позже вы укажете приоритеты страниц вручную.
Уделите внимание разделу «Содержание карты сайта». Включите в sitemap.xml только те типы страниц, которые нужны вам в индексе поисковых систем.
Например, если у вас интернет-магазин, имеет смысл включить в карту сайта страницы категорий и меток. В этом случае поисковики будут показывать пользователям страницы каталога, например, рубрику «Смартфоны» или страницу каталога с товарами, помеченными тегом «детский». Если страницы меток и категорий в выдаче не нужны, не включайте их в карту сайта.
Обязательно отметьте галочкой опцию Include the last modification time. В этом случае плагин укажет в карте сайта дату последнего обновления публикации. Эта информация нужна роботам, чтобы планировать повторное сканирование страниц.
В разделе Excluded Items при необходимости исключите из карты сайта отдельные категории или страницы.
В разделе Change Frequencies можно попросить поисковые системы индексировать те или иные типы страниц с определенной периодичностью. Поисковики скорее всего проигнорируют параметр changefreq в sitemap.xml, так как они сами планируют краулинговый бюджет сайта. Тем не менее плагин дает возможность указать эти настройки в карте сайта.
В разделе «Приоритеты» укажите приоритетность страниц сайта. Допустимы значения от 0,1 до 1,0. По умолчанию страница имеет приоритет 0,5. Присвойте высокий приоритет страницам, которые считаете важными по сравнению с остальными страницами сайта. Например, если на главной появляются анонсы новостей или новых товаров, она может считаться самой приоритетной страницей.
Обратите внимание, время последнего обновления, желаемая частота индексации и приоритетность страниц – необязательная информация. Поисковые системы могут ее учитывать, а могут и не учитывать. Вы ничего не потеряете, если оставите в этих разделах дефолтные значения.
Сохраните изменения. После этого о плагине Google XML Sitemaps можно навсегда забыть, так как он работает в фоновом режиме, автоматически обновляется и сам актуализирует карту сайта. Вам останется только добавить sitemap.xml в кабинеты для вебмастеров Google и «Яндекс».
Google XML Sitemaps – не единственный плагин для WordPress, с помощью которого можно создать карту сайта. Например, в комбайне All in One SEO Pack есть модуль «XML карта сайта». После активации модуля можно создать карту сайта и настроить ее параметры.
Если вы публикуете на сайте видео и хотите, чтобы они ранжировались в поиске, можно создать карту сайта для видео. Для этого можно воспользоваться отдельным генератором, например, WP Video SEO.
Вот генераторы sitemap.xml для других движков:
После создания карты сайта добавьте ее в кабинеты вебмастеров поисковых систем.
Как добавить карту сайта в кабинеты вебмастеров
Чтобы добавить карту сайта в Search Console, выберите раздел «Файлы Sitemap». Добавьте URL карты и нажмите кнопку «Отправить». Обычно карта сайта доступна по адресу типа vash-site.ru/sitemap.xml.
Поисковику понадобится какое-то время, чтобы проиндексировать карту сайта. После индексации появится статус «Успешно» или сообщение об ошибках. Чтобы просмотреть отчет об индексировании карты сайта в новом интерфейсе Search Console, нажмите на отмеченную на иллюстрации пиктограмму.
В отчете можно увидеть данные об индексировании sitemap.xml. Например, если на сайте есть закрытые от индексирования страницы, уведомление об этом появится в отчете.
Чтобы добавить sitemap.xml в «Вебмастер», выберите раздел «Индексирование – Файлы Sitemap». Укажите URL карты сайта в соответствующем поле и нажмите кнопку «Добавить».
В «Вебмастере» уведомление о проблемах с картой сайта появляется в разделе «Диагностика сайта». Также корректность файла можно проверить с помощью специального инструмента.
Как создать HTML-карту сайта
Как отмечалось выше, HTML-карта – элемент навигации для живых пользователей. Если у сайта логичная структура и удобное меню, HTML-карта не нужна. Если сайт большой, а пользователи жалуются на запутанность структуры, попробуйте решить проблему с помощью карты сайта.
Когда искал пример HTML-карты сайта, почему-то сразу подумал про сайты государственных пенсионных фондов. И не ошибся. Видимо, пожилым пользователям сложно ориентироваться на сайте с помощью меню. Учитывайте это, когда будете решать целесообразность добавления карты сайта в формате HTML.
Создать карту сайта в формате HTML на WordPress можно с помощью плагина Hierarchical HTML Sitemap или аналогичных решений. Достаточно установить и активировать надстройку, а затем вставить предложенный шорткод на страницу, где нужна карта сайта.
Вот решения для других CMS:
В OpenCart карта сайта в формате HTML создается автоматически.
Карта сайта (Sitemap xml): как создать и куда добавить
Предположим у вас есть сайт, забитый уникальным контентом, на котором проведена SEO оптимизация и сидите вы, потирая ладошки в ожидании, когда же ваше детище начнет посещаться поисковым роботом, индексироваться и приносить заветный трафик. Идет время, а результат ваших стараний не особо-то и виден. В чем же дело? Возможно, что-то все же было упущено из виду, что-то да забылось в погоне за ништяками. Предположим, что сайт по-прежнему уникальный и оптимизаторы из вас хоть куда. Тогда нужно разбираться, почему поисковик так неохотно вас посещает и по какой причине все происходит так медленно.
Каждый web-проект должен иметь два важных, а может и основных файла: это роботс (robots.txt) и карта сайта (sitemap.xml). Если какой-то из них отсутствует или неверно заполнен, велика вероятность, что ресурс не даст того результата, на который вы рассчитывали. Ведь у поисковых ботов есть заданные ограничения как по времени нахождения на ресурсе, так и по количеству документов, которые они могут проверить и занести в базу. А это все к тому, что если вами не были заданы пути перемещения для поискового робота, то он может добраться до контента очень нескоро, перед этим побродив в файлах движка.
Чтобы избежать подобной неразберихи, в файле роботс мы говорим, на что ботам не стоит тратить время, а с помощью карты сайта, наоборот, подсказываем куда следует заглянуть и где побродить.
Предположим, что с первым у нас все срослось и поисковики начали индексировать наш проект, а вот отсутствие второго может затянуть достижение поставленных целей. А теперь подробнее про создание sitemap.
XML и HTML версии карты сайта
Sitemap.html выступает в роли навигации для гостей нашего ресурса, которая помогает понять структуру сайта и найти интересующий их раздел.
Sitemap.xml подсказывает и помогает поисковым ботам обнаружить и начать индексировать страницы нашего проекта. Если мы имеем большой уровень вложенности и многочисленное количество веб-страниц на сайте, XML гарантирует, что боты не упустят из вида, то что нужно проиндексировать. Как приятный бонус мы получаем плюсик к карме в виде увеличения доверия к ресурсу со стороны поисковиков.
Положительные стороны присутствия sitemap. xml на сайте
Как создать и добавить sitemap. xml на сайт
Берем любой текстовый редактор, например Notepad++, и начинаем творить.
Первым блоком идет стандартная часть, в которой мы указываем:
Далее добавляем следующий блок, который заключается в теги «url» и описывает одну из страниц нашего сайта:
Сохраняем получившийся файлик в формате XML и помещаем его в корень сайта. Далее указываем путь к нему в robots. txt прописывая данную строчку:
В первую строку вписываем полный URL нашего сайта с http://Наш сайт.
Вторая строка, которая называется « Change frequency », показывает поисковым роботам, как часто будут обновляться веб-страницы. Можем выбрать: never, weekly, daily, hourly, monthly, yearly.
Третья строка « Last modification » показывает, когда последний раз обновлялась страница, можем выбрать либо дату когда мы решили создать карту сайта, либо выбрать « Use server’s response » — тогда генератор автоматически внесет дату последнего изменения.
И четвертая строка « Priority », как мы уже ранее обсуждали позволяет выбрать приоритет к индексации, выбираем « Automatically Calculated Priority ».
Как сообщить о файле sitemap после создания Google и Яндекс
Заходим в Вебмастер и действуем следующим образом.
Выбираем проверку карты сайта:
Далее нажимаем «по ссылке».
И задаем путь к нашему файлу sitemap.
Проверяем что получилось:
Убеждаемся, что все в порядке и отправляемся на поклон к Google.
Для того чтобы попасть в Search Console Гугл, в которой, собственно, и можно сообщить о нашей карте, переходим по ссылке.
Выбираем «Добавление/проверка файла sitemap»:
Вводим только название нашей карты сайта с XML (т.к. URL сайта уже указан):
Нажимаем «Отправить» и видим такое сообщение:
Обновляем страницу — перед нами результат проверки и если в колонке «Проблемы» стоит прочерк, значит, мы все сделали правильно.
Подведем итоги
Создать и разместить файл sitemap. xml на ресурсе по факту минутное дело, для этого можно использовать любой текстовый редактор или онлайн-генератор. Если у вас есть карта сайта на своем ресурсе вы ускоряете и упрощаете жизнь поисковому роботу, который следует по указанному пути и индексирует нужные страницы. Это значит, что результат вашей работы по оптимизации имеет шанс быстрее стать заметным. Но важно не забывать про карту сайта и периодически ее обновлять, т.к. страница может перестать участвовать в продвижении, а боты будут продолжать ее посещать, что отразится на позициях. Также наш XML-проводник может служить помощником не только роботам, но и воришкам контента, ведь в sitemap мы указываем нужные нам документы, что значительно упрощает жизнь копипастерам. Поэтому рекомендуем периодически проверять контент вашего ресурса на уникальность. Соблюдая эти правила вы повышаете доверие поисковых систем Google и Яндекс к своему ресурсу.