Войти Регистрация

Как написать SEO сайт?


Всегда получается, что SEO для веб дизайнера, как головная боль. Лучше его оставить для кодеров или аналитиков. Но в той статье, мы сможем быстро разобраться, как создать seo шаблон. Уделив 5 минут внимания этой статье, вы научитесь писать seo сайты, которые будут в разы эффективнее.

Вступление

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

Как написать seo сайт

Шаг 1 – Базовая HTML структура

Ниже предоставлен шаблон фундаментальной html разметки:

<!DOCTYPE html>
    <html lang="ru">
<head>
    <meta charset=utf-8>
    <title>SEO Webdesign tutorial</title>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
</body>
</html>

Этот код соблюдает стандарты, по которым браузеры могут понять, что делать из вашей страницы. В самом начале кода, мы указываем какой это тип документа. Потом указываем язык документа. Между тегами <head></head> содержиться информация о кодировке страницы (utf-8), название страницы. Также мы включили дополнение, которое позволит загрузить библиотеку HTML5 shiv, которая позволит работать html 5 в Internet Explorer. Естественно тег <body></body> будет содержать контент нашей страницы.

Все просто, не так ли? Но мы упустили важную информацию…

Шаг 2 – Добавляем мета теги

Давайте вернемся к нашему коду и добавим одну строку, после открытия тега <head>:

<meta name="description" content="A simple page that shows SEO friendly webdesign" />

Эта строка сообщает поисковику, что выводить в описании в результате выдачи. Нужно помнить, не факт, что будет отображаться именно это описание. Если вы неправильно составите описание, в которого нет ничего общего с контентом страницы, поисковик будет пренебрегать им. Давайте посмотрим, как выглядит наше описание в Google.

seo сайт в google

Сейчас наш код внутри <head></head> выглядит следующим образом:

<head>
    <meta name="description" content="A simple page that shows SEO friendly webdesign" />
    <meta charset=utf-8>
    <title>SEO Webdesign tutorial</title>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

Шаг 3 – Подключаем CSS и JS

 В большинства страниц присутствует файл стилей css, в котором сохранены параметры тегов. Также невозможно представить сайт без интерактивности, без javascript. Важно помнить, что при написании seo сайта, нам необходимо держать html код в чистоте. То есть, в коде не должно присутствовать лишних скриптов и стилей, все должно быть вынесено в отдельные файлы. А подключать CSS и JS будем следующим образом:

<!DOCTYPE html>
    <html lang="en">
<head>
    <meta name="description" content="A simple page that shows SEO friendly webdesign" />
    <meta charset=utf-8>
    <title>SEO Webdesign tutorial</title>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
    <script src="js/example.js"></script>
</body>
</html>

Примечание: мы добавили js файл в конце страницы, прямо перед тегом </body>. На это есть две причины:

  1. Это дает возможность загружаться html странице первой. Пользователю не нужно ждать, пока загрузиться js файл.
  2. Это также помогает поисковым машинам читать вашу страницу. Как? Ладно, давайте думать логично, робот начинает сканировать страницу с начала и идет в низ. Если на пути попадается js файл, он его читает до того, как пойдет дальше. Поэтому такой подход позволит сайту более эффективно ранжироваться поисковиком.

Еще один момент, если вы имеете больше нежели один css или js файл, всегда подключайте их в иерархии важности. Более важный файл должен подключаться первым. Хотя правильнее будет подключать только один файл, для чистоты html кода. Не стоит перегружать страницу чем попало.

Шаг 4 – Завершаем написание SEO шаблона сайта

Мы практически завершили с написанием шаблона, но так и не добавили никакого контента. Сейчас мы сделаем это. С изучением HTML 5 написание валидных seo сайтов стает проще. Весь код должен быть семантичным. Давайте добавим несколько основных элементов, которые используются практически во всех сайтах. Вставьте этот код ниже тега <body> и перед тегом <script></script>.

<header>
    <h1><a href="#">Website name</a></h1>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </nav>
</header>
<section>
    <article>
        <h2>Article header</h2>
        <p>Some simple text to help us along</p>
        <a href="#">Read more…</a>
    </article>
</section>
<aside>
    <h3>Simple sidebar</h3>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <p>Example text</p>
</aside>
<footer>
    <p>Copyright information</p>
</footer>

Теперь наш seo сайт выглядит следующим образом:

<!DOCTYPE html>
    <html lang="en">
<head>
    <meta name="description" content="A simple page that shows SEO friendly webdesign" />
    <meta charset=utf-8>
    <title>SEO Webdesign tutorial</title>
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
    <header>
        <h1><a href="#">Website name</a></h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <article>
            <h2>Article header</h2>
            <p>Some simple text to help us along</p>
            <a href="#">Read more…</a>
        </article>
    </section>
    <aside>
        <h3>Simple sidebar</h3>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <p>Example text</p>
    </aside>
    <footer>
        <p>Copyright information</p>
    </footer>
 
    <script src="js/example.js"></script>
</body>
</html>

Если мы раньше использовали div блоки, то теперь можем использовать более подробные теги. Такие теги, более чем, говорят о контенте.

  • Когда пишите css, старайтесь сокращать. Используйте селекторы, не назначайте классы или иды к элементам, старайтесь держать все в чистоте.
  • Такое же правило применимо для JS. Не используйте библиотек, если вам не нужна сложная интерактивность страницы.
  • Дерите все теги в минимуме, используйте только по необходимости  и в соответствии с контентом.

Шаг 5 – Sitemap.xml и Robots.txt

Мы практически закончили, как дополнение есть еще 2 вещи, которые позволят вашему сайту ранжироваться лучше.

Я уверен, вы знаете, что желательно иметь файлы sitemap.xml и robots.txt, для лучшей индексации. Сейчас мы напишем их, как дополнение к нашему seo сайту. Сначала sitemap.xml, в котором нет ничего сложного. Для каждой ссылки, вам необходимо добавить следующую структуру:

<url>
    <loc>http://www.example.com/</loc>
    <lastmod>2011-08-31</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
</url>

Sitemap не обязательно писать самому, существует множество инструментов, чтобы сгенерировать этот файл автоматически. Главное, чтобы он присутствовал на вашем сервере. Далее мы создадим простой robots.txt файл. В этом файле, мы можем указать некоторые параметры индексации вашего сайта. Какие директории и страницы допустить к индексации, какие игнорировать. Вот так пишется этот файл:

User-agent: *
Disallow: /category/design.html

Заключение

Это основы написания seo сайтов. Само собой, нужно учитывать и другие факторы: внутренняя перелинковка, написание статей, покупка ссылок. Без этого всего, невозможно создать качественный конкурентоспособный сайт. Поэтому углубляйтесь в тему сайтостроения и продвижения. Если у вас остались вопросы или замечания по теме: как написать seo сайт, выскажитесь в комментариях.



Дальше: Twitter SEO: искусство писать заголовки для Твиттер


Дискуссия по теме     2 Комментария 
Добавить комментарий
Сергей Ильин 12.07.2012 в 09:27
Откуда вы взяли информацию, что поисковик дойдя до js-файла, читает его до того, как пойдет дальше? По моему это бред. Даже если поисковики читают (для поиска вредоносного кода, например) js-файлы, то явно не при каждой загрузке вашей страницы. И подключать один css файл желательно, не "для чистоты html кода", как вы написали, а для уменьшения количества запросов к серверу при загрузке первой страницы. Кстати, слово "правельнее" (во вступлении) пишется так: правильнее
Тарас 12.07.2012 в 15:06
Да, вы правы... имелось в виду не js файл, а js код... Хотя, насчет css кода, именно для чистоты. Все должно быть на своих местах. HTML код должен быть чистым и семантичным, не нужно туда лепить все подряд. Так будет проще в первую очередь для разработчика. Спасибо за указание ошибки.
Просмотров: 4687