• Рубрики

  • Архивы

  • Продвижение сайта шаг за шагом

    Архив: Март, 2011

     

    Изучаем Основы HTML для SEO

    Любой профессиональный SEO должен владеть языком разметки HTML. В силу того, что ему довольно часто приходится вносить правки на страницах и корректировать отображение того или иного блока.  Так как сайты, с которыми профессионалу приходится работать всегда разные (какие-то статические, другие на различных CMS, какие-то используют технологию ssl, где-то статика с инклудами php), то ему знания html, а также элементарные понятия в php просто необходимы.

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

    Для начала хорошая новость. Изучать HTML на уровне верстальщика страниц или даже профи SEO вам не придется. Учитывая небольшой объем, усвоить необходимые и достаточные основы можно всего лишь за несколько часов.

    Ведь вам достаточно понимать структуру страницы, и выучить всего каких-то 20-30 тегов разметки, а также понять, какими возможностями обладает тот или иной тег. Даже если вам сделали качественный сайт, и все манипуляции по правке контента вы можете производить из удобной системы управления, все равно в некоторых случаях вам необходимо понимать структуру страницы в коде. Это может понадобиться для того, чтобы, например, зарегистрировать свой сайт в системах Яндекс.Вебмастер и Гугл.Вебмастер, при добавлении счетчика на сайт вам по-любому придется лезть в шаблон и вставить код счетчика к себе на сайт. Все это требует элементарных знаний html.

    Итак, начнем.

    Структура страницы

    Любая страница, которую вы видите в Интернете, имеет следующую структуру:

    <html>

    <head>Содержимое тега head</head>

    <body>Содержимое тега body</body>

    </html>

    Это первые и основные 3 тега. Давайте разберем их значение.

    html — тег, который сообщает браузеру, что данный документ имеет тот или иной формат. С его помощью можно показать, что у нас страничка статическая или динамическая, какие технологии мы используем на странице и какой стандарт. Все это обозначается в свойствах тега. Последняя строчка страницы </html> отличается от первой наличием слеша «/», которые означает конец тега.

    Свойства тега:

    Всему, что находится между открывающим и закрывающим тегом, будут присвоены соответствующие свойства, заданные в открывающей части.

    Любой html тег при открытии может содержать в себе какие-то (присущие этому тегу) свойства. Все они располагаются в открывающей тег части.

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

    Вернемся к тегу <html>

    На моей страничке если вы взглянете на код, то увидите его в следующем виде:

    <html xmlns=»http://www.w3.org/1999/xhtml» dir=»ltr» lang=»ru-RU»>

    Это значит, что наша страничка ориентирована под стандарты xhtml, направление текста у нас на странице слева направо (dir=»ltr»), язык у нас русский (lang=»ru-RU»).

    Тег <head>

    Далее внутри тега <html> первым идет служебный тег <head>. Назначение этого тега служебное. Его содержимое не отображается на страницы (кроме как в заголовке) и служит для того, чтобы дать роботам те или иные указания. В рамках данной статьи мы не будем перечислять все теги, которые могут встретиться внутри тега <head> (помня, что нам нужны лишь основы), и поэтому перечислим самые основные. Те из них, которые нужно знать оптимизатору.

    Теги внутри <head>, которые нужно понимать SEO:

    <title>Заголовок страницы</title>

    Тег заголовка страницы. Самый важный тег. Ему посвящена целая отдельная статья здесь.

    <meta content=»Страничка посвящена тому-то и тому-то» />

    Содержимое странички. Когда пользователь видит выдачу в поиске, то ему показывают адрес странички, заголовок <title>, а также формируется сниппет – небольшой фрагмент странички, чтобы пользователь сразу понял, что за информацию можно найти на этой странице. Тег description рекомендую заполнять всегда, т.к. из его содержимого часто может быть сформирован такой сниппет. Обратите внимание, сам тег называется <meta>, а то, что внутри после его основного названия, является свойствами. В данном случае свойство name=»description», идентифицирует его как тег описания страницы, а свойствоcontent=»Страничка посвящена тому-то и тому-то» сообщает, какое именно у нас описание. Во всех остальных тегах  использование свойств аналогично, только для каждого тега могут быть разные свойства. Но это мы обсудим чуть ниже.

    <meta content=»ключ1,ключ2, ключ3,…ключN» />

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

    <link rel=»stylesheet» href=»/style.css» media=»screen» />

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

    На некоторых сайтах такой тег отсутствует (и это серьезный косяк) и стили либо прописываются отдельно как тег <style>, либо же свойства пишутся непосредственно в самих тегах. Это оправдано только для простейших html страниц.

    Тег <body>

    Этот тег уже отвечает за видимую часть для пользователя. Речь идет о тексте и изображениях. Мы с вами рассмотрим основные теги, которые могут быть расположены внутри него:

    <h1> — заголовок

    Аля раздел. Еще бывают подразделы <h2>..<h6>. Раньше поисковики словам, расположенным в таких тегах давали больший вес, сейчас этого почти не ощущается. Как и любой тег дальше, от может иметь какой-либо стиль, влияющий на отображение текста внутри него.

    <p> —  тег абзаца

    Обычный абзац текста. Рекомендую пользоваться при размещении текстов на сайте именно этим тегом.

    <div> — слой

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

    <ul> — список

    <li> — строка в списке

    <ol> — строка в списке с нумерацией

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

    <strong> — логическое ударение

    <b> — полужирный шрифт

    Текст, который находится внутри этих тегов будет выглядеть полужирным шрифтом

    <a> — ссылка

    Основной тег, который должен знать SEO оптимизатор при правке html ))

    Давайте на примере. Беру код ссылки «Посты в блогах» из бокового меню на моем сайте. Теперь разберем, что он значит.

    <div>

    <li id=»menu-item-114″><a href=»http://www.theeye.ru/shag11_5.php«>Посты в блогах</a></li>

    </div>

    Все находится в блоке слоя <div> для которого указан класс b-steps. В файле стилей мы находим следующую запись:

    .b-steps { padding: 0px 23px 0 25px; font: 12px/18px Arial, Helvetica, sans-serif; list-style: none; } – задано относительное положение и отступы для текста внутри слоя

    .b-steps A {color: #000; } – задан цвет анкора ссылки

    .b-steps A:hover { color: #555; } – задан цвет анкора при наведении на него мышкой

    .b-steps li ul li { background: url(images/pic1.gif) no-repeat 0 11px ; padding: 5px 0 0 15px; list-style:none outside none; } – задан адрес картинки >>, а также отступы

    Ссылка с анкором «Посты в блогах» должна вести по адресу http://www.theeye.ru/shag11_5.php. Причем она находится в теге Li. А это тег списка, в стилях id=»menu-item-114″ class=»menu-item menu-item-type-post_type menu-item-114″ указано, что ссылка должна располагаться именно в этом месте  (это внутренние стили движка WP – т.е. можно на них не обращать внимания в принципе)

    <table> — тег таблицы

    <tr> — тег строки таблицы (располагается внутри тега <table>)

    <td> — тег ячейки таблицы (располагается внутри тега <tr>)

    Ранее очень часто используемый тег (правда сейчас его уже почти вытеснил тег <div>) для размещения блоков текста в разных местах страницы. Суть такая, что создается таблица, а внутри нужных ячеек мы располагаем ту информацию, которую надо отобразить в данном месте.

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

    Посмотреть код страницы  можно либо нажав ctrl+u (для FF, Opera или Chrome). Либо через меню – обычно это пункт «вид» или «страница». Затем надо выбрать «просмотр html кода», «источник» или «исходный код страницы».

    Если появятся дополнительные вопросы от «Чайников», то задавайте прямо здесь.

    Анализ статистики

    Анализ статистики посещаемости сайта, создание отчета

    Давайте рассмотрим  в качестве примера статистику некоторых из моих проектов, и на его основе проделаем простейший анализ посещаемости.  Что можно вообще сказать о сайте, во время просмотра статистики посещаемости сайта? Просмотр статистики сайтов онлайн делаю на примере счетчика Liveinternet

    Общая оценка динамики роста посетителей

    Этот график чаще всего показывают оптимизаторы, чтобы показать рост посещаемости сайта в рамках какого-то временного отрезка.

    График статистики сайта получен настройками, которые отмечены красной линией. Осталась только галочка на «Посетители», и разбиение времени – «неделя». Если смотреть график в разбиении по дням, то никакой динамики видно не будет – слишком мал промежуток. А на «неделе» и «месяце» напротив, очень хорошо видна динамика и эффект от SEO мероприятий. Просмотр этого отчета всегда делается для общей оценки работ и средней посещаемости сайта.

    В данном примере видно, что я начал активные работы по этому сайту в начале ноября 2010 года. За 4 месяца контентного продвижения (ссылка на описание), средняя посещаемость по сайту выросла с 85 до 175 человек в сутки.

    Посещаемость страниц и точки входа

    Подробная статистика сайта дает нам возможность  увидеть, куда именно пришли пользователи из поиска (или других источников).

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


    Для контентного продвижения это вообще обязательное условие. В данном примере мне интересна польза каждой страницы. Я знаю, сколько тратится денег (или времени) на ту или иную страницу. Поэтому мы рассматриваем точки входа, как сумму за месяц и анализируем данные этого месяца. Например, странички prodvijenie-samostoyatelno.php и stoimost-prodvijeniy.php ссылок на себя не содержат и обошлись мне исключительно в 1.5-2 часа времени на написание и размещение этих статей на сайте. При этом, потратив всего 4 часа, теперь ежемесячно я могу рассчитывать на 260-280 посетителей на свой сайт.

    Отчет посещаемости с разных сайтов-источников

    Этот отчет очень важно посмотреть, если вы размещаете баннеры или рекламные посты на некоторых других сайтах. Просмотр статистики «переходы с сайтов» дает мне представление, сколько я получил посетителей с каких-либо сайтов.


    Например, разместив рекламный пост на выделенном сайте, за 2 недели я получил 108 посетителей с этого сайта. Учитывая, что они перешли, скорее всего, после прочтения описания, это значит, что такие посетители очень ценные.

    Поисковые запросы

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


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

    Браузеры ваших посетителей

    Очень полезно знать, какими браузерами пользуются ваши посетители и вовремя проверять, что ваш сайт отображается корректно во всех основных.


    На графике можно видеть, как декабре 2010 года, большая часть пользователей обновила Opera10 на Opera11. Собственно тогда необходимо было проверить каждый свой продвигаемый проект на предмет корректного отображения.

    Также хорошо прослеживается рост популярности браузера FF3.

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

    Читать далее >>

    Автор TheEye, рубрики Статьи, Учебник SEO Теги:  •  0 коммент. »

    Adblock detector