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

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

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

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

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

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

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

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

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

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

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

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

Это значит, что дальше будет идти 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=”…” содержит текст самого описания.
  • Обратите внимание – тег непарный.

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

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

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

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

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

Теги в теле документа <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. Конструкция такова:

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

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

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

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

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

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

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

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

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

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

📎📎📎📎📎📎📎📎📎📎