Как читать начальный код странички и работать с тегами и атрибутами в SEO

Интернет-страница – это HTML-код, состоящий из набора особых тегов. По-другому этот код именуют «начальным». Благодаря ему браузеры показывают страничку в таком виде, в каком мы ее лицезреем.

Но кроме этого в HTML-коде есть элементы, которые не заметны юзеру, но важны для SEO-продвижения.

В данной нам статье команда Топвизор-Журнальчика ведает, на какие элементы в начальном коде уделять свое внимание SEO-специалисту и как эти элементы влияют на продвижение странички в поиске.

Что такое HTML-код странички

Интернет-страница – это и есть HTML-код. Откройте начальный код хоть какой странички в вебе и вы увидите вот что:

Если разглядеть HTML-код, то станет понятно, что это набор разных тегов со своими атрибутами и значениями этих атрибутов.

Все эти элементы совместно молвят браузеру, как необходимо показывать страничку, какие элементы на ней есть.

К примеру, тег < h1 >< /h1 > гласит о том, что снутри него заголовок. Тег < img > – о том, что снутри изображение, а тег < a >< /a > – о том, что снутри ссылка.

Но не считая этого, при помощи HTML мы можем «разговаривать» и с поисковыми роботами. Направьте внимание на эту часть кода:

Всё, что написано снутри тега < meta > – это информация, которую SEO-специалисты указывают для поисковой машины.

Мы можем давать подсказку поисковикам, необходимо либо не надо регистрировать страничку, как нередко ее регистрировать, какие ключи есть на страничке, о чем она, есть ли на ней особая разметка и какая и т. д.

Теги < meta > постоянно вписываются снутри тега < head >< /head >.

Чтоб мы с вами синхронизировались в определениях, давайте поглядим, из чего же может состоять элемент HTML-кода:

Не у всех тегов могут быть атрибуты и значения атрибутов. Но в целом тег и всё, что снутри него, именуется элементом HTML-кода.

Сокращённо структуру HTML-кода можно представить так:

< !DOCTYPE HTML >

< html >

< head >

набор принципиальной инфы для браузера и поисковиков

< /head >

< body >

всё, что должен созидать юзер на страничке

< /body >

< /html >

Как видно, главные теги в структуре HTML – это < head > и < body >. Снутри их размещаются все остальные элементы.

В теге < head > собрана вся служебная информация для поисковых машин – < meta >, Title, также счетчики Метрики и Analytics, пиксели соцсетей. Вся информация размещается меж открывающим и закрывающим тегом < head >< /head >.

В теге < body > собрана вся отображаемая на страничке информация: заглавия текста, абзацы текста, таблицы, изображения, ссылки, любые блоки – всё, что должен созидать юзер.

Подробнее о элементах снутри < head > и < body > побеседуем дальше.

Полезные для SEO теги и атрибуты

Тег < title >

Снутри тега < title >< /title > прописывается Title странички. Это принципиальный SEO-тег.

Он отображается на вкладке в браузере, но не считая этого может отображаться на:

  • страничке поисковой выдачи в сниппете;

  • в описании ссылок при репостах.

Гугл и Yandex молвят, что это принципиальный элемент поискового результата и что Title дает представление о содержании странички и ее релевантности запросу в поисковике.

Title – это один из тех частей, на основании которого поисковики будут ранжировать страничку. Потому SEO-специалисты уделяют огромное внимание тому, что будет написано в Title, какие ключи в нем употреблять.

{Инструкция} по написанию Title

В документе быть может лишь один Title, и находиться он может лишь снутри контейнера < head >…..< /head >. В HTML-коде он смотрится так:

< !DOCTYPE HTML >

< head >

< title >Самый наилучший заголовок< /title >

< /head >

Тег < meta >

Вся служебная информация для поисковиков и браузеров содержится в этом теге. По-другому их именуют метаданные.

Снутри тега < meta > прописываются разные атрибуты. Почаще всего употребляются два главных атрибута – name и content.

Атрибут name в SEO мы используем, чтоб указать, какой конкретно метатег мы на данный момент указываем.

А при помощи атрибута content передаем информацию, которая обязана быть связана с сиим метатегом. Эти атрибуты употребляются совместно.

name=”description”

Это один из самых принципиальных метатегов для SEO.

В этом метатеге мы указываем описание странички. По воззрению Yandex’а, содержимое метатега description – один из источников, на базе которых формируются описания страничек веб-сайта в поисковых результатах. Ах так он смотрится в коде:

< meta name="description" content="Как собрать семантику с помощью Вордстат, как пользоваться операторами, зачем смотреть частоту и как автоматизировать работу." / >

С одной стороны, описания страничек в сниппетах формируются поисковиками автоматом, на базе содержания страничек.

Гугл Справка: 

Описания в поисковых результатах генерируются автоматом и отражают тот контент с вашей странички, который поточнее всего соответствует запросу в поисковике.

Но если мы напишем информативный description, который буквально отражается содержание странички, то поисковики могут «подтянуть» его в сниппет фактически без конфигураций.

Yandex Справка: 

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

Как написать неплохой description

name=”robots”

В коде этот метатег смотрится так:

< meta name=”robots” content=”noindex” >

Тут значение атрибута name – ”robots”, а значение атрибута content – ”noindex”. Выходит, что при помощи этого метатега мы привлекаем внимание поисковых ботов (robots) и говорим им (content), что эту страничку регистрировать не надо (noindex).

name=”keywords”

Иной пример использования этого атрибута для SEO – указание главных слов. К примеру:

< meta name=”keywords” content=”wordstat, Яндекс.Вордстат, как пользоваться вордстатом” >

