Как читать начальный код странички и работать с тегами и атрибутами в 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), то это может сказаться на ранжировании веб-сайта.
Конспект
-
Базисные понятия:
-
тег и всё, что снутри него именуется элементом HTML-кода;
-
метатеги содержат основную информацию для браузера и поисковых машин;
-
при помощи атрибутов и их значений мы можем указать доп условия для частей кода, которые важны для SEO.
-
Снутри блока < head > обращайте внимание на эти теги:
-
< title > – главный SEO-заголовок интернет-страницы;
-
< meta > (атрибуты name и content, description, viewport, http-equiv) – это метаданные, принципиальные для поисковой выдачи;
-
< link > – вставки скрипта кода.
-
Снутри блока < body > обращайте внимание на эти теги:
-
атрибуты тега < a > – тег ссылок;
-
другой текст и title тега < img >;
-
иерархия заголовков от < h1 > до < h6 >.