Как написать SEO сайт?
Всегда получается, что SEO для веб дизайнера, как головная боль. Лучше его оставить для кодеров или аналитиков. Но в той статье, мы сможем быстро разобраться, как создать seo шаблон. Уделив 5 минут внимания этой статье, вы научитесь писать seo сайты, которые будут в разы эффективнее.
Вступление
SEO это один из способов повысить рейтинг своего сайта в поисковой выдаче. Как известно, для продвижения важны не только ссылки и контент, но и html разметка также. Валидность разметки, позволяет ранжироваться сайту быстрее и правельнее. Сейчас мы рассмотрим как пишется валидный html код сайта.
Шаг 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.
Сейчас наш код внутри <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>. На это есть две причины:
- Это дает возможность загружаться html странице первой. Пользователю не нужно ждать, пока загрузиться js файл.
- Это также помогает поисковым машинам читать вашу страницу. Как? Ладно, давайте думать логично, робот начинает сканировать страницу с начала и идет в низ. Если на пути попадается 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: искусство писать заголовки для Твиттер
| Хостинг | Биржи трафика | Биржи ссылок |
Development — Slavik Nemchenko, Taras Moroz