Тут значение атрибута name – ”keywords”, а значение атрибута content – ”wordstat, Yandex Вордстат, как воспользоваться вордстатом”. Выходит, мы показываем поисковым ботам, что в этом метатеге содержатся главные слова странички (keywords), и говорим (content), что эти слова такие: wordstat, Yandex Вордстат, как воспользоваться вордстатом.

Невзирая на то, что о актуальности метатега keywords идут споры, Yandex гласит, что может учесть его при определении соответствия странички запросам в поисковике.

name=”viewport”

Метатег viewport докладывает браузеру, что у вас есть адаптивная версия веб-сайта под различные устройства, и указываете, как верно поменять размеры частей странички в согласовании с размером экрана юзера.

Адаптация под мобильные устройства – это один из причин ранжирования, потому этот метатег важен для SEO.

Обычно код смотрится так:

< meta name="viewport" content="width=device-width, initial-scale=1" >

Тег < link >

Этот тег практически постоянно добавляется снутри тега < head >. Он устанавливает связь текущей интернет-страницы с иными интернет-страницами. Тут работают в связке главные атрибуты rel и href.

Атрибут rel показывает род отношений текущей странички к иной страничке, а href содержит ссылку на эту «другую» страничку.

Принципиальные для SEO значения атрибута rel – это canonical и alternate.

rel=”canonical”

Употребляется для того, чтоб указать канонический адресок. К примеру, как гласит Гугл, если на веб-сайте есть различные странички с фактически схожим контентом (к примеру, версии для мобильных устройств и компов). Если не указать канонический URL в теге < link >, то поисковики могут посчитать страничку дублем.

В коде тег link с атрибутом rel=”canonical» смотрится так:

< link rel="canonical" href="https://topvisor.com/ru/practice/how-not-to-miss-deadlines/" >

При помощи этого атрибута, поисковики объединяют группы страничек с схожим каноническим URL и ранжируют в поиске не дубли странички, а главный – канонический – URL.

rel=”alternate”

Так же, как и canonical, употребляется для предотвращения возникновения дублей, но в этом случае, если одна и та же страничка быть может доступна по различным URL.

Alternate показывает на различные версии странички, к примеру, на различных языках либо на мобильную версию. В коде это смотрится так:

< link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.site.com/dress/summer-dress/" >

Тег < a >

Этот тег указывается снутри тега < body >< /body >. В теге < a > постоянно находятся ссылки. Если вы видите на страничке какую-либо ссылку, то в коде она буквально будет размечена тегом < a >.

Снутри этого тега постоянно будет атрибут href, который содержит саму ссылку. Не считая этого, время от времени снутри этих ссылок нам может пригодиться поставить доп атрибуты, принципиальные для SEO.

rel=»nofollow»

Когда поисковые боты индексируют вашу страничку, они учитывают и ссылки, которые вы на ней указали. Поисковик пробует установить связь вашего веб-сайта со страничками, на которые вы ссылаетесь.

Если вы не желаете, чтоб поисковые боты устанавливали такую связь, то сказать им о этом можно при помощи значения атрибута nofollow. В коде это смотрится так:

< a href="https://taplink.cc/dasha_thinks" target="_blank" rel="nofollow">https://taplink.cc/dasha_thinks< /a >

rel=»sponsored»

Употребляется для маркетинговых и партнерских ссылок. Пример в коде:

< a href="https://site.com" target="_blank" rel="sponsored" >Текст ссылки< /a >

rel=»ugc»

Сиим значением должны быть размечены ссылки, сделанные юзерами. Это необходимо для того, чтоб предупредить возникновение мусора на веб-сайте и исключить его негативное воздействие на ранжирование.

Атрибут ALT тега < img >

Тег < img > – обычный тег HTML. Для SEO важен не он сам по для себя, а его атрибут ALT.

Кроме того, что ALT важен для юзеров, он имеет значение и для SEO, поэтому что помогает ботам регистрировать рисунки. По словам Yandex’а, при помощи ALT поисковой машине проще осознать, что представляет собой изображение.

Описание рисунки обязано быть информативным и отражать то, что на ней изображено. Это поможет поисковому боту осознать, релевантно ли изображение запросу в поисковике юзера. По данной нам причине в ALT можно добавлять одну из главных фраз странички.

< image src="https://yastatic.net/q/logoaas/v2/Справка.svg" alt="Справка" >

Тег < h1 >

Это тег головного заголовка контента странички. Его лицезреет юзер, когда входит на страничку.

У всех заголовков странички есть своя иерархия: один основной заголовок – h1, потом заглавия второго уровня h2 и заглавия третьего уровня h3. Поисковому боту будет легче разобраться со структурой документа, если все заглавия будут размечены в соответствие с данной нам иерархией.

Если, к примеру, на страничке два основных заголовка либо нарушена вложенность заголовков (снутри h3 вписаны не h4, а h2), то это может сказаться на ранжировании веб-сайта.

Конспект

  1. Базисные понятия:

  • тег и всё, что снутри него именуется элементом HTML-кода;

  • метатеги содержат основную информацию для браузера и поисковых машин;

  • при помощи атрибутов и их значений мы можем указать доп условия для частей кода, которые важны для SEO.

  1. Снутри блока < head > обращайте внимание на эти теги:

  • < title > – главный SEO-заголовок интернет-страницы;

  • < meta > (атрибуты name и content, description, viewport, http-equiv) – это метаданные, принципиальные для поисковой выдачи;

  • < link > – вставки скрипта кода.

  1. Снутри блока < body > обращайте внимание на эти теги:

  • атрибуты тега < a > – тег ссылок;

  • другой текст и title тега < img >;

  • иерархия заголовков от < h1 > до < h6 >.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *