Страницы Интернета

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

Часть 1. Соблюдайте HTML и CSS стандарты

1.1 Всегда закрывайте теги.

<ul>
<li>Пункт списка</li>
<li>Пункт списка</li>
<li>Пункт списка</li>
</ul>

1.2 Соблюдайте правильную вложенность тегов.

<div><span>текст</div></span>

<div><span>текст</span></div>

1.3 Никогда не описывайте CSS и JS внутри HTML макета и атрибутов тегов.

<p style="color:red;font-size:20px;text-align:center">текст</p>
<!-- или -->
<style>
p{
color:red;
font-size:20px;
text-align:center
}
</style>

1.4 Забудьте о Caps Lock и заглавных буквах.

• Чистый код, а, следовательно, и дополнительное доверие поисковых систем к вашему сайту;
• Ускоренная загрузка страниц, так как браузеру не приходится тратить время на отладку невалидного документа.

Часть 2. Ускоряем загрузку страниц – один из факторов ранжирования

2.1 Указывайте настоящие размеры картинок.

• Обязательно указывайте атрибуты width и height для тега img:

  <img src="/images/main.jpg" width="773" height="896"/>

  Это ускорит загрузку изображений, так как браузер заранее будет знать, какой размер нужно отобразить.
• Обязательно вставляйте картинку того же самого размера, который указали в атрибутах.

2.2 Используйте CSS3 вместо JS.

2.3 Меньше Photoshop – больше CSS 3.

2.4 Объединяйте изображения в CSS спрайты.

#subs,#left,.mail,.rss,.vk{background:url(/images/1.png) no-repeat}

#subs{background-position: -28px -120px;}
#left{background-position: -35px -20px;}
.mail{background-position: -43px -50px;}
.rss{background-position: -12px -8px;}
.vk{background-position: -34px -56px;}

2.5 Размещайте JS файлы правильно.

...
<script src='/scripts/all.js' type='text/javascript'></script>
</body>
</html>

2.6 Размещайте CSS файлы правильно.

Часть 3. Правильная SEO вёрстка макета

3.1 Код навигации сайта.

<ul class="menu">
<li><a href="/page1">пункт меню 1</a></li>
<li><a href="/page2">пункт меню 2</a></li>
<li><a href="/page3">пункт меню 3</a></li>
</ul>

3.1.1 Тонкости горизонтального меню.

• Никогда не используйте для этого CSS-свойство float (плавающий, вызывает обтекание его другими элементами), вместо него используйте следующий код:

  ul.menu li{display:inline-block;}

• В коде не нужно начинать каждый новый пункт меню с новой строки, как в примере выше. Лучше написать всё в одну строчку и регулировать расстояние между пунктами с помощьюmargin. Пример:

<style>
ul.menu li{
display:inline-block;
margin:0 5px;
}
</style>
<ul class="menu"><li><a href="/page1">пункт меню 1</a></li><li><a href="/page2">пункт меню 2</a></li><li><a href="/page3">пункт меню 3</a></li></ul>

3.2 Атрибут alt у картинок

<img src="/main.jpg" alt="схема самостоятельного создания сайта" width="773" height="896"/>

3.3 Используйте HTML заголовки h1-h6 по максимуму.

3.4 Быстрые ссылки на сайт.

3.5 Используйте все возможности форматирования текста.

• Используйте нумерованные и ненумерованные списки (ul, ol);
• Заключайте основной текст не в теги div, а в теги параграфов: p;
• Сопровождайте текст картинками и видео;
• Рисуйте HTML таблицы;
• Используйте (в меру!) теги логического выделения текста: strong, em, u.

3.6 Используйте мета-теги keywords и description с умом.

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

3.7 Оптимизируйте код.

3.8 Сократите код.

Часть 4. Продолжаем оптимизировать макет сайта под поисковые системы

4.1 Чем выше основной текст — тем выше позиции в поисковых системах.

• Сколько нужно пользователю скролить (прокручивать) страницу до релевантного (по мнению поисковых систем) содержимого;
• Как высоко в коде (близко к началу) находится релевантное содержимое.

• Основная суть документа должна быть понятна уже на первом экране браузера.
• Не рекомендуется использовать элементы оформления, делающие неочевидным доступ к тексту для пользователей — окна прокрутки, скрытые выпадающие блоки и т.п.

• Делайте шапку сайта как можно меньше по высоте (пример как не надо: этот блог);
• Старайтесь не захламлять сайт рекламой;
• Если в двух колоночном макете не можете определиться: справа или слева от основной колонки поставить дополнительную – всегда ставьте справа. Поисковые роботы, как и люди, смотрят на ваш сайт слева направо, а значит лучше, чтобы основное содержимое было слева!

<div id="text">Основная часть сайта.</div>
<div id="left">Дополнительная колонка слева.</div>
<div class="clear"><!-- запрещаем обтекание всеми остальными элементами--></div>

#text{float:right;}
#left{float:left;}
.clear{clear:both;} /* запрет обтекания */

Часть 5. Google Page Speed