Мы работаем не только в Моcкве, но и в других городах России:

Продвижение по трафику от 50 копеек за переход. Заказать

SEO и HTML неразделимы: почему нужно знать основы HTML и базовые теги для SEO продвижения

Подписаться
Больше интересностей из блога студии SEMANTICA
Получайте эффективные советы по интернет-рекламе и SEO-оптимизации вашего сайта
ВКонтакте:
Facebook:
Twitter:
SEO и HTML неразделимы

 

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

Для многих не новость, но поверхностно затронем что такое html и CSS.

HTML – аббревиатура HyperText Markup Language, что в переводе с забугорного, язык разметки гипертекста. Это стандартный язык, на котором построено подавляющее большинство веб-страниц в интернете. HTML достаточно прост в изучении. В особенности если вам нужны лишь базовые знания для продвижения сайта. У языка разметки есть компаньон в лице CSS.

CSS – это язык внешнего вида страниц, написанных на HTML. Расшифровывается как Cascading Style Sheets, что в переводе — каскадные таблицы стилей. CSS в изучении еще проще, чем язык разметки. Каскадные таблицы построены по принципу: атрибут – значение; атрибут – значение и так далее. Загвоздка в том, что этих самых атрибутов очень много и все их запомнить крайне тяжело. Плюсом будет знание английского, хотя бы широкий вокабуляр.

 

В чем важность HTML и CSS для SEO

Работая с сайтами клиента либо с собственным сайтом, который вам сделали на заказ, нередко появляется необходимость что-либо поправить, подвинуть, изменить. И тут базовые знания html пригодятся.

Дальше код страницы должен быть валидным, иными словами, соответствовать принятым стандартам. Поисковые роботы эти стандарты знают и, сталкиваясь с невалидным кодом, могут неправильно распознать контент страницы и сделать плохие выводы. Вплоть до исключения страницы из индекса. Чтобы понять, правильно ли написан код страницы, есть ли в нем ошибки и поймет ли его поисковая система – нужно владеть базовыми знаниями html и css.

 

Что такое теги в HTML

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

<nazvanie tega>…содержание…</nazvanie tega>

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

Многие теги обладают свойствами, а те – значениями. Свойства прописываются внутри квадратных скобок открывающего тега, а значение указывается после знака = в кавычках “…”. Конструкция такая:

<nazvanie tega="значение свойства">…Содержание…</nazvanie tega>

Пример с нашего блога:

<html lang="ru-RU">…много всего…</html>

Это значит, что дальше будет идти html код, свойство lang – от слова language (англ. язык) и в скобках значение "ru-RU", несложно догадаться – наша html страница написана на русском языке.

Главные три html тега, которые вы встретите в любом документе

  •       Первый это <html>…</html> — этот тег сообщает вашему браузеру, что дальше будет идти документ формата HTML.
  •       Вторым станет <head>…</head> — внутри данного тега расположена служебная информация для браузеров и поисковых машин, не видимая для пользователя. Исключение: <title>…</title> - заголовок страницы, о нем поговорим ниже.
  •       Третий — <body>…</body> — видимая для пользователя часть страницы. Внутри <body> располагается весь контент: текст, картинки, видео и так далее.

 

Основные SEO теги в HTML

Внутри <html> содержатся два основных тега: <head> и <body>.

В <head>, как уже говорилось, может входить достаточно много других тегов. Разберем основные из них, полезные для SEO:

1. <title> заголовок страницы, который виден, если навести на вкладку в браузере. Также тайтл возглавляет сниппет страницы в результатах поиска. Один из важнейших для SEO оптимизации HTML тегов.

2. Тег <meta> получил название мета-тег, нас интересуют его свойства. <meta name=”description” content=”>Описание страницы, часто используются поисковиком в формировании сниппета. Иногда описанием сниппета становятся фрагменты текста на странице, более подходящие под запрашиваемую пользователем фразу.

 

Итак, мы указали два свойства.

  • name=”description” – означает, что следующее свойство
  • content=”…”, является описанием. Тогда, когда content=”…” содержит текст самого описания.
  • Обратите внимание – тег непарный.
e90bcf84df

 

3. <link> отвечает за связь с внешними файлами, вроде шрифтов, а чаще стилей. Как и остальные теги, обладает рядом атрибутов. Подключить файл со стилями можно с помощью конструкции:

<link rel="stylesheets" href="/адрес/документ.css">

 

 Конструкция, где rel= атрибут и его свойство “stylesheets” (что в переводе - таблица стилей)

 Дальше, href атрибут, который ссылается на документ, и свойство - адрес этого документа ”/адрес/документ.css”

4. Атрибут тега <link> под названием Canonical. Конструкция такова:

<link rel="canonical" href="http://site.ru/statja_nomer_odin">

 

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

Теги в теле документа <body>...</body>

Как уже говорилось, в <body> находится видимая для посетителя информация. Перейдем сразу к главному:

  1. Теги h1...h6. Это заголовки страницы, которые разбивают текст по смыслу. Поисковые роботы любят, когда страница структурирована и оформлена. Используйте на страницы только один заголовок <h1>...</h1> и он должен быть первым (выше всех) на странице. Последующие подзаголовки можно использовать несколько раз, но важно, чтобы они шли по очереди. От <h2> до <h6>. Чаще всего Используют всего три типа заголовка: <h1>, <h2> и <h3>.
  2. Оформление текста. Для того, чтобы разбить текст на параграфы используйте тег <p>...</p>.
  3. Выделить жирный текст <strong>текст текст текст</strong>
  4. Курсив: <em>текст текст текст</em>
  5. <ul>...</ul> начало и конец маркированного списка.
  6. <li>...</li> строка списка.
  7. <ol>...</ol> нумерованная строка.
  8. Картинки. Чтобы добавить изображение нужно воспользоваться тегом <img> и его атрибутами src и alt. Конструкция такова:
<img src="http://site.ru/content/kartinka_1.jpg" alt="описание, что нарисовано на картинке" />

9. Ссылки. По-хорошему, все ссылки должны быть проставлены при помощи следующей конструкции:

<a title="описание, при наведении курсора" href="адрес страницы">текст ссылки</a>

*Нежелательные ссылки можно закрывать атрибутом rel=”nofollow”, добавив его к другим атрибутам. В таком случае робот не будет переходить по этой ссылке. Добавив атрибут rel=”noindex”, вы скажите поисковику, что данная ссылка не должна индексироваться поисковым роботом.

10. Один из самых распространенных тегов <div>...</div>. Это слой, которому можно указать определенные параметры отображения на странице с помощью атрибута class=”значение”. А значит, все что расположено между <div> и </div> будет перенимать эти параметры.

 

Полезные советы по SEO html

Несколько важных моментов, не вошедших в основную статью:

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

    Открылся первым — закрылся последним.

  • Следите, чтобы в html коде не было стилей. Обычно они закрадываются в теге <style>...</style> или атрибутом в других тегах style=”color:...” и так далее. Если такие строки встречаются в коде вашего клиента или вашего сайта - выносите стили в отдельные файлы .css и подключайте их с помощью конструкции:
<link rel="stylesheets" href="/адрес/файла.css"> между тегами <head>...</head>

Между тегами <head>...</head>

  • Пишите все теги и атрибуты маленькими буквами
  • Не используйте много выделений текста, вроде <strong> и <italic>
  • Заполняйте атрибут alt=”...” у картинок в теге <img>
  • Используйте понятные названия картинок. Например,
    <img src="site.ru/ponyatnoe-nazvanie-kartinki.jpg" alt="...">
  • Проверяйте валидность кода html на наличие ошибок с помощью сервисов, вроде validator.w3.org
  • Следите, чтобы ссылки навигационного меню были оформлены обычным тегом <a>
  • Всегда следите, чтобы была последовательная структура заголовков и на страницы был только один <h1>

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

Задать вопрос по статье
Подпишись на нашу группу в VK и получай экспертные статьи прямо в ленту!

Мы работаем не только в Моcкве, но и в других городах России: