Стратегия элементов внутренней ссылочной структуры сайта
Дата публикации: 31/03/2004
Категория: Управление вебсайтом
Версия для печати
By Barry Schwartz
2003-12-01
Внутренняя ссылочная структура
Внутренняя ссылочная структура, согласно SEO, общеизвестна как навигация web-сайта, является основным требованием для удобства ваших посетителей и роботов поисковых систем. Логическая и интуитивная навигация поможет вашему посетителю легко перемещаться по сайту и увеличит степень отдачи (будь то в продажах, телефонных звонках или просто читателях). Хорошо составленная ссылочная структура поможет паукам поисковых систем с легкостью индексировать страницы сайта. В конечном счете, это облегчит пользователям поисковиков задачу поиска необходимой информации.
Данная статья рассмотрит различные виды навигационных элементов, которые можно применить в стратегии внутренней ссылочной структуры проекта. Каждый навигационный элемент имеет свои "за" и "против". Эта статья исследует большинство из них. В дополнение, мы обсудим различные методы комбинирования всевозможных навигационных элементов с целью получить наилучшую ссылочную структуру для роботов поисковых машин и целевого посетителя.
Мы рассмотрим следующие вопросы:
- Простые гиппертекстовые ссылки (Hyper Text Links);
- Графическая навигация и кнопки;
- Выпадающие меню JavaScript либо DHTML;
- Анимация и Flash;
- Навигация при помощи карты изображений;
- Навигация и фрейм-технология;
Прежде чем погрузиться в изучение ссылочных элементов, давайте кратко обсудим два основных типа ссылок. Есть абсолютные и относительные ссылки. Абсолютная ссылка определяет местоположение страницы относительно всей сети, в то время как относительная ссылка определяет положение страницы относительно директории сайта.
Пример абсолютной ссылки:
a href="http://www.rustybrick.com/company.php">RustyBrick Company Information /a
Пример относительной ссылки:
a href="../company">RustyBrick Company Information /a
Теперь давайте рассмотрим простую гипертекстовую ссылку (Simple Hyper Text Link).
Простые гипертекстовые ссылки
Гипертекстовые ссылки являются простейшими навигационными элементами, доступными для построения внутренней ссылочной структуры проекта. В American Dictionary гипертекст определяется, как «компьютерная система возврата текста, позволяющая пользователю достигать определенных мест на страницах или других электронных документах, нажимая на ссылки внутри определенных web-страниц или документов». Основная часть гипертекстовой ссылки включает URL и набор слов, известных, как якорный текст. Пример простой гипертекстовой ссылки:
a href="page.html">anchor text /a. Где
href="page.html" - код, определяющий, куда будет отослан посетитель, если перейдет по ссылке.
Роботы поисковиков предпочитают простоту текста в гиперссылке. По сути, якорный текст является очень важным элементом в глазах поисковика, и ему придается больше веса в алгоритмах поисковых машин, чем обычному тексту тела страницы. Причина, по которой поисковики придают больше веса якорному тексту, основана на простом рассуждении, что вы будете ссылаться на страницу, которую сами считаете важной. Если вы полагаете страницу важной, так же поступят и поисковые системы. Итак, создавая гипертекстовые ссылки, уверенно ссылайтесь на ваши важные страницы и используйте специфические ключевые слова для страницы, на которую ссылаетесь.
Все же, что касается гипертекстовых ссылок, то существуют следующие недостатки:
- Гипертекстовые ссылки менее привлекательны, чем другие виды навигационных элементов;
- По умолчанию, гипертекстовые ссылки создают синий подчеркнутый текст, который в случае частого использования делает страницу нечитабельной;
- При сильном злоупотреблении якорным текстом могут восприниматься поисковой системой, как спам.
Понимание пользы и недостатков применения гипертекстовых ссылок поможет вам в построении внутренней ссылочной стратегии. Хорошая стратегия - использование гипертекстовых ссылок, как вторичной навигации. Используя такую технологию, как CSS, можно создавать привлекательно выглядящее гипертекстовые ссылки, как первичные навигационные элементы. Еще будет разумно составить карту сайта с гипертекстовыми ссылками. На карте сайта укажите ваши ошибки "file not found"/файл не найден/ (или 404). В конце концов, можно подумать об использовании «следа хлебной крошки» (breadcrumb trail) , чтобы помочь вашему пользователю отследить место своего нахождения и улучшить богатый ключевыми фразами якорный текст.
Если вы собираетесь использовать внутреннюю графическую ссылочную стратегию, пожалуйста, читайте следующий раздел, посвященный графической навигации и кнопкам.
Графическая навигация и кнопки
Графические навигационные значки или кнопки популярны в качестве гипертекстовой навигации. Графическая иконка или кнопка - это обычно изображение в формате GIF или JPEG, которое ссылается либо на абсолютный URL, либо относительный URL. Пример графической навигационной кнопки будет выглядеть, как:
a href="page.html" img src="pics/button.gif". /a
Где href="page.html" уже вам знакомо. Как вы видите, img src="pics/button.gif" находится на месте якорного текста.
"img" означает изображение;
"src" - источник.
Tаким образом, отрезок кода сообщает, что источник изображения может быть найден в директории рисунков и называется button.gif. Окружение
href="page.html" вокруг картинки активирует ее, как ссылку.
В использовании графических навигационных иконок или кнопок есть много очевидных достоинств. Одно из них состоит в использовании высоко влиятельных источников и цветовых гамм, которые не поддерживаются обычным HTML. Улучшение внешнего вида ссылок на вашем сайте может помочь привлечь больше нажатий пользователя на интересующие его страницы.
Тем не менее, поисковые машины
не видят графику. А если графика - действительно графическое отражение слов - как верно для всех нас - то, как поисковик это может распознать? Во всех случаях использования графики для навигации, будет целесообразно использовать Alt-тег в пределах кода источника изображения. Например, допишем в нашу ссылку ALT-текст:
a href="page.html" img src="pics/button.gif" alt="Короткое текстовое объяснение, куда вас приведет графическая ссылка" /a
Alt-тег дает поисковым машинам, так же, как и screen readers (используемые слепыми людьми) способность придавать графике смысловое значение, и указывается в месте якорного текста. Значит, важно также использовать специфические ключевые слова, которые применимы к странице, на которую вы ссылаетесь в Alt-теге.
Есть и дополнительные соображения, которые поднимаются при применении графической навигации внутри сайта. Многие web-дизайнеры используют JavaScript, который автоматически переключает изображение на экране на другое изображение, когда мышка пользователя попадает на графику. Дизайнеры применяют это, чтобы показать пользователю, внутри какого раздела он находится. Чаще всего здесь меняется цвет или размер изображения. Проблема состоит не в графике; действие mouseover достигается кодом JavaScript. Давайте взглянем на следующий пример JavaScript, который приводит в действие классический mouseover:
a href="page.html"
onmouseover="changeImages('nav_page', 'pics/nav_page_mouseover.gif'); return
true;"
onmouseout="changeImages('nav_ page', 'pics/nav_page.gif'); return true;">
img name="nav_page" src="pics/nav_page.gif" alt="Page
Contents"
/a
Как вы видите, ранняя, более простая версия графической ссылки изменилась на длинный, сложный отрезок кода. Давайте взломаем код, чтобы лучше понять, как он функционирует. Начиная от "onmouseover", читаем:
На мышке над изображением (входя в область изображения) к nav_page_mouseover.gif от nav_page.gif.
На мышке за пределами (покидая область изображения) возвращаем изображение от
nav_page_mouseover.gif
к
nav_page.gif.
У большинства поисковиков проблемы с чтением кода в пределах надписей mouseover , запускаемых JavaScript. Поэтому лучше не использовать mouseovers, либо, если вы их используете, обязательно применяйте гипертекстовые ссылки, как вторичную внутреннюю ссылочную структуру.
JavaScript не только активирует эффект mouseover, но также широко используется для создания выпадающих меню. Сейчас мы обсудим навигационные выпадающие или вытягивающиеся элементы JavaScript либо DHTML/CSS.
Выпадающие или вытягивающиеся меню JavaScript либо DHTML
Множество сайтов используют вытягивающиеся или выпадающие меню, чтобы позволить пользователям быстро находить разделы сайта. Первый вид, это вытягивающееся JavaScript, второй - выпадающее DHTML.
Вытягивающееся меню JavaScript позволяет вашему посетителю быстро переходить с одного раздела сайта на другой. Главная проблема этого вида навигации в том, что поисковые пауки испытывают сложности, читая URLы внутри JavaScript. И еще: экспертам по Usability, кажется, не нравится вытягивающиеся меню JavaScript, и они рекомендуют предлагать альтернативную навигацию на сайте. Разумно будет использовать гипертекстовые ссылки, в виде первичной или вторичной навигации при применении вытягивающихся меню JavaScript, как для пользы, так и для видимости поисковиком.
Выпадающие меню DHTML ошеломляют зрение и являются прекрасным способом ввести подразделы в главный навигационный раздел. Как вы можете увидеть на моем корпоративном сайте,
RustyBrick, Inc., домашняя страница использует множество DHTML, CSS и JavaScript для осуществления навигации с применением выпадающих меню. Это создает очень сложный кусок гиперссылочной навигации, который не посилам распознать роботам поисковых систем. Для того, чтобы помочь поисковым машинам индексировать сайт, моя компания применила альтернативную гипертекстовую ссылочную навигацию повсеместно наряду с "noscript-tag".
Noscript-tag выглядит как /noscript alternative web page /noscript. Noscript-tag позволяет броузерам, искалеченным JavaScript предоставлять альтернативную форму сайта, заключенную внутри noscript /noscript тегов. Этим тегом часто злоупотребляют спаммеры и он должен применяться лишь на сайтах с интенсивным использованием JavaScript. Поисковики действительно используют содержание и ссылки внутри noscript-tag при индексировании содержимого сайта. Итак, noscript-tag - хороший способ утилизирования выпадающих и вытягивающихся меню, предоставляя посетителю и поисковикам альтернативный метод найти ваш сайт.
Анимация и Flash
Macromedia и их продукт Flash переопределили ограничения web-пространства. Flash поднял web-дизайн на уровень, ранее считавшийся недостижимым. Дизайнеры могут создавать, публиковать и передавать высоко точные, полные движения и цвета анимационые изображения в обширной сети Интернет, не попадая в ловушки ограничений ширины строки или поддержки броузером. Flash, несомненно, навсегда изменил Интернет.
Flash web-сайты, вероятно, одни из худших типов сайтов в отношении видимости поисковой системой. Большинство пауков поисковых машин не могут прочесть содержание, заключенное внутри SWF (расширение Flash-файлов). Google и FastSearch способны прочесть URLы в пределах Flash файла, но не более того. Вот почему важно, создавая Flash сайты, также делать маленький, но богатый текстом web-сайт HTML для пауков и пользователей, предпочитающих медиа, менее привлекающих зрение.
Есть несколько путей использования Flash, которые помогут снизить негативные свойства Flash-файлов. Первый метод - использование смешанного Flash и HTML сайта . Второй метод - создание первой страницы, дающей пользователю возможность выбора между Flash и HTML версиями. Данное решение также часто применяется. Пауки проглотят версию HTML, в то время, как ваш посетитель будет в восторге от Flash версии. Третий метод борьбы с неразборчивостью Flash файлов - использование noscript-tag или noframe-tag, при применении чисто Flash сайта. Все же, это не лучший метод и эти теги следует использовать, когда нет другого выбора.
Навигация при помощи карты изображений
Карты изображений причисляются к единственной графике, которая позволяет web-пользователям безпрепятственно переходить по страницам вашего сайта, нажимая на часть (X и Y координаты) рисунка. Карты изображений используются по двум основным причинам:
1) для уменьшения размера загрузки сайта;
2) для упрощения кодирования ссылок в пределах сложной графики.
Разрешите, прежде всего, объяснить первую причину. Загрузка одного изображения занимает меньше времени, чем пяти. К примеру, у вас предполагается одно единственное изображение с пятью ссылками внутри. Пусть его длина 10 кб. В противовес, пять изображений с этого же «включенного» изображения могут составить в общем 14кб. Итак, каждое меньшее изображение потребует для опубликования по 3кб, составив вместе 14кб , когда одно общее изображение - 10кб. Вторая имеющаяся причина - упростить кодировку ссылок внутри сложной графики. Это означает, что если у кого-то имеется графика со ссылками, включенными повсеместно в неоднородный дизайн, то исключительно сложно программировать ссылки, не используя карту изображений. Для внедрения ссылки в каждое из пяти отдельных изображений, программисту потребуется вырезать их и перепрограммировать сайт для предоставления графики в однородной манере. Это может стать большой сложностью для неоднородной графики. Применяя карты изображений, вы можете определить X и Y координаты и установить для клика определенную X и Y координату, куда будет перенесен пользователь.
Теперь, когда мы понимаем, почему используются карты изображений, давайте их обсудим с позиций SEO. Карты изображений сложны и выглядят, как нечто вроде:
map name="imagemap_code"
area shape="rect" coords="18, 126, 112, 143" href="page_one.html"
alt="page one"
area shape="rect" coords="18, 109, 112, 126" href="page_one.html"
alt="page two"
/map
Вы видите, что здесь имеются сложные цифры и переменные, определяющие, куда перенести пользователя. По этой причине, карты изображений не дружественны поисковым системам. При их применении надо всегда использовать вторичную форму навигации, дружественную поисковику - как, например, гипертекстовые ссылки.
Навигация на сайте с фреймами
В сети существует множество сайтов, построенных на фрейм-технолигии. По многим причинам фреймы не дружественны поисковым машинам. Одна из наиболее основных причин то, что они стремятся бросить поисковым роботам вызов в определении того, какой файл является главным в содержании сайта. Представляйте себе сайт с фреймами в виде сайта, имеющего внутри много сайтов. Сайт такого рода строится с расположенной слева неподвижной навигационной панелью, в то же время давая возможность посетителю прокручивать вверх-вниз содержимое страницы справа. Обычно, когда переходишь по гиперссылке слева, справа меняется содержимое. Но поисковые машины не могут взглянуть, что же находится справа, и остаются в пределах навигационной панели, упуская все ваше содержание. Как вы понимаете, чем больше фреймов использовано внутри сайта, тем он менее дружественен для поискового робота.
Существует приемлемый стандарт, допускающий наличие фреймов и одновременно делающий ваш сайт более дружественным. Этот стандарт был разработан World Wide Web Consortium (также известным, как W3) и назван CSS или Cascading Style Sheets (страницы каскадного стиля). Я не стану вдаваться в особенности CSS в данной статье. Если вы желаете получить больше информации по CSS, ищите в сети или свяжитесь с моей компанией через
www.rustybrick.com/
Если вы настаиваете на использовании фреймов - вот некоторые ключевые моменты, которым нужно следовать для того, чтобы робот поисковой системы смог проиндексировать ваши страницы.
- Обязательно включайте ссылки с фреймов на внутренние страницы;
- Старайтесь прописывать каждую внутреннюю страницу в поисковую систему;
- Старайтесь получать ссылки с внешних сайтов на ваши внутренние страницы;
- Включайте текстовые ссылки внизу каждой страницы;
- Включайте метод «след хлебной крошки» вверху страницы;
- Включайте текстовые ссылки в пределах тела текста;
- Стройте карту сайта, которая ссылается на каждую внутреннюю страницу;
- Применяйте noframe-tag.
Выводы
Мы завершили дискуссию по стратегии внутренней ссылочной структуры. Как вы можете видеть, для ее осуществления есть много методов. Каждый несет свои за и против. В то время, как каждый метод имеет свои преимущества, я рекомендую всегда использовать вторичные гипертекстовые ссылки внизу каждой страницы. Также советую построить простую карту сайта, содержащую ссылку на каждую внутреннюю страницу вашего сайта.
В содержание данной статьи вошло:
- Простые гиппертекстовые ссылки (Hyper Text Links);
- Графическая навигация и кнопки;
- Выпадающие меню JavaScript либо DHTML;
- Анимация и Flash;
- Навигация при помощи карты изображений;
- Навигация и фрейм-технология;
Всего наилучшего в построении или перестройке вашей внутренней ссылочной структуры!
При поддержке дизайн-студии Netsah – web site design and development studio, web site promotion services, graphic design
А так же студии Promodo – Раскрутка сайта. Продвижение оптимизация сайтов. Реклама маркетинг в Интернет. Советы специалистов.
Статьи по теме:
