Как создать красивую и удобную карту сайта

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

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

В этой статье я хочу рассказать вам о потрясающем инструменте для создания красивой и практичной карты сайта.

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

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

Но ближе к делу.

Все, что вам нужно сделать для подключения этой библиотеки (разумеется, не забыв скопировать её на сервер), это вставить в HEAD секцию HTML-документа, следующую строчку:

Copy Source | Copy HTML
<link rel="stylesheet" type="text/css" media="screen, print" href="slickmap.css" />


Применять этот инструмент очень просто: для того чтобы превратить UL список в дерево, вам нужно присвоить ему id равное "primaryNav". Например, вот этот код

Copy Source | Copy HTML
<ul id="primaryNav" class="col4">
    <li id="home"><a href="http://sitetitle.com">Главная</a></li>
    <li><a href="/about">О сайте</a>
        <ul>
            <li><a href="/history">История создания</a></li>
            <li><a href="/mission">Цели</a></li>
        </ul>
    </li>
    <li><a href="/services">Услуги</a>
        <ul>
            <li><a href="/services/design">Дизайн</a></li>
            <li><a href="/services/development">Разработка</a></li>
            <li><a href="/services/marketing">Маркетинг</a>
                <ul>
                    <li><a href="/social-media">SMM</a></li>
                    <li><a href="/optimization">SEO</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="/projects">Проекты</a>
        <ul>
            <li><a href="/projects/finance">Финансы</a></li>
            <li><a href="/projects/medical">Медицина</a></li>
        </ul>
    </li>
    <li><a href="/contact">Контакты</a>
        <ul>
            <li><a href="contact/map">Карта проезда</a></li>
            <li><a href="contact/form">Оставить отзыв</a></li>
        </ul>
    </li>
</ul>


превратится вот в такую симпатичную карту сайта:

На днях займусь обустройством своей карты сайта. Успехов в применении этого простого инструмента!

Если если вам понравилась эта статья, вы можете подписаться на материалы моего блога через RSS или email, а также присоединиться ко мне в Twitter или ВКонтакте.

Ключевые слова от Google Adwords

Как подобрать ключевые слова для продвижения сайта

Как найти и исправить битые ссылки на сайте

40 SEO твиплов, которые никогда не надоедают

Акция: бесплатное размещение SEO статей на WestSEO

Где купить постовые для SEO блога

Важнейшие факторы поисковой оптимизации

средняя · 2 марта 2010 г. · seo  карта сайта  slickmap css