Теги заголовков и сайт на iWeb

Главная » iWeb  / 18.12.2011

Доброго времени суток, дорогие друзья!

Сегодня немного поговорим о поисковой оптимизации сайта, созданного в редакторе Apple iWeb, а именно, о необходимости и возможности применения тегов заголовков

…

.

Почему необходимо применять теги заголовков

Есть несколько ключевых моментов, которые необходимо знать и уметь применять при создании сайта: недостаточно сделать просто интересный сайт, важно чтобы информация с вашего ресурса хорошо индексировалась поисковыми роботами (мы же хотим, чтобы наши материалы были на высоких позициях в результатах выдачи поисковых систем?). Для этого необходимо стараться соблюдать хотя бы минимальные требования при оформлении материалов, которые вы публикуете у себя на сайте, в частности, это относится к правильному оформлению заголовков (заголовками обычно отделяются определенные смысловые части материала). Вы можете задать резонный вопрос: «А что тут оформлять то? Задал размер шрифта побольше и выделил цветом – вот и заголовок…». И, в принципе, окажетесь правы… Для посетителей вашего сайта этого будет достаточно: ключевой текст страницы выделен, соответственно, на нем и заострится внимание. Вот только для поисковых систем такое выделение, ровным счетом, ничего не значит: это просто текст и  ничего более, информация выделенная таким образом, с точки зрения поисковых роботов, имеет такую же ценность как и остальной текст страницы. Конечно, поисковые механизмы постоянно улучшаются и, вероятнее всего, релевантность такого текста все-таки как-то учитывается, но мы, особенно надеяться на это не будем:  лучше подстраховаться и применить для выделения наших заголовков стандартные теги HTML вида

…

.

Спецификация HTML подразумевает применение шести стандартных заголовков разного уровня: тегом

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

, соответственно, наименее важный. Если не применять стилевых правил, текст расположенный внутри тега

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

…

и оформить их в соответствии со стилем сайта. Этим мы и займемся, применительно к сайту созданному на iWeb.

Как использовать теги 

…

при создании сайта на iWeb

Как вы уже поняли, использование данных тегов является очень важным моментом с точки зрения поискового продвижения сайта, но, к сожалению, разработчики из компании Apple не предусмотрели для нас такой возможности в своем редакторе: в итоге, нам придется самим найти выход из этой щекотливой ситуации. Забегая вперед скажу: способ, описанный в данном материале, достаточно просто использовать как в процессе создания сайта так и в случае, если ваш сайт уже функционирует - нам необходимо будет внести лишь небольшие коррективы. «Подглядел» я его на сайте beyondiweb.com, правда, применительно к своему сайту, мне пришлось его несколько «модернизировать». Чтобы было понятнее, я буду давать скриншоты с небольшими описаниями.

Для начала, используя редактор iWeb, необходимо наши заголовки  заключить в теги

…

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

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

Далее публикуем свой сайт в локальную папку на  компьютере (в последствии, вы в любой момент сможете залить сайт на свой хостинг с помощью любого FTP-клиента) и открываем страницу в интернет браузере, как видите браузер вывел наши теги как обычный текст:

Если заглянуть в исходный код опубликованной страницы с помощью текстового редактора (можно, например, использовать для этих целей TextWrangler), мы увидим что iWeb заменил наши теги спецсимволами:

Нам же теперь необходимо произвести обратную процедуру и заменить эти спецсимволы на теги HTML. Для этого нам понадобится программа iWeb SEO Tool, скачиваем ее и устанавливаем на свой компьютер. Подробнее об использовании этой программы я расскажу в следующий раз, сейчас же мы с помощью нее произведем необходимые нам изменения. Запускаем программу и, с помощью кнопки ‘Open Website’, добавляем свой сайт (помните мы сохраняли его в локальную папку), ставим галочку напротив поля ‘Convert header tags

...

in textboxes to HTML code’:

Если теперь нажать кнопку ‘Apply to Entire Site’, программа iWeb SEO Tool произведет конвертацию спецсимволов в теги заголовков. Производим конвертацию и снова открываем нашу страницу в веб-браузере (программу пока оставьте открытой):

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

Применяем стили к заголовкам

Помните, я рекомендовал сразу оформить ваши заголовки в соответствии с дизайном сайта? Сейчас нам это пригодится... Идем в папку, в которую вы публиковали свой сайт, находим папку ‘название_вашей_ страницы_files’ и заходим в нее. В ней нас будет интересовать файл  ‘название_вашей_ страницы.css’ - открываем его в текстовом редакторе (все тот же TextWrangler). Этот файл содержит в себе стили оформления всех элементов вашей веб-страницы. Вспоминаем, каким шрифтом (семейство, размер, начертание, цвет) вы оформляли свои заголовки, ищем соответствующие стили и копируем их в отдельный файл (назовем его, например, ‘header_tag.css’ ). В корневой папке вашего сайта создаем папку ‘CSS’ и сохраняем этот файл в нее. Названия стилей в этом файле меняем соответственно на h1, h2 и так далее. Чтобы было понятнее, приведу скриншот того что было у меня и как необходимо сделать (примеры моих оригинального файла стилей, созданного редактором iWeb, и получившегося файла ‘header_tag.css’, находятся в header_tag.zip).

После того, как вы создали файл стилей заголовков, в окно ‘Head code’ программы iWeb SEO Tool (помните, мы оставили ее открытой?) вставляем следующий код:

Нажимаем кнопку ‘Apply’, далее кнопку ‘Re-apply Saved Tags’ и открываем свою страницу в веб-браузере: смотрим на свои заголовки и наслаждаемся проделанной работой...

Если вы внесете в страницу изменения и переопубликуете свой сайт, iWeb снова заменит теги заголовков спецсимволами: ничего страшного в этом нет, просто запустите iWeb SEO Tool, выберите свой сайт и нажмите ‘Re-apply Saved Tags’ - заголовки примут задуманный вами вид.

На сегодня все: как всегда, буду рад вашим комментариям и письмам.

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

Created by Apple iWeb • Library for Me