Seo теги: Как правильно заполнять SEO-теги title, description, keywords, h1 для интернет-магазина – руководство | Дропшиппинг

Содержание

Самые важные HTML-теги для каждого SEO-специалиста

50 мин — время чтения

Май 24, 2021

Мы привыкли, что большинство манипуляций с HTML-кодом выполняет программист. Так и должно быть. Но это ни в коем случае не освобождает сеошника от необходимости знать базовые HTML-теги. Как минимум — для правильной постановки ТЗ, а как максимум — для понимания, как теги влияют на SEO.

Какие теги и атрибуты важны для продвижения, как их правильно оформлять и зачем они нужны? Мы прошлись по самым важным для сеошников и диджитал-маркетологов тегам и составили список, чтобы вы могли освежить свои знания или же разобраться в основах HTML с нуля.

База — коротко о важном

HTML-код — это язык, с помощью которого страница сообщает браузеру, какие элементы она содержит, и что нужно выводить на экран.

HTML — это основа большинства веб-страниц и одна из важнейших частей технического SEO. С помощью элементов HTML SEO-специалисты могут предоставлять информацию о страницах как пользователям, так и краулерам. Таким образом, можно понять, какая структура страницы и порядок ее содержимого, а также как одна страница связана с другими.

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

Мы уже затронули термины «элемент HTML» и «тег», но есть также метатеги и атрибуты. Вы легко можете запутаться, если не знаете, в чем разница.

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

Структура элемента HTML

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

Элемент HTML -— это тип компонента HTML-документа, который состоит из дерева простых узлов HTML, таких как текстовые узлы. Такие элементы позволяют HTML-документу иметь определенную семантику и форматирование. На картинке детально показано, из чего состоит элемент HTML.

В данном случае это заголовок, который обозначается в коде с помощью открывающего тега <h2> и закрывающего тега </h2>. У заголовка есть атрибут align=“left”, который выравнивает его по левой части страницы.

Тег — это элемент языка HTML. С его помощью разграничивают начало и конец каждого элемента. Теги определяют, как браузеры форматируют и отображают содержимое страницы. Например, если мы хотим подчеркнуть текст на странице, используется тег <u>. Теги могут быть парными, один из них открывающий, а другой — закрывающий (например, <i>…</i>), или одиночными (например, <br> или <img>).

Метатег — это разновидность тега. С его помощью поисковики и браузеры получают техническую информацию о странице сайта — описание страницы, ключевые слова, кодировку документа, правила индексирования для поисковиков и другие. Все метатеги должны находиться в теге <head> документа. Интересно, что description и keywords являются метатегами, а title — тегом.

Атрибут — дополнительная характеристика тега или метатега. Они представляют собой специальные слова, которые используются внутри начального тега для управления поведением элемента.

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

Чем теги отличаются от атрибутов

Многие не видят разницы между терминами «тег» и «атрибут». Но отличия есть. Давайте разбираться с терминологией.

Вот пример элемента HTML, в котором можно выделить три части:

<h2> Добро пожаловать в мой блог о SEO </h2>

<h2> открывает тег, «Добро пожаловать в мой блог о SEO» — это содержание тега, а </h2> закрывает тег.

Элемент HTML в приведенном выше примере — это видимый заголовок на странице блога. Теперь давайте проведем различие.Если теги должны иметь начальный и конечный элементы для правильного функционирования, то атрибуты нет — они добавляются к элементам HTML как модификаторы, например:

<link rel="canonical" href="https://www.website.com" />

В этом примере rel= и href= являются атрибутами тега <link>.

Обратите внимание, что существуют также пустые элементы, такие как <br>, у которых нет содержания или закрывающего тега.

Зачем теги поисковикам и юзерам

Что такое теги и атрибуты понятно, но зачем они нужны поисковым системам, браузерам и юзерам? Поисковики используют теги, чтобы получить информацию о содержимом страницы и включить ее в результаты поиска.

Прямое тому подтверждение — сниппет в выдаче, который обычно формируется с помощью тега title и метатега description. Но если заголовок и описание страницы будут составлены некорректно (не отвечают действительности, переспамлены ключами и т. д.), Google заменит их на более подходящие, взятые из разметки и содержания страницы.

В справках Search Console указаны списки метатегов, которые поддерживает Google соответственно. Обязательно ознакомьтесь с ними, если хотите узнать больше о каждом HTML-теге.

Теги помогают браузеру считывать информацию о странице. Благодаря этому текст, картинки и ссылки на наших мониторах отображаются именно так, как указано в HTML-коде. Сложно представить, если бы нам приходилось «вылавливать» текст на сайте из кода.

Теперь, когда мы разобрались с основными понятиями HTML, давайте перейдем к самому интересному: тегам и атрибутам, которые важны для поисковой оптимизации.

3 основных HTML-тега

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

Тег

<! DOCTYPE html> указывает, что страница является веб-страницей

Тег <! DOCTYPE html> — это самый первый тег, который вы должны добавить в код своей страницы. Он указывает поисковым системам, что данная страница — это веб-страница.

Хоть <! DOCTYPE html> сам по себе не является HTML-тегом (поэтому у него нет никаких атрибутов), он предоставляет браузерам очень важную информацию, которая позволяет узнать, согласно какому стандарту нужно отображать страницу.

Вот как используют тег в коде:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
Текст документа
</body>
</html>

Таким образом, браузер поймет, что страница создана на HTML. И у него точно не возникнет проблем с обработкой кода и верным отображением страницы.

Тег <head> содержит метаданные страницы

Тег <head> представляет самый первый раздел страницы и содержит информацию, которая не отображается напрямую на странице в браузере.

Важно: внутри тега <head> размещаются одни из ключевых SEO-тегов.

Элемент <head> находится между тегами <html> и <body> и служит контейнером для метаданных. Как правило, метаданные определяют заголовок документа, его набор символов, стили, скрипты и т. д.

Тег <head> может содержать следующие элементы HTML: <base>, <link>, <meta>, <noscript>, <script>, <style> и обязательно <title>.

Вот как выглядит HTML-код:

<!DOCTYPE html>
<html lang="ru">
<head>
  <title>Тайтл документа</title>
</head>
<body>
<h2>Это заголовок текста</h2>
<p>А это абзац.</p>
</body>
</html>

Если запустить код, увидим следующее:

Как видим на примере, тег <head> содержит такие метаданные, как тайтл документа, который не отображается на странице. Но тег также может хранить другие элементы, цель которых — помочь браузеру в работе с данными.

Универсальные атрибуты, которые можно использовать с любым элементом HTML, доступны и для тега <head>.

Тег <body> определяет основной контент страницы

Тег <body> определяет содержание документа и хранит информацию на странице, которая видна пользователю — это могут быть текст, изображения и видео.

По сути, тег <body> хранит весь контент HTML-документа, включая заголовки, абзацы, мультимедиа, гиперссылки, таблицы, списки и т. д. Все, что человек видит на странице, размещается в теге <body>, который, кстати, может встречаться в документе только один раз.

Вот как выглядит HTML-код:

<html>
<head>
  <title>Тайтл документа</title>
</head>
 <body>
  <h2>Это заголовок</h2>
  <p>А это абзац.</p>
</body>
</html>

Если запустить код, увидим следующее:

В отличие от предыдущего примера, в этом случае мы можем видеть элементы HTML, которые размещены в теге <body>: <h2> и <p>.

Тег <body> поддерживает универсальные атрибуты HTML, которые можно использовать с любым элементом HTML. Для него также доступны атрибуты событий, которые позволяют запускать действия в браузерах в ответ на определенные действия пользователя или на изменения состояния документа/окна браузера.

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

А теперь перейдем к другим HTML-тегам, которые могут помочь в SEO.

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

Единственное — нужно знать, как правильно передать эту информацию. Безусловно, если теги используются верно, продвижение от этого только выиграет.

1) <title> — рассказывает, о чем ваша страница

Любимый тег сеошников — <title> — помогает и поисковикам, и юзерам понять, о чем ваша страница.

Title отображается в результатах поиска в виде кликабельного заголовка. Он очень важен для юзабилити, поисковой оптимизации и обмена информацией в социальных сетях. Тег предназначен для точного и лаконичного описания содержания страницы, чтобы побудить людей перейти на страницу и предоставить поисковикам дополнительную информацию о теме страницы.Title отображается не только в сниппете, но и во вкладке браузера и помогает пользователю ориентироваться, какие страницы открыты. Некоторые тайтлы таким образом привлекают внимание пользователей — при переходе на другую вкладку текст тайтла меняется на что-то вроде «Вернись, мы уже скучаем!».

Также title отображается как анкор ссылки на вашу страницу при ее репостах в соцсетях, если вы не используете разметку Open Graph. Именно поэтому title должен быть лаконичным, информативным, уникальным и интересным потенциальным читателям.

Вот как это выглядит в Facebook:

Длина title должна быть около 60-70 символов, так как слишком длинные тайтлы все равно обрезаются до 600 пикселей. Как результат — в сниппете выводится неполная информация.

С размером тайтла разобрались, а что с ключевыми словам — использовать их в тайтле или нет? Пару лет назад Брайан Дин (Backlinko) проводил исследование, в котором упоминалось о том, насколько точное вхождение ключевого слова в title влияет на увеличение позиций. Ответ — да, ключ может помочь повысить позиции, но прямой связи между точным вхождением ключа и ростом позиций нет. Google давно научился анализировать семантику страницы, не зацикливаясь на одних только тегах, как это было раньше. Вывод – использовать ключевые слова нужно, но только с целью помочь как поисковым системам, так и пользователям понять, о чем ваша страница, не более того.

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

Вот как выглядит HTML-код:

<!DOCTYPE html>
<html>
<head>
  <title>Тайтл страницы</title>
</head>
<body>
<h2>Это заголовок</h2>
<p>А это абзац. </p>
</body>
</html>

А вот как выглядит код на опубликованной странице:

Поскольку элемент <title> является частью тега <head> HTML-файла, он не отображается на самой странице. Кроме того, в одном документе может быть только один тег <title>. Тег <title> поддерживает универсальные атрибуты HTML, но ему не доступны атрибуты событий.

2) <meta> — дает дополнительную информацию о странице

Тег <meta> (его еще называют метаданными) помогает браузерам и поисковикам «считывать» служебную информацию о странице, которая не выводится на экран. Размещена такая информация в контейнере <head>. Тег обычно используется для указания описания страницы, ключевых слов, автора документа, правил индексирования, а также настроек области просмотра.

Давайте рассмотрим атрибуты, которые может содержать тег <meta>.

Атрибут name

Атрибут

name показывает, с каким метатегом мы имеем дело.

Его основная цель — сообщить ботам, предназначена ли информация на странице для них.

<meta name=”robots” content=”noindex” /> 
или
<meta name=”googlebot” content=”noindex” />

Например, добавив атрибут name в метатег, как на примере выше, вы указываете всем роботам или роботу Google соответственно, что они должны учитывать директиву noindex. Кстати, когда метатег содержит атрибут name, предназначенный для роботов, его обычно называют метатегом robots.

Для SEO использование атрибута name в метатеге — отличный способ предотвратить взаимодействие определенных ботов с вашими страницами. Также с помощью этого атрибута можно указать дополнительные данные на странице.

Кроме работы с краулерами, атрибут name также может использоваться для:

указания целевых ключевых слов на странице (хотя сейчас это уже неактуально):

<meta name="keywords" content="HTML, теги, атрибуты">

указания автора контента:

<meta name="author" content="Дарья Иванова">

В интернете ходит много баек о том, нужно ли заполнять keywords. Десять лет назад это что-то могло давать в продвижении, но не сейчас — представители Google уже неоднократно заявляли о том, что keywords не учитывается поисковиком при ранжировании сайта. Нет никакого смысла его заполнять.
Кроме того, SEO-эксперт Билл Славски провел опрос, который подтвердил, что метатеги keywords остались в прошлом.

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

Description

Description описывает содержимое страницы и отображается в поисковой выдаче сразу под тегом <title>:

Вот как выглядит его HTML-код:

<meta name="description" content="Самые важные HTML-теги и атрибуты">

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

Текст description должен быть кликбейтным, чтобы пользователям хотелось перейти на страницу. Но учтите, что Google часто заменяет предоставленный description текстом, который наиболее релевантен поисковому запросу пользователя.

Description не гарантирует стопроцентного улучшения позиций в выдаче, но он может повысить ваш CTR — а это, в свою очередь, рассматривается как положительный фактор ранжирования.

Viewport

Viewport позволяет управлять шириной и масштабированием области просмотра (то, что видит пользователь, когда заходит на страницу) так, чтобы она правильно отображалась на экранах всех размеров — на компьютерах, ноутбуках, планшетах и мобильных телефонах.

Вот как выглядит HTML-код. Советую добавить его на все свои страницы:

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

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

Давайте разберем код. Часть width=device-width задает ширину страницы в соответствии с размером экрана используемого устройства.

Часть initial-scale=1.0 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером. Так вы можете проверить, как настроена ваша страница.

Ниже вы найдете пример двух страниц, одна из которых использует viewport, а другая — нет:

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

Twitter Card

Twitter Card — это расширение для твитов. Это настраиваемые мультимедийные блоки, которые PPC-специалисты могут использовать для привлечения трафика на свои сайты и/или в мобильные приложения.

Существуют разные типы разметки Twitter Card, каждая из которых специально разработана для пользователей десктопной или мобильной версии Twitter:

Summary Card. Стандартная карточка с заголовком, описанием и изображением.
Summary Card with Large Image. Та же самая Summary, только большой акцент сделан на изображении.
App Card. Позволяет скачать мобильное приложение.
Player Card. Позволяет отображать видео, аудио и другие медиафайлы.

Чтобы сделать разметку Twitter Card, вам необходимо указать тип карты, тайтл, описание и изображение, добавив HTML-разметку в тег <head> страницы.

Вот как выглядит HTML-код:

<meta name="twitter:card" content="summary_large_image">
      < meta name="twitter:site" content="@business" >
 <meta name="twitter:title" content="Elon Musk and the Democracy Sausage Are Making Twitter Headlines">
 <meta name="twitter:description" content="Elon Musk and the democracy sausage, two of the world’s least affordable property markets, and jumping on the Bitcoin ETF bandwagon. Here are some of the things we’ve been thinking about in Australia. ..">
 <meta name="twitter:image" content="https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iDj0UnrLQblg/v0/1400x-1.jpg">

Благодаря такому метатегу в твите, где есть ссылка на ваш сайт будет отображаться карточка страницы, которую смогут увидеть подписчики:

Без Twitter Card заголовок страницы, описание, изображение и т. д. не будут отображаться в ваших твитах вместе со ссылкой. Вместо этого Twitter будет извлекать данные из соответствующих тегов Open Graph, если такие есть.

Здесь можно узнать больше о Twitter Cards.

Атрибут content

Этот атрибут выступает в паре с атрибутом name и http-equiv и раскрывает смысл тега для поисковика. По сути, он рассказывает, какой контент содержит в себе тег.

Вот пример атрибута content в метатеге description:

<meta name="description" content="С популярностью визуального поиска растет и потребность в оптимизации изображений. Узнайте о правилах SEO для изображений, чтобы увеличить шансы своих картинок попасть в индекс и хорошо ранжироваться в поиске. ">

А вот как это выглядит на странице (помните, что description отображается только в поисковой выдаче):

Вместе с атрибутом http-equiv, о котором мы расскажем позже, атрибут content определяет тип данных, отправляемых в браузер.

Но сначала давайте остановимся на очень важном значении атрибута content.

Noindex

Директива noindex позволяет вебмастерам обозначить контент, который может быть проиндексирован поисковиками и отображен в выдаче. По сути, с помощью noindex можно разрешить или запретить краулерам индексировать контент на странице.

Подобно метатегу robots, noindex обычно называют тегом noindex из-за его использования, хотя он является значением атрибута content.

Вот как выглядит HTML-код:

<meta name="robots" content="noindex" />

Вот несколько директив, которые используют в метатеге robots, помимо noindex (можно использовать их комбинации):

nofollow

Не переходить ни по одной ссылке со страницы, а также не учитывать вес ссылок при ранжировании.

index, nofollow

Индексировать содержимое страницы, но не переходить по ссылкам.

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

Используя директивы robots на странице, убедитесь что она не заблокирована в файле robots.txt. В противном случае поисковики просто не смогут попасть на страницу и увидеть указанные в метатеге директивы.

Атрибут http-equiv

Если у вас нет возможности настроить заголовки HTTP непосредственно на сервере вашего сайта, на помощь приходит атрибут http-equiv.

Браузеры преобразуют значение атрибута http-equiv, заданное с помощью атрибута content, в формат заголовка ответа HTTP и обрабатывают их так, как если бы они поступали непосредственно с сервера.

Вот пример того, как выглядит HTML-код:

<meta http-equiv="expires" content="4 May 2022">
или
<meta http-equiv="refresh" content="60">

Заголовок HTTP раскрывает много полезных для сеошников данных — например, статус ответа сервера (200, 404 и т. д.) или имя сервера, который отправил ответ.

Также его можно использовать, чтобы указать канонический URL для запрашиваемой страницы, запретить роботам индексировать страницу с помощью элемента заголовка HTTP X-Robots-Tag или настроить HTML-редирект с помощью атрибута refresh. Вот некоторые из значений, которые можно использовать в атрибуте http-equiv:

Значение	Описание
content-security-policy	Определяет политику защиты контента Например: <meta http-equiv=“content-security-policy” content=“default-src ‘self’”>
content-type	Задает кодировку документа Например: <meta http-equiv=“content-type” content=“text/html; charset=UTF-8”>
default-style	Указывает таблицу стилей документа, которая используется по умолчанию Например: <meta http-equiv=“default-style” content=“the document’s preferred stylesheet”> Обратите внимание, что значение атрибута content должно совпадать со значением атрибута title в элементе link или style.
refresh	Определяет, как часто (в секундах) документ должен автоматически обновляться Например: <meta http-equiv=“refresh” content=“120″>

Атрибут charset

Атрибут charset отвечает за кодировку документа. Кодировку нужно указывать, чтобы браузер правильно отображал текст документа на странице. Если в теге с кодировкой будет ошибка, на странице вы увидите сплошные иероглифы.

Вот как выглядит HTML-код:

<head>
<meta charset="UTF-8">
</head>

Самый распространенный стандарт кодировки — UTF-8, ее поддерживают все современные браузеры и поисковые системы, а также используют 96,6% проанализированных сайтов. Другие стандарты кодировки, такие как ISO-8859-1, Windows-1251 и Windows-1252 используют менее чем 3% сайтов.

Главное, не использовать несколько стандартов кодировки в одном документе — так вы запутаете поисковик и браузер, что может привести к проблемам с индексированием контента и некорректному отображению текста.

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

3) <a> и <link> — создают ссылки

Без тега <a> невозможно обозначить ссылку, ведущую с одной страницы на другую. По сути, стандартная гиперссылка на странице — это и есть тег <a>.

Вот пример того, как выглядит HTML-код гиперссылки:

<a href=”https://seranking.ru”>анкор</a>

На опубликованной странице приведенный выше пример будет выглядеть вот так:

анкор

Теперь давайте разберем, из чего состоит HTML-код ссылки. У нас есть тег <a>, который указывает, что элемент является ссылкой. Атрибут href= определяет страницу, на которую ведет ссылка, в нашем случае это https://seranking.ru. Текст между начальным тегом <a> и конечным </a> — это анкор, который посетители сайта будут видеть на странице.

Важно: тег <a> используется для кликабельных ссылок, которые размещаются внутри основного содержимого страницы — то есть в теге <body>. Если вам нужно связать страницу с внешним ресурсом, содержащим шрифты или внешние таблицы стилей, используйте тег <link>, который находится в <head> страницы.

Вот как выглядит его HTML-код:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Обратите внимание, что ссылки тега <link> не являются гиперссылками, на них нельзя нажимать, а сам элемент <link> содержит только атрибуты, которые указывают на связь с каким-либо внешним документом.

Теперь давайте рассмотрим подробнее атрибуты тегов <a> и <link>.

Атрибуты hreflang

Наиболее важные атрибуты тега <a> — href и hreflang. Они задают URL файла и определяют страну и язык альтернативной страницы соответственно.

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

Атрибут hreflang также можно использовать в теге <link>, где он определяет язык страницы, на которую ведет ссылка. Как и тег <link>, атрибут должен быть размещен внутри <head> страницы. Вот как выглядит HTML-код:

<link rel="alternate" href="https://website.com" hreflang="en-gb" />

Код можно разделить на три части:

Rel=“alternate” указывает поисковым системам, что у страницы есть локализированная версия.
Атрибут href= определяет URL внешнего файла.
Код языка, указанный после атрибута hreflang=, позволяет поисковикам узнать язык страницы. По ссылке можно ознакомиться с полным списком языковых кодов ISO 639-1.

Важно: атрибут hreflang может также использоваться в заголовке HTTP для не HTML-документов, а еще его можно указать в XML-карте сайта.

Атрибут rel=“nofollow”

Атрибут rel=“nofollow” сообщает ботам поисковых систем, что им запрещено переходить по URL-адресу, указанному в атрибуте href.

Данный атрибут никак не касается посетителей сайта — они могут спокойно переходить по этим ссылкам на другие страницы. Он предназначен только для краулеров — они не смогут перейти по ссылке и посетить страницу или отметить какой-то положительный фактор связи обеих страниц.

Этот атрибут можно применить к ссылке следующим образом:

<a href=www.website.com rel="nofollow">анкор</a>

Или вы можете сделать все ссылки на сайте nofollow, используя этот атрибут в теге <head>, как noindex:

<meta name="robots" content="nofollow" />

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

Как Google использует атрибут rel=“nofollow”

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

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

атрибут rel=“ugc” указывает на контент, созданный пользователями, и используется для отметки ссылок, которые оставили в комментариях или на форуме;
атрибут rel=“sponsored” используется для идентификации рекламных или спонсорских ссылок.

Google также заявил, что атрибуты “nofollow”, rel=“ugc” и rel=“sponsored” теперь рассматриваются как подсказки. Раньше бот Google игнорировал такие ссылки, но теперь он может рассмотреть предоставленную «подсказку» и сам решить, использовать ссылку для ранжирования или нет.

Атрибут canonical

Атрибут rel=“canonical” позволяет сеошникам указывать, какая из страниц каноническая — то есть основная ее версия.

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

Вот как выглядит этот атрибут:

<link rel="canonical" href="https://www.website.com/" />

Код с атрибутом canonical должен быть помещен в <head> страницы. Важно: каноническую страницу нужно указать после атрибута href=.

Узнайте, что говорит о канонических URL Google.

4) <img> — отображает картинки и описывает их содержимое

Тег <img> есть на любой странице, где присутствуют картинки. Его используют для отображения картинок в форматах PNG, JPEG или GIF. Также картинку можно добавить в виде ссылки на другой файл — для этого достаточно поместить тег <img> в контейнер <a>.

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

Тег <img> по сути указывает браузеру, где именно на сервере хранится изображение, а браузер уже сам подтягивает картинку и выводит ее на страницу.

Вот как выглядит HTML-код тега <img>:

<img src=”imagefilename.jpg” title=”описание изображения” alt=”альтернативное описание изображения”>

Как видите, в этом теге есть три атрибута. Один из них обязательно нужно правильно заполнить, чтобы тег функционировал, а другие можно оставить без значений. Давайте рассмотрим их подробнее.

Атрибут src

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

Местоположение изображения, то есть его URL, можно указать двумя способами:

Если его можно найти в том же домене, где расположена страница, нужно использовать относительный URL. В этом случае доменное имя не включается в URL. Если в начале URL-адреса нет слэша — значит он относится к текущей странице.

src=”imagefile.png”

А если в начале URL есть слэш, значит, он относится к домену.

src=”/images/imagefile.png”

Обратите внимание, что относительные URL-адреса не становятся битыми при изменении домена, например при переезде с HTTP на HTTPS. А вот если браузер не сможет распознать изображение, вместе со значком неработающей ссылки будет отображаться альтернативный текст.

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

src=”https://www.website.com/images/imagefile.png”

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

Единственная цель атрибута src с точки зрения SEO — индексация изображений и их ранжирование в поиске по картинкам. И да, тег image просто не будет работать без этого атрибута.

Атрибут alt

Атрибут alt задает альтернативный текст для изображения, который будет отображаться в случае, если картинка по каким-то причинам не откроется. По сути, атрибут alt описывает то, что изображено на картинке — так поисковики могут понять, насколько релевантно изображение и по какому запросу отображать картинку в выдаче.

Попробуйте в alt-тексте использовать ключевые слова, которые а) описывают изображение и б) относятся к теме страницы.

А чем же полезен атрибут alt= для пользователей? Текст в этом атрибуте используют скринридеры, чтобы дать возможность слепым или слабовидящим людям понять, что же изображено на картинке. Поэтому вы можете использовать атрибут alt, чтобы помочь таким людям ознакомиться с контентом.

Помните, как я говорила, что два атрибута <img> можно оставить без значения? Хоть атрибуты alt= и title= должны быть в теге image, заполнять их необязательно. Но, учитывая вышесказанное, вы наверняка захотите это сделать.

Атрибут title

Атрибут title описывает содержимое картинки.

Хоть этот атрибут не так важен для оптимизации, как alt, заполнять его стоит как минимум потому, что он отображается в виде подсказки, когда наводишь курсором на картинку.

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

Атрибут	Значение	Описание
crossorigin	anonymoususe-credentials	Позволяет использовать изображения со сторонних сайтов, которые разрешают использование совместного доступа с canvas
height	pixels	Определяет высоту изображения
ismap	ismap	Говорит браузеру, что картинка является серверной картой-изображением
loading	eagerlazy	Определяет, должен ли браузер сразу загружать изображение, или ему нужно ждать, пока не будут выполнены определенные условия
longdesc	URL	Указывает страницу, где есть описание картинки
referrerpolicy	no-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-url	Определяет, какая информация о реферере должна использоваться при получении изображения
sizes	sizes	Определяет размеры изображения для разных макетов страниц
srcset	URL-list	Предоставляет список файлов изображений, которые нужно использовать в различных сценариях
usemap	#mapname	Определяет картинку как клиентскую карту-изображение
width	pixels	Определяет ширину изображения

Тег <img> также поддерживает универсальные атрибуты HTML и события.

5) <i>, <em>, <b> и <strong> — акцентируют важное в тексте

Отдельная группа тегов отвечает за акцентирование текста — выделение его полужирным, курсивом и т. д. Это актуально, если вам нужно логически выделить важную часть текста — как для читателя, так и для поисковика.

Самые распространенные теги, которые помогают форматировать текст:

<i> — выделяет текст курсивом.

<i>Текст курсивом</i>

<em> акцентирует внимание на тексте. Содержимое тега выделяется курсивом. Он позволяет скринридерам понять, на каких словах стоит сделать акцент во время чтения.

<em>Выделенный текст</em>

Ключевое различие между тегами <i> и <em> заключается в том, что последний делает смысловое ударение на важном слове или словосочетании (важно для SEO), в то время как первый — это просто текст, который выделен курсивом для отображения определенного настроения или интонации.

<b> — выделяет текст полужирным.

<b>Текст полужирным</b>

<strong> — тоже выделяет текст полужирным. Но в отличие от <b> этот тег показывает поисковикам, что выделенный текст очень важен. А тег <b> просто делает слова полужирными, не придавая этому особого значения.

<strong>Важный текст</strong>

6) <table>, <ul>, <ol> — помогают попасть в быстрые ответы

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

Проверив код на странице, которая получила такой блок с ответом, мы нашли таблицу, оформленную следующим образом:

Вот так выглядит HTML-код без дополнительных данных:

<table>
<tr>
<th>Рейтинг стран</th>
<td>Япония</td>
</tr>
</table>

А теперь давайте разберемся, как правильно использовать теги <table>, <caption>, <tr>, <td> и <th>:

<table> — этот тег определяет структуру и содержимое таблицы. Внутри <table> используются такие элементы как <caption>, <td>, <th>, <tr> и другие. С помощью атрибутов можно полностью изменить таблицу: align (выровнять таблицу), background (задать картинку как фон), bgcolor (изменить цвет фона), border (задать толщину рамки) и другое.
<caption> — создает заголовок для описания таблицы.
<tr> — создает строку таблицы.
<td> — создает отдельную ячейку в таблице.
<th> — создает заголовочную ячейку таблицы, текст в которой выделен полужирным и выровнен по центру.

Что касается списков, здесь похожая история. Польза списков для SEO состоит в том, что оформив текст четко и лаконично в пошаговую инструкцию, вы можете увеличить ваш шанс попасть в блок с ответами.

Вот пример того, как выглядит HTML-код для пронумерованных списков (<ol>) и списков с буллетами (<ul>):

<ul>
<li>Пункт списка с буллетами</li>
<li>Еще один пункт</li>
</ul>

<ol>
<li>Пункт пронумерованного списка</li>
<li>Еще один пункт</li>
</ol>

Давайте разберемся, как правильно использовать теги <ul>, <ol> и <li>:

<ul> — обозначает список с буллетами (unordered list).
<ol> — обозначает нумерованный список (ordered list).
<li> — определяет отдельный пункт списка. Каждый элемент списка должен начинаться с тега <li>.

Для SEO лучше использовать таблицы, а не списки, потому что таблицы позволяют поисковым системам легко извлекать данные и в результате выводить статьи в ТОП.

7) <header> — делает контент читабельным

Тег <header> задает «шапку» сайта или раздела страницы, где обычно располагается логотип, поисковая форма и навигационные ссылки.

Важно: в одном HTML-коде может быть несколько тегов <header>, но сам тег не может быть размещен в тегах <footer>, <address> или внутри другого тега <header>. Тег поддерживает универсальные атрибуты HTML и события.

Вот как выглядит HTML-код:

<!DOCTYPE html>
<html>
<body>
<article>
  <header>
    <h2>Напишите здесь заголовок</h2>
    <p>Опубликовано Дарьей Ивановой</p>
    <p>Представьте ваш текст</p>
  </header>
  <p>И детально напишите все, что хотели</p>
</article>
</body>
</html>

Это всего лишь пример. Элемент <header> можно легко найти на многих сайтах — он находится в самом верху:

Что это дает SEO? Краулеры считают хедеры удобными для пользователя — они дают юзерам возможность легко находить нужную информацию на сайте. Без хедеров поисковые роботы могут подумать, что ваша страница не user-friendly, и в результате ваши позиции в выдаче упадут. А еще тег может содержать внутренние навигационные ссылки — это дает поисковикам четкое представление о том, какие страницы наиболее важны в структуре вашего сайта.

8) <h2> … <h6> — структурируют текст на разделы

Каждый текст на странице имеет свою структуру, которая помогает и поисковикам, и пользователям понять, о чем же будет идти речь. Так у текста появляется название и смысловые блоки — каждый со своим заголовком. В HTML используются специальные теги, чтобы выделить на странице эти элементы.

Существует шесть уровней заголовков — от h2 до h6. <h2> используется как главный заголовок текста на странице и обычно размещается над текстом. Все заголовки размещаются по принципу иерархии (от <h2> до <h6>), при этом обычно используется только один <h2>.

Вот как выглядит HTML-код:

<h2>Все о тегах для новичков в SEO</h2>
  <p>Мы решили написать эту статью, потому что периодически получали вопросы в поддержку, связанные с HTML-тегами. </p>
  <h3>С чего начать</h3>
  <p>Мы не будем учить вас писать код для сайта, а покажем, с какими тегами чаще всего сталкивается сеошник.</p>

Кстати, приоритет использования <h2> подтверждается экспериментом сеошников, о котором упоминал у себя в telegram-канале Сергей Кокшаров. Было доказано, что замена <h2> на <h3> приводит к проседанию позиций. А значит, <h2> нужно и важно использовать на странице.

Поэтому SEO-специалистам стоит прислушиваться к рекомендациям и не нарушать иерархию заголовков.

Важно: <title> и <h2> — не одно и то же. Да, оба эти тега имеют похожие функции — рассказывают, о чем текст на странице, поэтому их могут путать. Основное различие между этими тегами заключается в том, что тайтл отображается в сниппете, соцсетях и вкладках браузера, а <h2> — только на самой странице в качестве заголовка текста. Также они должны различаться, так как выполняют разные роли — тайтл привлекает людей из выдачи, а <h2> — подтверждает, что люди оказались на нужной странице, и раскрывает суть контента.

9) <footer> — обеспечивает внутреннюю ссылочную структуру и навигацию по сайту

Тег <footer> задает «подвал» сайта или раздела.

Как правило, в теге содержатся имя автора, правовая информация, контактные данные (должны находиться внутри тега <address> в <footer>), ссылки на документы и страницы, переход на начало страницы, а также карта сайта. В HTML-коде может быть несколько тегов <footer>. Этот тег поддерживает универсальные атрибуты HTML и события.

Вот пример того, как выглядит HTML-код:

<!DOCTYPE html>
<html>
<body>
<h2>Футер</h2>
<footer>
  <p>Автор: Дарья Иванова<br>
  <a href="mailto:[email protected]">[email protected]</a></p>
</footer>
</body>
</html>

Вот как это выглядит на странице:

Приведенный выше пример — не типичный футер, который сразу приходит на ум, но такое можно часто встретить под различными статьями. На скриншоте ниже представлен заполненный ссылками футер на главной странице SE Ranking вместе с его HTML-кодом:

В большинстве случаев футер одинаковый для всего сайта и предоставляет пользователям всю необходимую информацию.

Но чем футер полезен для SEO? Футер содержит ссылки — много ссылок, что очень важно для поисковой оптимизации, поскольку это обеспечивает четкую внутреннюю ссылочную структуру сайта. Поэтому убедитесь, что ссылки на все ваши важные страницы есть в футере, чтобы их не пропустили поисковики.

10) Много тегов <div> замедляют работу страниц

Тег <div> предназначен для разделения контента в HTML-коде. Он хранит все типы элементов HTML.

Уточню, тег <div> — это блочный элемент, который предназначен для выделения фрагмента документа с целью изменения вида содержимого. Чтобы не описывать каждый раз внутри тега стиль, можно выделить его во внешнюю таблицу стилей и добавить атрибут class или id с именем селектора.

Вот как выглядит HTML-код:

<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {
  border: 7px outset black;
  background-color: lightgreen;    
  text-align: center;
}
</style>
</head>
<body>
<h2>The div tag</h2>
<div>
  <h3>Заголовок в теге div</h3>
  <p>Текст в теге div.</p>
</div>
<p>Текст вне тега div.</p>
</body>
</html>

После запуска кода вы увидите, что содержимое элемента div отделено от всего остального:

Тег <div> может содержать два атрибута:

атрибут align определяет выравнивание элемента div на странице;
атрибут title добавляет всплывающую подсказку к содержимому.

Также для этого тега доступны универсальные атрибуты и события.

Для SEO размещение контента в тегах <div> по сути не является проблемой, но наличие большого количества ненужного кода в HTML-документе может замедлить работу страницы, что приведет к проблемам с UX.

11) <section> — объединяет связанный между собой контент

Все просто — тег <section> задает раздел HTML-документа. Его применяют для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и много другого.

Важно: как правило, этот элемент имеет заголовок. Также можно вкладывать один элемент section внутрь другого. Для этого тега доступны глобальные атрибуты и события.

Вот как выглядит HTML-код:

<section>
  <h3>Лондон</h3>
  <p>Лондон — столица Англии и Соединенного Королевства. В самом центре Лондона находится здание парламента — Вестминстерский дворец, а также знаменитая часовая башня Биг-Бен и Вестминстерское аббатство. На противоположном берегу Темзы расположено колесо обозрения, с которого открывается панорамный вид не только на южный берег, но и на весь город.  </p>
</section>

Запустив его, вы увидите:

Как вы можете видеть на скриншоте ниже, мы тоже используем элемент <section> на нашем сайте, чтобы выделить различные части или разделы главной страницы:

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

12) <article> — выделяет самостоятельный контент

Тег <article> обозначает цельный и самостоятельный контент. Но, в отличие от <section>, его можно вырезать из одного места и вставить в другое — например, на другой сайт — а смысл его содержимого при этом не потеряется. При чем сделать это можно за считанные минуты. Тег часто используют для статей и постов в блоге.

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

Тег <article> упрощает поисковикам процесс определения новых статей или заметок в онлайн-изданиях. Таким образом, Google может уделять больше внимания контенту, заключенному в тег <article>.

Также использование тегов <article> сокращает использование тегов <div> и делает HTML-код вашей страницы чище.

13) <aside> — создает боковые панели

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

Обычно содержимое элемента aside не имеет прямого отношения к контенту страницы. Подобно тегу <div>, aside просто создает боковую панель и не стилизует ее. Но это можно сделать с помощью CSS. Для данного тега доступны универсальные атрибуты.

Вот как выглядит HTML-код для боковой панели на главной странице нашего блога:

Тег <aside> помогает поисковикам быстро получать ценную информацию о странице — об авторе, количестве просмотров и датах. Также этот тег можно использовать для создания дополнительного контента, который имеет отношение ко всей странице, а не к одной из статей в блоге. Это позволяет поисковикам анализировать окружение страницы, чтобы лучше понять как ее общую, так и более конкретную тему — и в конечном итоге ранжировать страницу по релевантным запросам.

14) <iframe> vs <frame>: что предпочитают сеошники

Вы наверняка слышали о том, что многие сеошники недолюбливают сайты, написанные на фреймах — большинство из них родом из 90-х.

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

Как видите, это выглядит откровенно плохо, но если посмотреть на код, то все еще хуже — что создает на таких страницах много проблем.

Что же нужно знать о теге <frame>?

Тег <frame> определяет свойства отдельного окна (фрейма) на странице. Он находится в контейнере <frameset>, который делит страницу на отдельные области. По сути, каждая такая область — это отдельная веб-страница.

Сегодня эта технология считается устаревшей — обычные фреймы больше не поддерживаются в HTML5. Но многие технологии поддерживают <iframe>, что позволяет вставлять фреймы в текстовые блоки на странице.

Тег <iframe> зачастую используется для того, чтобы добавить на сайт интерактивные карты, виджеты, а также медиаконтент, например, видео из Youtube.

Мы тоже использовали тег <iframe>, чтобы добавить на страницу SE Ranking видео из нашего YouTube-канала.

Таким образом, тег <iframe> дает вам возможность встраивать контент с другого сайта на свой собственный. Полезен ли он для SEO? Поскольку поисковики понимают, что контент iframe извлекается из другого ресурса, он не будет приносить никакой выгоды. Но все же лучше использовать этот тег, чем <frame>.

15) <nav> — определяет приоритетные страницы

Тег <nav> задает навигацию по сайту и указывает на самые важные его страницы.

В этой статье мы уже рассказывали о внутренних навигационных ссылках в разделах <header> и <footer>. Так чем же отличается от них тег <nav>? Его используют для создания блока с основной навигацией и помещают в него приоритетные линки. А еще тег <nav>, кроме ссылок, может содержать абзацы с текстом, заголовки и списки. Его часто используют для создания меню сайта.

Тег <nav> может встречаться несколько раз в HTML-документе. Но не переусердствуйте и не помечайте все ссылки элементом <nav>. И помните — нельзя вкладывать его в тег <address>.

Тег <nav> поддерживает универсальные атрибуты HTML и события.

Вот как выглядит HTML-код:

<!DOCTYPE html>
<html>
<body>
<h2>Элемент nav</h2>
<p>Элемент nav задает навигационные ссылки:</p>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
</body>
</html>

Ниже вы можете увидеть, как выглядит HTML-код на опубликованной странице:

Вот как работает тег, если его добавить в HTML-код сайта:

Для SEO ссылки, помеченные элементом <nav>, дают понять поисковикам, какие страницы вы считаете наиболее важными на своем сайте. А еще тег обеспечивает роботам быстрый и легкий доступ к этим страницам.

16) <script> — помогает сделать сайт интерактивным

Основная цель тега <script> — добавление JavaScript-кода в HTML-документ. Именно с помощью JavaScript создают интерактивные сайты, которые реагируют на ваши действия — например, выпадает меню при клике, добавляется лайк при нажатии на «сердечко» и многое другое. Без JavaScript сложно представить хороший сайт.

Тег <script> может содержать ссылку на программу или ее текст на определенном языке кодировки, известном как оператор скрипта. Скрипты могут располагаться как на вашем сайте, так и во внешнем файле и связываться с любым HTML-документом.

Тег <script> можно размещать в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не влияет на работу программы. Но скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.

Вот как выглядит пример HTML-кода:

<script src="javascript.js"></script>

Нет смысла показывать вам, как этот код будет выглядеть в действии, потому что нет никакого контекста. Поэтому вот пример того, как мы использовали тег script, чтобы добавить виджет HelpCrunch на наш сайт:

Прежде чем мы перейдем к особенностям обработки JavaScript поисковиками, ознакомьтесь с таблицей ниже. Она даст представление о том, как можно использовать внешние скрипты на своих страницах и какие атрибуты вам в этом помогут.

Атрибут	Значение	Описание
async	async	Указывает, что скрипт будет выполняться без ожидания загрузки страницы
defer	defer	Откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью
language	JavaScript (последние версии HTML, XHTML и его альтернативы не используют этот атрибут)	Определяет язык программирования, на котором написан скрипт
src	URL	Устанавливает URL скрипта из внешнего файла для импорта в текущий документ
type	scripttype	Определяет тип тега <script>

Важно: если в скрипте нет атрибутов async или defer, он будет извлечен и выполнен без задержки, даже до того, как браузер прогрузит ресурс.

А еще стоит напомнить, что у поисковиков возникают проблемы с JavaScript. Его использование часто предполагает, что определенный контент появится на сайте только после действия пользователя, поэтому большинство поисковиков этот контент просто не увидит, а значит — не проиндексирует.

Пока только Google умеет обрабатывать JavaScript, поэтому, если вы хотите, чтобы ваш JavaScript-контент видели все поисковики, рекомендуем использовать динамический рендеринг или рендеринг на стороне сервера.

Как проверить, все ли ОК с тегами

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

Детальный анализ вашего сайта покажет страницы с noindex и hreflang, rel=“canonical” и rel=“alternate”, проверит заголовки и теги на уникальность и соответствие ограничениям по длине, найдет все дубли и картинки с пустым alt, проанализирует ошибки в заголовках (h2-h6) и многое другое. В отчете будут указаны не только ошибки и замечания, но и пути их решения. Периодичность проведения аудита можно настроить самостоятельно, исходя из ваших потребностей и частоты изменений, которые вы вносите на сайт.

В этой статье мы описали не полный список тегов и атрибутов, а лишь те, с которыми чаще всего сталкивается сеошник в ежедневной рутине. Понимая важность каждого из перечисленных элементов, его структуру и роль на странице, вы сможете многое — определить ошибки в использовании тегов, написать правильное ТЗ для программиста и даже самостоятельно подправить код.

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

4759 views

полный список тегов и значений — Топвизор

Содержание

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

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

Тег title

Тег meta

Тег link

Тег a

Тег img — атрибут ALT

Теги заголовков h2 – h6

Конспект

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

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

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

Как открыть исходный код в разных браузерах и на мобильных устройствах

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

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

HTML-код страницы

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

Все эти элементы вместе говорят браузеру, как нужно отображать страницу, какие элементы на ней есть.

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

Сравнение: как элементы выглядят на странице и в коде

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

Метатеги в HTML-коде

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

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

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

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

Из чего состоит элемент 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-тег.

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

странице поисковой выдачи в сниппете;
в описании ссылок при репостах.

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

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

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

<!DOCTYPE HTML>
<head>
      <title>Самый лучший заголовок</title>
</head>

Тег meta

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

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

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

name=»description»

Это один из самых важных метатегов для SEO.

В этом метатеге мы указываем описание страницы. Яндекс говорит, что содержимое метатега description — один из источников, на основе которых формируются описания страниц сайта в результатах поиска. Вот как он выглядит в коде:

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

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

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

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

Яндекс.Справка: «В description следует добавить полезный и привлекательный текст. Длина описания ограничена шириной экрана устройства, которое использует пользователь».

name=»robots»

В коде этот метатег выглядит так:

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

Здесь значение атрибута name — «robots», а значение атрибута content — «noindex». Получается, что с помощью этого метатега мы привлекаем внимание поисковых роботов (robots) и говорим им (content), что эту страницу индексировать не нужно (noindex).

name=»keywords»

Другой пример важного для SEO метатега — keywords или ключевые слова. Например:

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

Здесь значение атрибута name — «keywords», а значение атрибута content — «wordstat, Яндекс.Вордстат, как пользоваться вордстатом». Получается, мы показываем поисковым роботам, что в этом метатеге содержатся ключевые слова страницы (keywords), и говорим (content), что эти слова такие: wordstat, Яндекс.Вордстат, как пользоваться вордстатом.

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

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»

Используется для того, чтобы указать канонический (основной) адрес страницы.

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

Для это мы указываем на страницах канонический URL основной страницы. Так мы можем помочь поисковой системе понять, какая из этих страниц основная, а какие — её копии.

Что будет, если не указать canonical — Яндекс.Справка

Для чего выбирать канонический URL — Google Справка

В коде тег 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" rel="nofollow">https://taplink.cc/dasha_thinks</a>

rel=»sponsored»

Используется для рекламных и партнёрских ссылок. Пример в коде:

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

rel=»ugc»

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

О влиянии спамных ссылок на SEO — Google Справка

Тег img — атрибут ALT

Тег <img> — стандартный тег HTML. У него есть важный для SEO атрибут — ALT.

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

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

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

Теги заголовков h2 – h6

h2 — это тег главного заголовка контента. Его видит пользователь, когда заходит на страницу.

Пример заголовка h2 на странице

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

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

Конспект

Базовые понятия:
- тег и всё, что внутри него, называется элементом HTML-кода;
- метатеги содержат основную информацию для браузера и поисковых систем;
- с помощью атрибутов и их значений мы можем указать дополнительные условия для элементов кода, которые важны для SEO.
Внутри тега <head></head> обращайте внимание на эти теги:
- <title> — основной SEO-заголовок веб-страницы;
- <meta> — метаданные, важные для поисковой выдачи;
- <link> — устанавливает связь текущей веб-страницы с другими веб-документами (страницы, стили, шрифты).
Внутри блока <body></body> обращайте внимание на эти теги:
- иерархия заголовков от <h2> до <h6>;
- атрибуты тега <a> — тег ссылок;
- альтернативный текст тега <img>.

Как правильно составлять мета-теги для сайта самостоятельно — SEO на vc.ru

В потоке постоянных противоборств между сторонниками SEO-продвижения и других каналов интернет-маркетинга часто упускается важный момент: сайтам для попадания в ТОП иногда достаточно просто грамотно заполненных описаний страниц.

9589 просмотров

Помимо упорядочивания и ответственного оформления сайта, грамотно заполненные мета-теги:

повышают релевантность страницы для конкретного поискового запроса;
дают ощутимый плюс к росту позиций сайта;
структурируют данные для формирования поисковыми системами привлекательного сниппета в выдаче;
повышают не только видимость сайта, но и кликабельность (CTR) его страниц.

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

«Заполнение SEO-настроек сайта» — одна из наиболее популярных услуг у клиентов сервиса Nethouse.Продвижение, поэтому мы накопили богатый опыт по доработке мета-тегов, и решили поделиться несколькими советами с владельцами сайтов на нашей платформе.

Напомним, что к чему

Title — главный мета-тег, из которого формируется заголовок страницы в сниппете выдачи. В нем должна кратко отражаться суть вашего ресурса. Description — здесь указывается краткое описание страницы, также отражающееся в сниппете.

Мета-теги Title и Description в сниппете

Однако за последний год произошло важное изменение с Title: раньше поисковики могли сформировать его самостоятельно только в случае, если этот тег не был прописан владельцем сайта. Теперь же Яндекс и Google могут собрать заголовок для сниппета самостоятельно, даже если тег уже заполнен.

Заполненный Description поисковые системы также не всегда учитывают: Яндекс, например, часто игнорирует содержимое этого мета-тега и составляет свое описание, собирая его из всего текста на сайте. Google чаще использует Description владельца, но в некоторых случаях тоже может «собрать» свой собственный и подставить в сниппет именно его.

Тег h2 — это основной заголовок, отражающийся на странице сайта. В сниппете его нет, однако забывать о нем нельзя. На нашем конструкторе этот тег прописывается как название разделов, товаров, текстовых страниц.

9 шагов к идеальному мета-описанию

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

1. Не увлекайтесь профессиональной терминологией

Содержание тегов должно быть понятно не только вам, но и широкому кругу пользователей. Безусловно, есть категории товаров, которые ищут именно профессионалы, однако стоит подумать и о новичках, непрофильных специалистах, которые могут заинтересоваться таким типом товаров или услуг.

Так, например, даже в категории одежды есть эксперты, которые различают типы воротников у рубашек (например, баттен-даун и вырез хенли), а неискушенный покупатель может искать просто «воротник с пуговицами».

2. Не нужно стараться вписать все

Если коротко, то:

теги должны быть информативными и содержать в себе описание контента именно той страницы, на которой они размещены;
не допускайте сухого перечисления ключевых фраз или всех свойств сайта — такие теги оцениваются поисковиками как переспамленные или неинформативные;
если у товара много свойств, сфокусируйтесь на главном, например, если речь идет о смартфоне — на цвете, объеме памяти, ключевой технологии;
если хотите включить в мета-теги призыв к действию или другую коммерческую информацию для привлечения клиентов — делайте это в Description.

3. Учитывайте местную специфику

Россия — страна большая, и в каждом регионе имеются языковые особенности, которые там приняты как норма, а приезжими воспринимаются с трудом. Но часто именно на местном сленге или языковых особенностях строится поиск. Скажем, в центральной России слово «мочалка» просто и понятно, а вот у жителей Пермского края есть свой вариант — «вехотка», и ищут его вполне активно:

Такое внимательное отношение к местным традициям наверняка будет оценено не только Яндексом или Google, но и аудиторией.

4. Добавляйте ключевые фразы там, где есть смысл

Все давно знают базовые рекомендации, которые должны быть учтены владельцем сайта при заполнении тегов:

составляйте мета с использованием целевых ключевых фраз для заполняемой страницы. Для подбора ключевых фраз используйте сервисы Wordstat от Яндекса и Google Trends;
при подборе учитывайте различные синонимы и варианты названия ваших товаров, а также кириллическое написание фирм, товаров и пр.;
подбирайте для каждой страницы уникальную группу из 3-10 фраз и не допускайте пересечения страниц по этим группам; в одном теге прописывайте 1-2 ключевые фразы и указывайте более высокочастотные фразы в начале.

Тем не менее, иногда бывает, что служебные или второстепенные страницы делают «заточенными» под ключевые фразы, но это не имеет особого смысла, так как трафик по запросам вроде «гарантия и возврат» или «акция ко Дню медработника» отсутствует.

5. Следите за уникальностью

Желательно не дублировать мета-теги для страниц конкретных товаров и услуг на сайте — они должны быть уникальными. Для этого поищите ключевое отличие (цвет, форма, комплектация) и внесите его в Title и Description. Это делается для того, чтобы поисковики четко понимали различия между страницами сайта и не путали их между собой.

Что же касается основных разделов и категорий, здесь прописать уникальные комплекты мета-тегов нетрудно, а «для верности» в конце содержимого тегов Title и Description впишите название компании или интернет-магазина.

6. Указывайте регион работы

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

Если сайт работает в нескольких регионах, то перечислять их все в теге Title излишне. Лучше укажите их в Description в виде общего региона — скажем, доставка по всему федеральному округу, России, СНГ и пр.

7. Соблюдайте ограничения по длине

Несмотря на то, что часто поисковики сами определяют, какой Title показать и что из всего Description выбрать, не стоит писать слишком большие и объемные теги.

В поисковых системах по-прежнему действуют ограничения по отображаемой длине в сниппете. Рекомендуемая длина тегов для получения максимально содержательного сниппета составляет:

Title — 60-70 символов;
Description — 150-160 символов.

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

8. Проверяйте ошибки и опечатки

Речь не только о том, что у пользователя сразу формируется негативное отношение к сайту с орфографическими ошибками.

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

Ну и разумеется, стоит ли говорить о том, что сниппет с ошибками будет смотреться в выдаче непривлекательно, а также негативно влиять на CTR сайта?

9. Анализируйте конкурентов

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

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

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

Заключение

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

Если вы еще успели указать мета-теги для своего сайта либо сомневаетесь в корректности уже заполненных, настоятельно рекомендуем уделить этому время. А наши подсказки, надеемся, будут вам при этом полезны.

Также вы можете доверить заполнение SEO-настроек сайта специалистам Nethouse.Продвижение — просто оставьте заявку и мы обязательно поможем!

SEO-параметры для товара

Главная / Интернет-магазин / Интернет-магазин 2. 0 / Товары / Добавление товара / SEO-параметры для товара

Видеоинструкция

SEO-параметры товара необходимо заполнять для поисковых систем. К ним относятся:

«Заголовок (h2):«

— Значение данного параметра отображается на странице товара в качестве заголовка. По умолчанию в качестве тэга h2 используется название товара, однако Вы можете задать заголовок самостоятельно. Также стоит обратить внимание на такую особенность: если Вы укажете h2, но не укажете мета-теги — они будут автоматически подставлены из h2.

«Заголовок страницы (TITLE):«

— Содержимое данного тэга отображается:

В верхней части браузера (программы для просмотра веб-страниц)
В поисковой выдаче, текст ссылки на Ваш сайт зачастую берется как раз из title

«Ключевые слова (KEYWORDS):«

— Данный мета-тэг уже более трех лет не учитывается поисковыми системами. Вы можете оставить его пустым.

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

«Описание страницы (DESCRIPTION):«

— Содержимое этого тэга может отображаться под ссылкой на сайт в поисковой выдаче (текст сниппета). Это более актуально для поисковой системы Google, однако Яндекс также может выводить description в своей выдаче.

Оптимальный способ заполнения данного тэга — логичное, законченное предложение, в котором кратко излагается содержимое конкретной страницы.

Мета-теги социальных сетей («Заголовок страницы для социальных сетей», «Описание страницы для социальных сетей», «Титульное изображение для социальных сетей», «Тип объекта»)

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

Подробнее о том, как это работает, читайте в инструкции по ссылке.

Шаг 1

Для того чтобы отредактировать SEO-параметры для товара Вам необходимо перейти в раздел редактирования магазина и выбрать нужный товар.

Шаг 2

В карточке товара выберите вкладку «SEO параметры».

Тут же Вы можете задать следующие настройки:

Параметры индексации
- all — разрешить индексацию, открыть ссылки для бота (страница индексируется и поисковый бот может переходить по ссылкам с данной страницы),
- none — запретить индексацию, закрыть ссылки для бота (страница не индексируется и поисковый бот не может переходить по ссылкам),
- noindex, follow — запретить индексацию, открыть ссылки для бота (страница не индексируется, но поисковый бот может переходить по ссылкам),
- index, nofollow — разрешить индексацию, закрыть ссылки для бота (страница индексируется, но поисковый бот не может переходить по ссылкам).
Заголовок (h2) — мета-тег, задающий заголовок первого уровня, отображающийся в верхней части страницы. По умолчанию, при создании страницы в качестве тега h2 используется название страницы, однако Вы можете задать заголовок самостоятельно.
Заголовок страницы (Title) — мета-тег, используемый для записи заголовка страницы тега с целью поисковой оптимизации (именно такие заголовки страниц сайтов Вы видите в результатах выдачи поисковых систем, когда, допустим, открываете ТОП-10 по определенному ключевому слову). Принимается во внимание поисковыми системами при индексации страницы.
Описание страницы (Description) — мета-тег, используемый для создания небольшого описания страницы тега. Данное описание будет отображаться на странице поисковой выдачи под заголовком Вашего сайта – в качестве аннотации. Принимается во внимание поисковыми системами при индексации страницы.
Ключевые слова (Keywords) — мета-тег, используемый для записи ключевых слов, связанных со страницей тега, с целью поисковой оптимизации. Принимается во внимание некоторыми поисковыми системами при индексации страницы.
Тут же Вы можете задать мета-теги для социальных сетей. Подробнее о том, что это такое и как работает, читайте по ссылке.

После внесения изменений не забудьте сохранить товар, нажав на кнопку «Сохранить и закрыть».

Импорт SEO-параметров

Вы можете добавить заголовки и мета-теги для нескольких разных товаров. Для этого необходимо воспользоваться импортом.

Подробная инструкция по импорту товаров доступна по ссылке.
Чтобы подготовить файл для импорта, воспользуйтесь инструкцией по ссылке.

SEO-переменные

Вы можете использовать в мета-тегах SEO-переменные.

Подробная инструкция по работе с SEO-переменными доступна по ссылке.

Была ли статья вам полезна?

Да

Нет

Укажите, пожалуйста, почему?

Рекомендации не помогли
Нет ответа на мой вопрос
Содержание статьи не соответствует заголовку
Другая причина

Комментарий

SEO мета-теги для поисковиков | SEO-портал

Автор: Нотан Ройамов

Создано: 2019-03-21

Обновлено: 2020-01-24

Оценка:

Комментарии: 1

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

Содержание

Виды мета-тегов для поисковиков

Мета-теги для поисковых систем можно условно разделить на два вида:

Мета-теги для оптимизации сайтов: Эти мета-теги применяются при SEO-оптимизации веб-страниц, предоставляя поисковым роботам инструкции по сканированию и индексированию, а также информацию для определения релевантности и формирования сниппетов поисковой выдачи.
Мета-теги для верификации сайтов: Данные мета-теги используются для подтверждения <div class="seog-tooltip-more-link"><a href="/terminy/sajt">Подробнее</a></div> »>сайта в сервисах для веб-мастеров поисковых систем Яндекс и Google.

Мета-теги для SEO-оптимизации сайтов

Мета-тег Title

Тег title не является мета-тегом только с точки зрения синтаксиса. В остальном он подобен мета-тегу: прописывается в блоке head и не отображается непосредственно на веб-странице. Тег title должен содержать название страницы, отображающееся во вкладках и закладках браузера. Поисковые системы используют содержимое данного тега при формировании сниппетов поисковой выдачи и при определении релевантности страницы поисковым запросам.

<!-- пример мета-тега Title -->
<title>Заголовок страницы</title>

Подробнее

Мета-тег Robots

Должен содержать инструкции для поисковых роботов.

<!-- пример мета-тега Robots -->
<meta name="robots" content="noindex, follow" />

Подробнее про мета-тег Robots

Мета-тег Description

Должен содержать краткое описание веб-страницы. Содержимое мета-описания может применяться поисковыми системами при формировании аннотации сниппета поисковой выдачи.

<!-- пример мета-тега Description -->
<meta name="description" content="Краткое описание страницы" />

Подробнее

Мета-тег Keywords

Должен содержать список ключевых слов и фраз, которым релевантна веб-страница. Содержимое данного тега может учитываться при определении релевантности веб-страницы алгоритмом поисковой системы Яндекс. Роботы Google игнорируют мета-тег Keywords.

<!-- пример мета-тега Keywords -->
<meta name="keywords" content="ключевая фраза 1, ключевая фраза 2, ключевая фраза 3" />

Подробнее

Мета-тег Revisit

Должен указывать поисковым системам, как часто изменяется В SEO, как правило, под <span>контентом</span> подразумевается основное содержимое страницы, представляющее первостепенный интерес у заинтересованных пользователей.<div class="seog-tooltip-more-link"><a href="/terminy/kontent">Подробнее</a></div> »>контент на веб-странице.

<!-- пример мета-тега Revisit -->
<meta name="revisit" content="7" />

Роботы Яндекса и Google игнорируют данный мета-тег. Для указания поисковой системе на актуальную частоту изменения содержания веб-страницы применяется файл Sitemap в формате XML.

Мета-тег URL

Должен содержать ссылку на канонический URL-адрес (дубль текущей страницы, который нужно индексировать).

<!-- пример мета-тега URL -->
<meta name="url" content="https://seoportal.net" />

Роботы Яндекса и Google игнорируют данный мета-тег. Для указания поисковым системам на канонические URL-адреса применяются иные способы.

Мета-теги для верификации в поисковых системах

При регистрации сайта в сервисах для веб-мастеров Яндекса или Google необходимо подтвердить право собственности на добавляемый сайт. Для этого можно применять мета-теги верификации в поисковиках.

Мета-тег Yandex Verification

Данный мета-тег предлагается разместить на главной странице сайта для подтверждения прав собственности на него при добавлении сайта в сервис Яндекс.Вебмастер:

Мета-тег Yandex Verification

В значении атрибута content генерируется случайный набор символов, актуальный именно для текущего добавляемого сайта:

<!-- пример мета-тега Yandex Verification -->
<meta http-equiv="yandex-verification" content="0a912de5d00862a2" />

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

Мета-тег Google Site Verification

Этот мета-тег предлагается разместить на главной странице сайта для подтверждения прав собственности на него при добавлении сайта в сервис Google Search Console:

Мета-тег Google Site Verification

<!-- пример мета-тега Google Site Verification -->
<meta http-equiv="google-site-verification" content="rE5RhpY06-y-BkEnUxCdfvtaMfSMT7Jd7q-a9S88_xI" />

После добавления мета-тега Google Site Verification на главную страницу сайта и нажатия кнопки Подтвердить права на сайт будут подтверждены и сайт будет добавлен в сервис Search Console. После этого мета-тег Google Site Verification можно удалить, но лучше этого не делать, т. к. через некоторое время робот-верификатор Google вновь проверит наличие мета-тега на сайте и доступ к сайту в Search Console будет запрещён до очередного подтверждения прав на него.

Мета-теги: что это такое — SEO Википедия

Четкой стандартизации функций мета тегов нет. Выделяют следующие направления использования:

для идентификации авторства страницы, ее адреса и частоты обновлений;
для создания заголовков для гипертекстовых документов и индексации контента поисковыми системами;
для отображения web-страниц.

Существует 2 группы мета тегов:

NAME
HTTP-EQUIV.

NAME

Мета теги группы NAME отвечают за текстовую информацию о web-странице, ее авторе.
Author и Copyright. Обычно используются раздельно. Идентифицируют автора и принадлежность документа. Для раскрутки сайтов организаций предназначен тег Copyright. Атрибут lahg служит для определения языка документов.
Description. Кратко описывает страницу, используется поисковиками для индексации сайта и создания сниппета.
Document-state. С помощью свойств Static и Dynamic этого тега задается порядок индексации конкретной страницы (единоразовый или регулярный).
Generator. Предназначен для генераторов гипертекста.
Keywords. Используется поисковыми роботами для определения релевантности контента.
Resource-type. Описывает состояние или свойство страницы. Предназначен для крупных порталов, содержащих разные типы документов. Тег может иметь значения: build, creation, document, rating, site-languages, operator, creation, formatter и др.
Revisit. Служит для управления частотой индексации конкретного документа.
Robots. Используется для разрешения или запрещения индексации содержимого страниц. Возможны значения тега index, noindex, follow, nofollow, all и none.
Subject. Применяется для определения тематики документа.
Url. Перенаправляет поискового робота по указанной ссылке. Служит для отмены индексации страниц и зеркала сайта.

HTTP-EQUIV

Мета-теги группы HTTP-EQUIV выполняют ту же функцию, что и гипертекстовые заголовки для продвижения сайта, управляют действиями браузеров.
Content-Language. Определяет язык документа.
Content-Script-Type. Предназначен для указания языков программирования сценариев.
Content-Style-Type. Определяет язык таблицы стилей. Значение по умолчанию – text/css.
Content-Type. Тип и кодировка документа.
Expires. Используется для управления кэшированием.
PICS-Label. Показывает уровень доступности ресурса.
Pragma. Контролирует кэширование генерируемых скриптом страниц.
Refresh. Определяет задержку перед обновлением страницы браузером.
Set-Cookie. Используется для настройки куков.
Window-target. Определяет окно загружаемой страницы.
Imagetoolbar. Используется для отключения панели управления изображениями (при выводе баннеров, карты изображения, фона картинки т. д.).

Другие термины на букву «М»

Маркетинговая стратегияМаркетинговый аудитМассфолловингМедийная рекламаМикроданныеМикроформатыМисспелМобильный трафикМодераторМордоворот

Все термины SEO-Википедии

Теги термина

Текстовая оптимизацияПродвижение сайтов

Какие услуги тебе подходят

Продвижение сайтов в Москве

Технический SEO-аудит сайта

SEO-оптимизация сайта

Оптимизация сайта под Google

Продвижение сайта в Яндексе

Продвижение интернет-магазина

SEO-продвижение лендинга в поисковых системах

Продвижение медицинских сайтов

Продвижение молодого сайта

Продвижение сайтов под ключ

SEO-продвижение с гарантией

Продвижение по ключевым словам

Продвижение сайта в ТОП 10 Яндекса и Google

Продвижение туристических сайтов

Продвижение сайтов в ТОП 3 Яндекса и Google

Оптимизация сайта под Яндекс

Раскрутка сайтов за рубежом

Продвижение сайта в Google

Продвижение сайта по позициям

Продвижение сайта по трафику

Оптимизация сайта в мобильной выдаче

SEO аудит

Поисковый аудит сайта

Заказать продвижение сайта

Продвижение сайтов в Москве: проверенные решения от профессионалов

Продвижение стоматологической клиники

Продвижение сайтов медицинских клиник

Продвижение салона красоты

Продвижение автомобильных сайтов

Продвижение магазина автозапчастей

Продвижение и раскрутка автосервиса

Продвижение отелей и гостиниц

SEO-продвижение сайта в Новосибирске

SEO-продвижение сайта в Екатеринбурге

SEO-продвижение сайта в Самаре

SEO-продвижение сайта в Омске

SEO-продвижение сайта в Нижнем Новгороде

SEO-продвижение сайта в Казани

SEO-продвижение сайта в Челябинске

SEO-продвижение сайта в Красноярске

Поисковое продвижение сайтов в Перми: эффективно, профессионально, прозрачно

Поисковое продвижение сайтов в Ростове-на-Дону

Поисковое продвижение сайтов в Уфе

SEO-продвижение сайта в Воронеже

SEO-продвижение сайта в Волгограде

SEO-продвижение сайта в Краснодаре

Продвижение интернет-магазина бытовой техники

Продвижение интернет-магазина одежды

Продвижение интернет-магазина зоотоваров

Продвижение интернет-магазина книг

Продвижение интернет-магазина мебели

Продвижение интернет-магазина обуви

Продвижение интернет-магазина сантехники

Продвижение интернет-магазина спортивных товаров

Продвижение интернет-магазина стройматериалов

Продвижение интернет-магазина часов

Маркетинговый аудит сайта

Продвижение автосалона

Продвижение банковских услуг в интернете

Поисковое продвижение сайтов в Тольятти

Что такое тег заголовка и как оптимизировать теги заголовка для SEO

Что такое тег заголовка?

Тег title — это фрагмент HTML-кода, указывающий заголовок веб-страницы, который отображается в результатах поиска, сообщениях в социальных сетях и на вкладках браузера.

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

Теги заголовков отображаются как ссылки на странице результатов поисковой системы (SERP), например:

Как правило, длина тегов заголовков составляет от 50 до 60 символов. Таким образом, слова не будут обрезаны в поисковой выдаче на ПК или мобильных устройствах.

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

Пример HTML-кода тега заголовка

Вот как выглядит HTML-код тега заголовка:

Это моя заголовок

HTML-код страницы, например:

Однако большинство систем управления контентом, таких как WordPress или Squarespace, автоматически устанавливают тег заголовка при вводе заголовка на новой странице.

Почему так важны теги заголовков?

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

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

Теги заголовков появляются в результатах поиска

Хорошие заголовки улучшают взаимодействие с пользователем и побуждают к большему количеству кликов. Из-за этого заголовок вашей страницы (и мета-описание) должен действовать как заголовок и побуждать пользователей нажимать на ваш результат.

Теги заголовков появляются на вкладках браузера

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

Вот как выглядят эти вкладки:

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

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

См. заголовок страницы в нижней части изображения ниже:

Узнайте больше о тегах заголовков и других факторах SEO на странице в нашем подробном руководстве.

3 Лучшие практики SEO для написания тегов заголовков

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

Вот несколько рекомендаций, которым следует следовать при написании тегов заголовков:

1. Будьте краткими

Хотя Google не будет наказывать вас за длинный заголовок, он может сократить или переписать его. И его версия названия не всегда будет иметь смысл.

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

В приведенном ниже примере тег заголовка содержит слишком много символов. Google отображает это как «Как улучшить свой рейтинг в Google (без получения…»), что оставляет поисковиков в зависании:

Вот несколько примеров более коротких заголовков страниц, которые не обрезаются:

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

Чтобы заголовки были краткими:

Старайтесь не печатать заглавия большими буквами. Прописные буквы занимают дополнительное место и могут привести к обрезанию заголовка.
Удалите название вашей торговой марки, если в этом нет необходимости
Используйте символы для экономии места (например, «&» вместо «и»)

2. Напишите уникальные заголовки

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

Представьте, что вы управляете веб-сайтом электронной коммерции с одинаковым общим заголовком для каждой отдельной страницы, например «Мебельный магазин и домашний декор»:

соответствовать их поиску (даже если это так). В конце концов, слово «кофейные столики» нигде не фигурирует в названии.

Эта конкретная страница посвящена кофейным столикам. Таким образом, включение этого ключевого слова делает заголовок страницы более интуитивно понятным для читателя и поисковой системы. Вот так:

3. Выберите одно основное ключевое слово

Лучше всего включить только одно целевое ключевое слово в тег заголовка данной страницы.

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

Например, заголовок этой страницы состоит из трех разных ключевых слов: «утяжеленные одеяла», «одеяла» и «недорогие утяжеленные одеяла» 9. 0005

Одна страница, вероятно, не будет хорошо ранжироваться по всем трем этим ключевым словам (и алгоритм Google достаточно продвинут, чтобы понимать семантику и вариации ключевых слов).

Кроме того, это похоже на спам. Таким образом, люди не захотят нажимать на него.

Более простой и естественный заголовок, подобный этому, будет работать лучше:

Совет профессионала : Вы можете использовать SEO-проверку Semrush на странице, чтобы найти SEO-проблемы на странице, включая наполнение ключевыми словами в теге заголовка.

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

Распространенные ошибки при написании тегов заголовков

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

К сожалению, нет гарантии, что версия Google будет работать лучше.

И хотя изменения Google не обязательно повлияют на ранжирование, они могут привести к изменению рейтинга кликов (CTR) вашей страницы.

Некоторые из наиболее распространенных ошибок, которые вы можете допустить при написании тегов заголовков, включают:

Отсутствует элемент

</h4><p> Это довольно просто. Если вы не укажете тег заголовка в HTML-коде, у вас нет заголовка. В результатах поиска Google придумает название для вашего сайта на основе содержания вашей страницы.</p><p> Чтобы быстро найти отсутствующие теги заголовков, используйте инструмент Site Audit для запуска аудита.</p><p> Затем перейдите на вкладку «Проблемы» вашего отчета и отфильтруйте ошибки «заголовок» в строке поиска.</p><p> Нажмите на ошибку «X страниц не имеют тегов заголовков», чтобы получить полный список страниц с отсутствующими тегами заголовков.</p><h4><span class="ez-toc-section" id="i-22"> Повторяющийся или шаблонный текст </span></h4><p> Теги заголовков должны информировать пользователя о том, на какую страницу он нажимает.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Поэтому, если вы владеете пространством для проведения мероприятий и включаете такие слова, как «билеты», «места» и «даты тура» в каждый тег заголовка на своем сайте, Google, вероятно, изменит ваш заголовок.</p><p> ❌ <strong> Плохой пример </strong> : Домашняя страница United Center</p><p> ✅ <strong> Как исправить </strong> : Билеты и события | United Center — Chicago, IL</p><p> Исправленный пример включает ключевые слова, релевантные только этой странице. Вместо того, чтобы включать стандартные термины, он включает то, о чем страница (билеты и мероприятия), а также название места и город.</p><p> Если вы уже проводили аудит сайта на наличие отсутствующих заголовков, вы можете найти список страниц с повторяющимися заголовками в том же отчете.</p><p> Нажмите на « <strong> X выпусков с повторяющимися тегами заголовков </strong>», чтобы получить список страниц с указанной ошибкой.</p><h4><span class="ez-toc-section" id="i-23"> Наполнение ключевыми словами </span></h4><p> Нет необходимости включать одни и те же или похожие ключевые слова несколько раз в надежде на ранжирование.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Думайте как пользователь, когда пишете заголовки. Сосредоточьтесь на точном и лаконичном описании вашей страницы максимум одним или двумя ключевыми словами.</p><p> ❌ <strong> Плохой пример </strong> : Утяжеленные одеяла, Охлаждающие одеяла, Одеяла от беспокойства, Одеяла от стресса</p><p> ✅ <strong> Как это исправить </strong> : Утяжеленные одеяла для снятия стресса и беспокойства <br/> </p><p> Исправленный заголовок лучше, потому что он не повторяется. «Плохой пример» повторяет несколько связанных ключевых слов, что выглядит как спам и не информирует пользователя о содержании вашей страницы.</p><h4><span class="ez-toc-section" id="i-24"> Длинные теги заголовков </span></h4><p> Google сокращает или переписывает 99,9% тегов заголовков, длина которых превышает 70 символов.</p><p> Опять же, лучше всего, чтобы теги заголовков содержали от 50 до 60 символов. Таким образом, они с меньшей вероятностью будут отключены на мобильном или настольном компьютере.</p><p> ❌ <strong> Плохой пример </strong> : Сэкономьте сотни на креслах и диванах Stressless® с нашим предложением мгновенной скидки – Мебель Ginger Jar</p><p> ✅ <strong> Как это исправить </strong> : Сэкономьте на креслах и диванах Stressless® | Ginger Jar Furniture</p><p> Включайте в тег title только самую важную информацию.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Все остальное (например, мгновенные скидки, сохранение сотен и т. д.) можно добавить в ваше метаописание.</p><h4><span class="ez-toc-section" id="i-25"> Релевантность </span></h4><p> Google делает все возможное, чтобы предоставить пользователям результаты, соответствующие их намерениям. Поэтому, если вы выберете что-то расплывчатое, например «Домашняя страница», для заголовка вашей домашней страницы, Google, вероятно, изменит его на что-то более конкретное.</p><p> ❌ <strong> Плохой пример </strong> : Блог о путешествиях</p><p> ✅ <strong> Как это исправить </strong> : Путешествие в одиночку как женщина: Моя жизнь как блогера о путешествиях</p><p> Блог о путешествиях с простым названием «Блог о путешествиях» не сообщает алгоритму Google или читатели, о чем ваш сайт. Добавление чего-то уникального о вашем сайте в тег заголовка побудит пользователей кликнуть.</p><p> Например, добавление «путешествовать в одиночку как женщина» расскажет читателям больше о том, кто вы есть. Это будет соответствовать цели поиска женщины, которая хочет узнать о путешествиях в одиночку, но не будет соответствовать цели, скажем, семьи из четырех человек.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><h3><span class="ez-toc-section" id="i-26"> Проверьте теги заголовков с помощью аудита сайта </span></h3><p> Написание оптимизированных тегов заголовков — это отличная возможность точно сообщить Google, о чем ваша страница.</p><p> Предоставленный вами контекст помогает Google находить и ранжировать страницы, а также предоставляет читателям ключевую информацию, побуждающую к большему количеству кликов.</p><p> Продолжайте экспериментировать с тегами заголовков, чтобы повысить удобство работы пользователей и поисковых систем и предотвратить ошибки, которые могут привести к неточным заголовкам.</p><p> И обязательно полагайтесь на Аудит Сайта для выявления повторяющихся и отсутствующих заголовков.</p><h2><span class="ez-toc-section" id="_HTML-_SEO-2"> Руководство по HTML-тегам SEO </span></h2><p> Создание присутствия в Интернете — это гораздо больше, чем просто загрузка контента на веб-страницу. Быть замеченным в результатах поиска — лучший способ развивать бизнес и бренд, а создание хорошего контента — ключ к ранжированию по нескольким поисковым запросам. Однако сканеры поисковых систем используют теги HTML для чтения и понимания индексируемых веб-страниц.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Это означает, что важен не только ваш контент, но и то, как ваш контент читается как на внешнем, так и на внутреннем интерфейсе вашего сайта.</p><p> HTML лучше всего рассматривать как родной язык поисковых роботов Google, и в этом руководстве объясняется, как использовать HTML-теги SEO, чтобы лучше сообщать Google о релевантности вашего контента для поисковых систем.</p><h3><span class="ez-toc-section" id="_HTML-3"> Что такое теги HTML? </span></h3><p> Теги HTML являются основой любого веб-сайта. Это небольшие фрагменты кода, встроенные в серверную часть веб-сайта, и для разных компонентов на веб-странице используются разные HTML-коды.</p><p> Тег HTML характеризуется <> и </> вокруг слова или фразы.</p><h3><span class="ez-toc-section" id="_HTML_SEO"> Почему теги HTML так важны для SEO? </span></h3><p> Чтобы понять, почему теги HTML важны для целей SEO, важно понять основы работы поисковой системы.</p><p> Проще говоря, цель поисковой системы — не только давать информативные ответы своим пользователям, но и находить актуальный и своевременный контент на основе запроса пользователя.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Существует более 200 факторов ранжирования, которые влияют на то, как поисковая система продвигает релевантные результаты на своих страницах результатов поисковой системы (SERP). Фактически, Google регулярно меняет свой алгоритм, чтобы улучшить взаимодействие с пользователем и качество результатов поиска. К сожалению, Google держит эти обновления алгоритмов под замком, но лучшие практики SEO HTML — это надежный метод передачи информации о каждой странице, чтобы поисковые системы могли соответствующим образом читать ваш контент.</p><p> Одним из невероятно важных передовых методов поисковой оптимизации является инвестирование времени и энергии в изучение того, как именно внедрять правильные теги HTML в серверную часть вашего веб-сайта.</p><p> HTML-процесс выглядит следующим образом:</p><ol><li> Владелец веб-сайта создает содержимое страницы.</li><li> Разработчик веб-сайта внедряет HTML-код в серверную часть веб-сайта.</li><li> Веб-страница опубликована.</li><li> Боты поисковых систем заходят на страницу сайта и читают HTML-код.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li><li> Боты поисковых систем сохраняют и индексируют эту информацию о веб-странице.</li><li> Когда пользователь выполняет поиск по ключевой фразе, релевантной тому, что HTML-код сообщает поисковым роботам, веб-страница имеет больше шансов появиться в поисковой выдаче.</li></ol><p> Не все элементы HTML создаются одинаково. Есть некоторые, которые более важны для отображения в результатах поиска, и вы создадите их в зависимости от вашего целевого ключевого слова и конкретной темы данной страницы.</p><h3><span class="ez-toc-section" id="_HTML-_Google"> Наиболее важные HTML-теги для ранжирования в Google </span></h3><p> Здесь мы объясняем наиболее важные HTML-теги, которые направляют ваши усилия в поисковой оптимизации, а также рекомендации по тому, как это сделать для каждого из них.</p><h4><span class="ez-toc-section" id="i-27"> Заголовки страниц или «теги заголовков» </span></h4><p> Спросите любого эксперта по SEO, и он скажет, что заголовок вашей страницы или теги заголовков, возможно, являются наиболее важным фрагментом HTML для включения на ваш сайт. Потому что, в конце концов, если у вас нет заголовка, как Google или пользователи узнают, о чем ваша страница? HTML специально говорит Google «эй, вот заголовок этой страницы», и после индексации заголовок становится кликабельным заголовком в поисковой выдаче.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> HTML-код для тега заголовка: <strong><title>здесь ваш заголовок

3 способа оптимизации заголовков страниц

Технически Google может выбрать любой фрагмент текста в качестве заголовка страницы в поисковой выдаче. . Но чтобы убедиться, что Google индексирует правильный SEO-заголовок, есть определенные рекомендации, которым вы должны следовать для всех своих тегов заголовков.

Оптимизация ключевого слова

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

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

Будьте краткими

Google покажет только первые 50-60 символов заголовков ваших SEO-страниц. Хороший тег title должен быть коротким и привлекательным, предотвращая обрезание вашего заголовка и, возможно, вводя в заблуждение потенциальных клиентов. У вас будет больше места в тегах заголовков и в общем контенте для расширения.

Сформулируйте правильные ожидания

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

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

Мета-описания

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

Там, где заголовок страницы привлекает внимание пользователя, метаописание добавляет больше контекстной и справочной информации.

Мета-описание находится в поисковой выдаче непосредственно под интерактивным URL-адресом страницы. Внедрение метаописания предоставит Google нужную им информацию, без необходимости Google брать фрагменты текста с той же страницы и создавать их самостоятельно. Когда это происходит, ваш пользователь может получить не самое точное описание, и это может привести к тому, что он потеряет интерес к вашему бренду.

Код HTML для тега мета-описания:

Мета-описание и кликабельность

Данные показывают, что хорошо составленное мета-описание, несомненно, побуждает пользователей переходить на вашу страницу. По данным Backlinko, страницы веб-сайтов с метаописаниями имели CTR примерно на 6% выше, чем страницы без них.

Теперь, если вы думаете, что это не такой уж большой процент, подумайте об этом так. Если ваша страница появляется в поиске Google 500 раз в месяц, это означает, что на вашу страницу переходит на 30 клиентов больше, чем если бы у вас не было простого метаописания! Добавление метаописания — это простой способ привлечь новых клиентов.

3 способа оптимизировать мета-описания для SEO

Даже если у вас есть мета-описание, существует небольшой риск того, что Google выберет другое предложение или два с этой страницы, которые они сочтут более конкретными и релевантными. Но чтобы предотвратить это, вы можете следовать некоторым передовым методам SEO.

Используйте то же ключевое слово фокуса, что и в заголовке страницы

Вы действительно хотите донести до пауков поисковых систем и своего потребителя, что ваша страница посвящена определенному ключевому слову или фразе. Там, где заголовки страниц SEO используются для ранжирования, метаописания больше ориентированы на пользователя. У Google есть ожидаемый CTR в качестве фактора ранжирования, поэтому, имея это в виду, крайне важно, чтобы важные ключевые слова были согласованными во всех включенных HTML-тегах SEO, теге заголовка и мета-описании.

Помните о длине

Как и в случае с SEO-заголовками, вам нужно следить за длиной вашего метаописания. На страницах результатов поисковой системы доступно только ограниченное пространство, поэтому Google приходится обрезать метаописания длиной около 150–160 символов. Это не означает, что вы должны идеально сопоставлять свое описание с количеством символов, но сделайте все возможное, чтобы описание было легко понять.

Используйте призыв к действию

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

Заголовки или «Теги заголовков»

Точно так же, как и при выборе ключевых фраз, которые вы хотите использовать на своей странице, вы должны разработать стратегию и план того, как вы структурируете эту информацию в подзаголовках. Для максимальной удобочитаемости как для пользователей, так и для сканеров поисковых систем вы не можете просто разместить на странице массу информации. Должна быть структура, и именно здесь вступают в действие заголовки (теги заголовков) или теги от h3 до h6.

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

Вот почему заголовки так важны; они являются основой вашей целевой страницы или поста в блоге.

Тег заголовка выглядит следующим образом:

здесь ваш заголовок

Советы по использованию ключевых слов, синонимов или терминов LSI в заголовках

Так как же использовать ключевые фразы в нескольких заголовках без наполнения ключевыми словами или звучит как спам? Ответ приходит с ключевыми словами LSI.

LSI означает скрытое семантическое индексирование, которое является синонимом, относящимся к основному ключевому слову, на которое вы пытаетесь ориентироваться. Использование ключевых слов LSI в вашем контенте облегчает поисковым системам и пользователям общее представление о том, о чем ваш контент.

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

Точно так же, как ваши заголовки структурируют страницу в целом, термины LSI дают больше контекста содержанию. Учитывая, что Google просматривает всю вашу страницу, прежде чем индексировать и классифицировать ее, использование ключевых слов и синонимов LSI в ваших HTML-тегах SEO будет работать, чтобы донести смысл и смысл вашего контента.

Вы можете использовать такие инструменты, как оптимизатор целевой страницы LinkGraph, для определения связанных ключевых фраз и ключевых слов для ваших тегов заголовков. Просто введите свои ключевые слова в инструмент, и наше программное обеспечение предоставит список ключевых слов, которые имеют сильное актуальное значение для ключевой фразы. Выпадающее меню предоставит вам множество терминов на выбор.

3 способа оптимизации заголовков для SEO

Думать о том, как работает ранжирование в поиске, крайне важно для создания конвертируемых заголовков. Вот три совета о том, как оптимизировать теги заголовков для целей SEO.

Не используйте более одного h2

Можно использовать теги заголовков нескольких размеров: h2, h3, h4, h5, H5 и H6. Чем выше число, тем меньше будет текст и тем менее важно использовать ключевую фразу. Использование более одного тега h2 может сбить с толку поисковые системы, так как они воспринимают h2 как заголовок страницы.

Небольшое примечание: теги h2 не следует путать с тегами title, как упоминалось выше. Теги заголовков отображаются на страницах результатов поисковой системы, тогда как теги h2 отображаются только на самой веб-странице.

Оставайтесь последовательными

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

Пишите заголовки так, как если бы они были запросами

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

Другие важные HTML-теги для SEO

Есть и другие HTML-теги для SEO, которые также могут служить сигналом ранжирования. Вот другие важные элементы вашего HTML-кода, на которые следует обратить внимание.

Альтернативные теги

Альтернативный тег (атрибут alt) — это, по сути, тег изображения или ваше собственное описание или объяснение того, что изображения на вашем веб-сайте содержат или о чем они. Когда вы думаете с точки зрения SEO, вы знаете, что поисковые роботы не могут видеть ваши изображения, поэтому небольшой замещающий текст — это единственный способ, которым они поймут релевантность этого изображения ключевым фразам, которые пользователи вводят в свою строку поиска Google.

Цель альтернативного текста — дать Google понять, о чем изображение, а также помочь пользователю в случае, если у него проблемы со зрением или изображение не загружается. Однако в теге alt есть нечто большее, чем фактор доступности, поскольку теги alt помогают роботам поисковых систем читать сами изображения и индексировать их. Вот почему вы иногда видите изображения от нескольких брендов, когда нажимаете вкладку «поиск изображений» во время поиска в Google.

Итак, как правило, обязательно используйте тег alt для всего визуального на вашем сайте.

Тег роботов

Пользователь веб-сайта может настроить параметры того, как роботы поисковых систем сканируют его веб-сайт с помощью тегов роботов. Эти теги указывают, какие страницы можно сканировать, а какие следует игнорировать с точки зрения индексации. Атрибут nofollow не позволяет поисковым роботам Google переходить по внутренним ссылкам на другие страницы вашего сайта. Они полезны, если у вас есть сезонные страницы, которые могут быть не всегда актуальны, или если вы в настоящее время работаете над обновлением веб-страницы.

Тег robots выглядит следующим образом:

Canonical Tags

Google очень строго относится к уникальному контенту и накажет вас, если у вас будет дубликат контент или тонкий контент на вашей странице. Канонический тег гарантирует, что этого не произойдет.

Канонический тег — это тег, который вы можете поместить на страницу и обозначить ее как «мастер». Несколько страниц, таких как страницы продуктов, могут привести к уникальным URL-адресам, которые могут запутать поисковые системы, какую страницу показывать в поисковой выдаче. У вас может быть несколько страниц по разным причинам, но для Google вам нужно использовать исходный код, чтобы сообщить им, какие страницы сканировать и ранжировать на страницах результатов поиска.

Добавление канонического тега на страницу сообщит поисковой системе игнорировать любой другой дублированный контент на веб-сайте, что предотвратит попадание вас в рейтинги.

SEO-преимущества HTML-тегов

Как упоминалось ранее, оптимизация исходного кода вашего веб-сайта дает множество преимуществ для поисковой оптимизации. К ним относятся:

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

Хотя поначалу HTML-теги для SEO могут показаться веб-мастерам слишком сложными, будьте уверены, после небольшой практики их станет намного проще внедрять. Вы можете добавить такие инструменты, как Yoast SEO premium, на свой сайт WordPress, чтобы убедиться, что вы правильно реализуете свои метаданные. В свою очередь, ваш веб-сайт будет иметь более высокий рейтинг по ключевым словам, увеличивая свою долю рынка с каждым новым опубликованным вами постом.

Наши специалисты LinkGraph помогут вашему бизнесу выделиться в Интернете. От построения ссылок до поисковой оптимизации на странице и исследования ключевых фраз — мы можем учесть все важные факторы, необходимые для повышения рейтинга вашего веб-сайта, причем в кратчайшие сроки. Свяжитесь с нами сегодня для получения дополнительной информации о том, как мы можем помочь вашему бренду процветать в Интернете.

Метатеги SEO: описания, заголовки, заголовки

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

Перейти к разделу

Что такое метатеги?
Встречайте мета-заголовок (также известный как тег заголовка, заголовок страницы)
Метаописания
Теги заголовков
Мета-ключевые слова
Как добавлять и редактировать метатеги
Как добавить метатеги в WordPress
Часто задаваемые вопросы
Почему важны метатеги?

Что такое метатеги?

Метатеги — это элементы, которые предоставляют важную информацию о вашей странице для поисковых систем и расположены в разделе заголовка HTML-кода. Метатеги информируют поисковые системы о том, как отображать вашу страницу для пользователей и как она будет отображаться в результатах поиска.

Метаданные могут относиться к разным вещам в разных областях, но в отношении SEO они имеют очень специфический набор параметров. Основными из них являются мета-заголовки, мета-описания и заголовки. Два важных исключения — это то, что мы будем называть общими мета-тегами и мета-ключевыми словами.

Общие метатеги являются частью исходного кода данной страницы и не отображаются на самой странице, в отличие от метаданных, таких как заголовки и описания (которые весьма уникальны тем, что появляются в определенных областях страницы – об этом ниже). Общие метатеги, такие как канонические теги и теги роботов, не видны посетителям.

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

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

Познакомьтесь с мета-заголовком (он же тег заголовка, заголовок страницы)

Что такое мета-заголовок?

Пользователи, выполняющие поиск в Google или любой другой поисковой системе, видят мета-заголовок как первый элемент любого веб-сайта в поисковой выдаче (странице результатов поисковой системы). Для результатов обычного поиска мета-заголовок отображается синим цветом, например:

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

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

Идеальная длина мета-заголовка — от 50 до 60 символов. Нет ничего плохого в том, чтобы превысить длину заголовка, но Google обрезает некоторые символы и отображает многоточие.

Еще один вариант оптимизации для Google, когда ваш заголовок слишком длинный или нерелевантный, — это заменить его данными из самого контента, такими как заголовки h2 или h3.

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

Контрольный список лучших практик мета-заголовков для SEO

1. Грамматика

В прошлом ключевые слова были первыми в этом списке. Но с постоянно развивающимся интеллектуальным алгоритмом Google пользователям не нужно запихивать ключевые слова им в глотку. Скорее, им нужна полезная и актуальная информация, представленная более тонкими способами.
Сохраняйте заголовок грамматически правильным. Google фокусируется на намерениях пользователя и UX, а не на наполнении ключевыми словами.
Ваш сайт будет хорошо ранжироваться, если вы передаете четкое сообщение

2. Ключевые слова

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

3. Мета-заголовок и пиксель

Длина мета-заголовка должна составлять примерно от 50 до 60 символов
Имейте в виду, что это число является приблизительным; причина в том, что Google обрезает мета-заголовки, длина которых превышает 600 пикселей. Это означает, что визуальная длина мета-заголовка в результатах поиска важнее фактического количества символов. Например, узкие цифры и буквы занимают меньше места, чем широкие, т.е. «1», «t» и «I» против «7», «M» и «W».
Бывший сайт SEOMofo когда-то провел очень интересное тематическое исследование по этому поводу, которое до сих пор актуально и показало очень интересный результат: мета-заголовок из 107 символов, полностью отображающийся в поисковой выдаче!

4. Без рекламы

Сделайте это НАТУРАЛЬНЫМ – избегайте чрезмерно рекламного стиля для информационных страниц, ориентированных на органический трафик; в противном случае Google сочтет это спамом.
Помните о намерениях ваших посетителей, и ваш сайт будет работать лучше. Не каждое ключевое слово стоит этой недвижимости. Если пользователи не найдут то, что ищут на вашем сайте, они уйдут.

5. Уникальность

Убедитесь, что каждая страница имеет свой уникальный мета-заголовок. Как и дублированный контент на странице, Google не любит повторяющиеся заголовки (или описания, если на то пошло), и это отразится на производительности вашего сайта.

6. Добавляйте номера и обновляйте их

Исследования показали, что статьи с номерами в заголовках лучше с точки зрения SEO, как в рейтинге, так и в CTR.
Числа следует использовать не только для списков, но и для дат. Предполагая, что ваш контент действительно актуален, вы можете добавить дату его обновления в свой заголовок.

7. Информация о вкладке

Мета-заголовок появляется в открытых вкладках при просмотре страницы. Это служит информативным элементом, помогающим UX и навигации пользователей.

Для достижения наилучших результатов используйте до 160 символов (920 пикселей) для настольных компьютеров и 120 символов (680 пикселей) для мобильных устройств.
В идеале покажите как можно больше релевантной информации. Это хороший пример мета-заголовка, появляющегося на вкладке.

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

Метаописания

Рассматривайте метаописание как ответ TL;DR на вопрос пользователя.

Мета-описание — это краткий фрагмент, который кратко описывает содержание страницы. Этот текст используется для предварительного просмотра в поисковой выдаче. Он находится чуть ниже мета-заголовка в результатах поиска и не может быть виден посетителям после входа на сайт. В прошлом казалось, что он обладает большей силой с точки зрения рейтинга страницы, как и мета-заголовок, но в настоящее время, после множества обновлений и изменений, его цель изменилась.

Его основная цель — резюмировать содержание страницы (тизер или что-то вроде рекламного ролика) и сделать это в заманчивой форме.

Вот почему так важно метаописание. Это один из основных факторов, влияющих на рейтинг кликов страницы.

Теги заголовков

Теги заголовков используются для сообщения структуры и логики веб-страницы как читателям, так и поисковым системам. Их обычно не называют «мета-тегами», но заголовки (обычно называемые просто «заголовками») почти так же важны, как мета-заголовки и описания.

Теги заголовков, закодированные цифрами, варьируются по размеру и важности, начиная с 1 и далее. Тег

— самый большой и важный заголовок,

— второй и так далее.

В отличие от заголовков и описаний, заголовки видны на странице, когда пользователь заходит на сайт, но не в результатах поиска.

На самом деле, они достаточно важны, чтобы быть основными заголовками на странице — настолько, что оптимальная практика SEO — убедиться, что ваша страница имеет заголовок h2 (ваш основной заголовок) как можно выше на странице. возможно, с несколькими последующими заголовками h3.

Передовой опыт использования тегов заголовков

Хотя на странице существует иерархия, тег

уникален тем, что его можно использовать только один раз на странице, чаще всего в качестве заголовка.

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

В большинстве случаев можно использовать заголовок h2, отличный от вашего мета-заголовка. Это может помочь вам создать лучший пользовательский опыт.

Мета-ключевые слова

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

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

До сих пор ведутся дискуссии по поводу этого тега и его влияния на страницы.

Мы рекомендуем полностью удалить мета-ключевые слова, где бы они ни появлялись. Мы считаем, что в глазах Google они могут рассматриваться как спам-фактор (мы знаем, что это происходит в Bing).

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

Как добавлять и редактировать метатеги

Вы можете добавлять или редактировать метатеги своей веб-страницы, редактируя раздел страницы.

Это можно сделать напрямую, отредактировав HTML-код страницы или, в зависимости от вашей CMS, напрямую через ее интерфейс. Кроме того, это можно сделать с помощью дополнительных модулей или плагинов. Вот как должна выглядеть разметка:

Как добавить метатеги в WordPress

Здесь также применим общий подход к редактированию раздела страницы, или вы можете сделать это с помощью плагина . Вот как это сделать с помощью популярного SEO-плагина Yoast.

В WordPress выберите страницу, нажмите «Изменить» и прокрутите вниз до интерфейса Yoast SEO:

Часто задаваемые вопросы

Как проверить мета-заголовок и описание страницы?

Щелкните правой кнопкой мыши на любой странице (или используйте Ctrl + U в Chrome), чтобы увидеть исходный код страницы, где вы найдете все метатеги и многое другое. Другой способ — использовать любое популярное SEO-расширение, например, META SEO spector.

Как написать метазаголовок и описание?

Сделайте его кратким и включите ключевое слово focus, чтобы оно было четко видно пользователям. Описание действует как органическое объявление в поисковой выдаче, поэтому добавьте CTA, чтобы повысить рейтинг кликов. Убедитесь, что заголовок и описание соответствуют вашему контенту и уникальны.

Какой длины должны быть мета-заголовок и описание?

Длина мета-заголовка должна быть около 60 символов, а описания — около 160 символов. Превышение этих цифр может означать, что Google сокращает заголовок.

Почему Google не отображает мое мета-описание?

Если поисковая система не отображает ваш мета-заголовок или описание, убедитесь, что:

Заголовок и мета-описание соответствуют поисковому запросу пользователя.
Заголовок и метаописание не слишком короткие или длинные.
Заголовок и мета-описание точно отражают содержание вашей страницы.

Почему важны метатеги?

Метатеги важны для вашего веб-сайта по нескольким основным причинам:

Они помогают пользователям находить то, что они ищут в поисковых системах
Они являются первым элементом, определяющим, посетит ли пользователь ваш сайт или нет
Повышают рейтинг страниц по выбранным темам, поисковым запросам и ключевым словам

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

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

Обязательные HTML-теги для SEO-специалистов и специалистов по цифровому маркетингу

Подпишитесь на наши информационные бюллетени и дайджесты, чтобы получать новости, статьи экспертов и советы по SEO

Введите правильный адрес электронной почты

Спасибо за подписку!

Чтение: 58 мин.

27 апреля 2021 г.

Теги HTML

Код веб-сайта

Мы привыкли к тому, что большую часть работы, связанной с HTML, выполняют кодеры, программисты и разработчики программного обеспечения. Но это никоим образом не означает, что SEO-специалисты и специалисты по цифровому маркетингу не должны хорошо разбираться в основных HTML-тегах. Суть в том, что теги необходимо знать, если вы хотите правильно разработать техническое задание и понять, как теги влияют на SEO.

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

Разбираемся с основами HTML

Язык гипертекстовой разметки (HTML) — это стандартный язык разметки документов, который используется веб-страницами, чтобы сообщать браузерам, какие элементы он содержит и какие из них необходимо отображать на экране.

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

С точки зрения непрофессионала, если вы посетите любую веб-страницу как человек, вы увидите размеченный текст вместе с разделами, подзаголовками, изображениями и ссылками. Но имейте в виду, что для веб-браузеров и поисковых роботов веб-страницы — это не более чем HTML-код с определенными элементами.

Мы уже упоминали такие термины, как элемент HTML и тег, но есть еще метатеги и атрибуты. Это может очень быстро запутать, если вы не знаете разницы.

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

Структура элемента HTML

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

HTML-элемент — это тип компонента HTML-документа, который состоит из дерева простых узлов HTML, таких как текстовые узлы. Такие элементы позволяют HTML-документу включать определенную семантику и форматирование. Вот из чего состоит HTML-элемент:

В данном случае HTML-элемент — это заголовок, который указывается в коде начальным тегом

и конечным тегом . Поскольку заголовок имеет атрибут align=»left» , он выравнивается по левой стороне страницы.

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

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

Теперь метатег — это тип тега, который предоставляет веб-браузерам и поисковым системам техническую информацию о веб-странице, такую как описание, ключевые слова, кодировка документа, правила индексирования ботов и т. д. Обратите внимание, что все метатеги должны быть помещены внутри тега документа. Интересен тот факт, что в то время как описание и ключевые слова составляют метатеги , заголовок является тегом .

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

Например, ранее в этом посте мы упоминали тег, который добавляет изображения на веб-страницы. Что ж, его атрибут alt отображает альтернативный заголовок изображения, если само изображение не может быть отображено по какой-либо причине.

Чем теги отличаются от атрибутов

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

Вот пример формата элемента HTML, который разбивает элемент на три части:

 Добро пожаловать в мой блог о SEO

В этом примере «

» открывает тег, « Добро пожаловать в мой блог о SEO» — это содержимое тега, а

закрывает тег.

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

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

В этом примере rel= и href= являются атрибутами тега.

Обратите внимание, что существуют пустые элементы, такие как
, которые не имеют содержимого или закрывающих тегов.

Зачем пользователям и поисковым системам нужны теги

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

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

В Справочном центре Google Search Console есть список всех метатегов, поддерживаемых поисковым гигантом. Итак, если вы чувствуете, что хотите углубиться в каждый HTML-тег, обязательно ознакомьтесь с ним.

Теги помогают браузерам читать информацию о странице. Таким образом, тексты, изображения и ссылки могут отображаться именно так, как они указаны в HTML-коде. Вы можете себе представить, если бы пользователям приходилось визуально выуживать содержимое сайта из всего этого HTML-кода?

Теперь, когда мы рассмотрели все основы HTML, давайте перейдем к главному: тегам и атрибутам, полезным для поисковой оптимизации.

3 основных тега HTML

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

Тег

указывает, что страница является веб-страницей

Тег — это самый первый тег, который вы размещаете в коде своей веб-страницы. Что он делает, так это представляет страницу поисковым системам как веб-страницу.

Обратите внимание, что, хотя тег не является HTML-тегом как таковой (поэтому он не имеет никаких атрибутов), он предоставляет браузерам жизненно важную информацию, которая позволяет им узнать, какой тип документа ожидать. найти на странице и как она должна отображаться.

Вот пример используемого кода:

   

<голова>
Название документа

<тело>
Содержание документа

При правильном использовании браузер поймет, что веб-страница создана на основе HTML. В конечном итоге у него не возникнет проблем с обработкой кода и отображением страницы, как задумано.

Тег

содержит метаданные страницы

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

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

Тег может содержать такие элементы HTML, как,,, Я,конечно же,имею в виду текст,изображения и видео,которые вы размещаете на своей веб-странице для всеобщего обозрения.

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

Вот как выглядит HTML-код:

Название документа

Это заголовок

Это абзац.

После запуска кода вы увидите следующее:

В отличие от предыдущего Например, в этом случае мы действительно можем видеть элементы HTML, определенные в теге:

и

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

Теги HTML, полезные в поисковой оптимизации, и их атрибуты

А теперь перейдем к другим тегам HTML, которые могут помочь в поисковой оптимизации.

Как мы уже говорили, теги могут сообщить браузерам и поисковым системам все, что им нужно знать, на понятном им языке, например, как следует обрабатывать страницу, о чем она и какова ее цель.

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

1) Тег

описывает содержимое страницы</h4><p> Будучи одним из самых любимых тегов SEO-специалистов, тег <strong><title> </strong> помогает пользователям и поисковым системам понять, о чем страница.</p><p> Заголовки отображаются в виде кликабельных заголовков в поисковой выдаче. Это очень важно для удобства использования, поисковой оптимизации и распространения в социальных сетях.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Цель этого тега — точно и лаконично описать содержание страницы, чтобы поисковые системы соблазнились посетить страницу, а поисковые системы имели достаточно дополнительной информации о теме страницы.</p><p> Заголовок отображается не только во фрагменте, но и на вкладке браузера, что помогает пользователям сразу понять, какие страницы открыты в браузере. Некоторые страницы добавляют заголовки с целью привлечения внимания пользователей. Например, когда вы переключаетесь на другую вкладку в браузере, текст заголовка может измениться на что-то вроде «<em> Вернитесь, мы по вам скучаем! </em>».</p><p> Заголовок также отображается в качестве анкорного текста при размещении ссылок в социальных сетях, если вы не используете разметку Open Graph. Именно поэтому заголовок должен быть лаконичным, информативным, уникальным и интересным, чтобы привлечь потенциальных читателей.</p><p> Вот как это выглядит на Facebook:</p><p> Длина заголовка должна быть около 60-70 символов, так как слишком длинные заголовки все равно будут обрезаны до 600 пикселей.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> В результате в сниппет попадет неполная информация.</p><p> Хорошо, разобравшись с проблемой длины заголовка, давайте выясним, нужно ли нам использовать целевые ключевые слова в теге заголовка. Несколько лет назад Брайан Дин из Backlinko провел исследование, в котором упомянул, как использование целевого ключевого слова в теге title может оказать положительное влияние на рейтинг веб-сайта. Краткий ответ - да. Целевое ключевое слово может помочь повысить рейтинг, но нет прямой связи между использованием ключевого слова в теге заголовка и повышением рейтинга. Google уже давно научился анализировать семантику веб-страниц, не зацикливаясь только на тегах, как это было раньше.</p><p> Главный вывод заключается в том, что вам <em> нужно </em> использовать ключевые слова, но только с целью помочь поисковым системам и пользователям понять, о чем ваша страница, не более того.</p><p> Вы также можете указать в заголовке другую дополнительную информацию, такую как цена, марка, варианты доставки и т.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> д.</p><p> Вот как выглядит HTML-код:</p><pre> <!DOCTYPE html> <html> <голова> <strong> <title>Название страницы <тело>

Это заголовок

Это абзац.

Когда вы запустите аналогичный код на опубликованной странице, вы увидите это:

Достаточно интересно, поскольку элемент является частью тега<head> файла HTML, он не отображается на сама страница. Кроме того, в одном документе может быть только один тег<title>, который должен быть помещен в контейнер<head>. Тег<title> также поддерживает глобальные атрибуты HTML, но не поддерживает атрибуты событий.</p><h4><span class="ez-toc-section" id="2-5"> 2) Тег </span></h4><meta> предоставляет дополнительную информацию о странице</h4><p> Тег <strong><meta> </strong>, часто называемый метаданными, определяет метаданные HTML-документа, которые не отображаются на странице, но могут обрабатываться поисковыми ботами (для определения ключевых слов) и браузерами (для отображения контента или перезагрузить страницу).<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Он всегда должен быть помещен в элемент<head> страницы и обычно используется для указания набора символов, используемых на странице, описания страницы, ключевых слов, автора документа, а также настроек области просмотра.</p><p> Во-первых, давайте посмотрим на атрибуты, которые может содержать тег<meta>.</p><p> <strong> Атрибут имени </strong></p><p> Одним из первых атрибутов тега<meta>, на котором мы сосредоточимся, является атрибут <strong> имени </strong>. Его основная цель — сообщить ботам, которые посещают страницу, предназначена ли информация на странице для них или нет.</p><p> Например, включив атрибут имени в метатег, например</p><pre> <meta <strong> name="robots" </strong> content="noindex" /> или же <мета <strong> name="googlebot" </strong> content="noindex" /> </pre><p> вы укажете всем ботам и боту Google соответственно, что они должны учитывать директиву "noindex". На самом деле, когда метатег содержит атрибут имени, предназначенный для ботов, его часто называют «метатегом robots».<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> С точки зрения SEO, использование атрибута name в метатеге — отличный способ предотвратить взаимодействие определенных ботов с вашими страницами, а также позволяет вам предоставлять дополнительные данные на странице.</p><p> Но помимо работы только для ботов, атрибут name также можно использовать для:</p><ul><li> указания целевых <em> ключевых слов </em> на странице (хотя сейчас это немного устарело) <br/><meta <strong> name="keywords" </strong> content =”HTML, теги, атрибуты”></li></ul><ul><li> определить описание страницы <em> </em> : <br/> <мета <strong> имя=”описание” </strong> содержание=”Теги и атрибуты HTML, которые необходимо знать”></li></ul><ul></h4> определить автора </em> содержимого страницы: <br/><meta <strong> name="author" </strong> content="John Appleseed"></li></ul><p> Я хочу отметить, что в Интернете есть много мнений о том, необходимо ли включать ключевые слова в метатег. или нет. Конечно, десять лет назад это могло бы помочь вашей рекламной кампании, но не сейчас.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Представители Google неоднократно заявляли, что поисковый гигант не учитывает ключевые слова при ранжировании сайтов. То же самое касается позиции Bing в отношении ключевых слов.</p><p> Кроме того, эксперт по SEO Билл Славски провел опрос, который подтвердил, что мета-ключевые слова ушли в прошлое.</p><p> Но это не все значения атрибута name. Рассмотрим подробнее некоторые другие.</p><p> <strong> Атрибут описания </strong></p><p> Атрибут <strong> description </strong>, часто называемый метаописанием <em> </em> , является еще одним атрибутом, используемым с тегом<meta>.</p><p> Этот атрибут предоставляет текстовое описание содержимого страницы, которое отображается в поисковой выдаче сразу под тегом<title>:</p><p> Вот как выглядит его HTML-код:</p><pre> <meta name="description" content="HTML-теги и атрибуты, которые вам нужно знать"> </pre><p> Помимо предоставления дополнительной информации о странице для поисковых систем, атрибут description дает содержание создателям возможность написать заманчивый текст, который будет побуждать людей переходить на страницу прямо из поисковой выдачи.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Как правило, текст описания должен быть немного кликбейтным, чтобы у людей была мотивация перейти на страницу. Но обратите внимание, что Google чаще всего заменяет предоставленное описание страницы частями контента, которые имеют отношение к поисковому запросу пользователя.</p><p> Теперь, хотя текст описания не дает прямого повышения рейтинга, он может увеличить ваш CTR, что, в свою очередь, рассматривается как положительный сигнал ранжирования.</p><p> <strong> Метатег области просмотра </strong></p><p> Хотя это и не атрибут, метатег <strong> области просмотра </strong> позволяет управлять шириной и масштабированием области просмотра — видимой пользователем области страницы — для правильного отображения на экранах всех размеров. , от настольных компьютеров до ноутбуков и от планшетов до мобильных телефонов.</p><p> Вот как выглядит HTML-код, и я советую вам добавить его на все ваши веб-страницы:</p><pre> <meta name="viewport" content="width=device-width, initial-scale=1.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> 0"> </pre><p> С С помощью этих данных браузеры могут получить информацию о том, как управлять размерами и масштабированием веб-страниц.</p><p> Присмотревшись к коду, мы видим, что часть <em> width=device-width </em> настроена таким образом, что ширина страницы будет соответствовать ширине экрана используемого устройства.</p><p> Что касается части <em> initial-scale=1.0 </em>, то она устанавливает начальный уровень масштабирования при первой загрузке страницы браузером. Поэтому вы можете проверить это в зависимости от того, как настроена ваша страница.</p><p> Ниже вы найдете пример страницы, на которой не используется метатег области просмотра, а также той же веб-страницы, которая его использует:</p><p> В наше время, когда удобство использования сайта напрямую влияет на его позиции в рейтинге, просто недопустимо создавать страницы, которые не подстраиваются под размеры разных экранов. Люди сразу уйдут с вашей страницы, если она будет похожа на пример левой.</p><p> <strong> Twitter Card </strong></p><p> Twitter Card — это мультимедийная надстройка для твитов.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Это настраиваемые медиа-блоки, которые специалисты PPC могут использовать для привлечения трафика на свои сайты и/или в мобильные приложения.</p><p> Существуют разные типы карточек Twitter, каждый из которых создан специально для удовлетворения потребностей пользователей Twitter на настольных и мобильных устройствах:</p><ul><li> <strong> Сводная карточка </strong> включает заголовок, описание и миниатюру</li><li> <strong> Сводная карточка с большим изображением </strong> дополнительно включает изображение спереди и по центру</li><li> <strong> App Card </strong> позволяет напрямую загружать в мобильное приложение</li><li> <strong> Player Card </strong> позволяет отображать видео, аудио и другие медиаданные</li></ul><p> Чтобы начать внедрение разметки Twitter Cards, вам нужно указать тип карточки, которую требует ваш контент, добавив HTML-разметку в раздел заголовка страницы:</p><p> Вот как выглядит HTML-код:</p><pre> <meta name="twitter:card" content="summary_large_image"> < meta name="twitter:site" content="@Airbnb_UK" > <meta name="twitter:title" content="Пабы на Airbnb"> <meta name="twitter:description" content="От таверны Old Cross Saws до The Whistling Badger, пабы, разбросанные по всей Великобритании, используют Airbnb для размещения свободных номеров.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> "> <meta name="twitter:image" content="https://pbs.twimg.com/card_img/1409</td>4122089473/Zhi5ikFr?format=jpg&name=medium"> </pre><p> Благодаря наличию этого метатега в твите, который ссылается на ваш сайт, для пользователей Twitter будет отображаться карточка страницы:</p><p> Без тега Twitter Card , заголовок страницы вашего контента, описание, изображение и т. д. не будут подтягиваться и отображаться в ваших сообщениях Twitter вместе со ссылкой. Вместо этого Twitter будет извлекать данные из соответствующих тегов Open Graph, если таковые имеются.</p><p> Узнать больше о Twitter Cards здесь.0005<h5><span class="ez-toc-section" id="i-67"> Атрибут содержимого </span></h5><p> Этот атрибут работает в сочетании с атрибутами имени и http-equiv и раскрывает значение/тип данных метатега для поисковой системы. По сути, он определяет содержимое, содержащее метатег.</p><p> Вот пример атрибута содержимого, используемого в метатеге:</p><pre> <meta name="description" <strong> content="Что такое HTML-теги и атрибуты? Как вы используете их, чтобы получить преимущество SEO? Проверьте все важные Тег HTML и его атрибут в этом посте!" </strong> > </pre><p> А вот как это выглядит на активной странице (помните, что описание отображается только в поисковой выдаче):</p><p> В контексте атрибута HTTP-equiv, к которому мы перейдем далее, атрибут содержимого определяет тип данных, отправляемых в браузер.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Но сначала давайте сосредоточимся на очень важном значении атрибута содержимого.</p><p> <strong> Атрибут Noindex </strong></p><p> <strong> Noindex </strong> — еще один часто используемый атрибут метатега в целях SEO.</p><p> Этот атрибут позволяет издателям идентифицировать контент, который может быть проиндексирован поисковыми системами и включен в поисковую выдачу. По сути, атрибут noindex позволяет вам сообщить поисковым системам, что они не могут использовать данную страницу в своих соответствующих индексах.</p><p> Подобно «метатегу robots», атрибут noindex обычно называют «тегом noindex» из-за его использования, хотя он является атрибутом метатега.</p><p> Вот как выглядит HTML-код:</p><pre> <meta name="robots" <strong> content="noindex" </strong> /> </pre><p> Вот несколько примеров команд, которые можно использовать в метатеге robots помимо «noindex» (их можно использовать в комбинации):</p><ul><li> <strong> nofollow </strong> <br/> Не переходить по любым ссылкам со страницы, а также не учитывать ссылочный вес при расчете рейтинга.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li></ul><ul><li> <strong> index, nofollow </strong> <br/> Индексируйте содержимое страницы, но не переходите ни по каким ссылкам со страницы.</li></ul><p> Этот атрибут очень удобен, когда вы хотите скрыть конфиденциальные данные от обычного поиска. Например, у вас может быть область на вашем сайте, к которой могут получить доступ только платные участники, и отсутствие использования «тега noindex» сделает контент доступным для всех со страниц результатов поиска.</p><p> При использовании директив robots на своей странице убедитесь, что они не заблокированы файлом robots.txt. В противном случае поисковые системы просто не смогут получить доступ к странице и увидеть директивы, указанные в метатеге.</p><p> <strong> Атрибут HTTP-equiv </strong></p><p> Атрибут <strong> http-equiv </strong> отображает содержимое заголовка HTTP и используется серверами для сбора дополнительной информации о странице.</p><p> С точки зрения непрофессионала, браузеры преобразуют значение атрибута http-equiv, указанное с помощью атрибута содержимого, в формат заголовка ответа HTTP и обрабатывают их так, как будто они пришли непосредственно с сервера.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Вот пример того, как выглядит HTML-код:</p><pre> <meta <strong> http-equiv="expires" </strong> content="4 May 2022"> или же <meta <strong> http-equiv="refresh" </strong> content="60"> </pre><p> Заголовок HTTP содержит множество данных, полезных для SEO-специалистов, таких как статус ответа сервера (200, 404 и т. д.) или имя сервера, отправившего ответ.</p><p> Кроме того, с его помощью можно указать канонический URL запрашиваемой страницы, запретить роботам индексировать страницу с помощью HTTP-заголовка X-Robots-Tag или настроить перенаправление HTML с помощью атрибута обновления.</p><p> Вот некоторые из значений атрибута <strong> </strong>, которые можно использовать в атрибуте HTTP-equiv:</p><table><tbody><tr><td> <strong> Значение </strong></td><td> <strong> Описание </strong></td></tr><tr><td> Content-Seccory-Seccory-Seccory-Seccory-Seccory-Seccory-Seccory-Seccory-Seccory-Seccory-Seccory-Seccory-Seccory-Seccory-Seccory-Sec policy<p> Пример:<meta http-equiv="content-security-policy" content="default-src 'self'"></p></td></tr><tr><td> content-type</td><td> Указывает кодировку символов документа<p> Пример:<meta http-equiv="content-type" content="text/html; charset=UTF-8″></p></td></tr><tr><td> default-style</td><td> Укажите предпочтительную таблицу стилей документа<p> Пример:<meta http-equiv="default-style" content="предпочитаемая таблица стилей документа"></p><p> значение атрибута содержимого должно совпадать со значением атрибута title в элементе ссылки или со значением атрибута title в элементе стиля.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p></td></tr><tr><td> Refresh</td><td> Определяет, как часто (в секундах) документ должен автоматически обновляться. Атрибут charset </strong> отвечает за кодировку документа. Он определяет стиль кодировки символов веб-сайта.</p><p> Необходимо указать кодировку, чтобы браузеры могли корректно отображать текст HTML-документа на странице. Если тег с данными кодировки содержит ошибку, вы увидите на странице только зашифрованные символы.</p><p> Вот как выглядит HTML-код:</p><pre> <head> <мета-кодировка="UTF-8"> </head> </pre><p> Одним из наиболее часто используемых стандартов кодирования является UTF-8, его используют 96,6% проанализированных веб-сайтов. Его поддерживают все современные браузеры и поисковые системы. Некоторые другие стандарты кодирования включают ISO-8859-1, Windows-1251 и Windows-1252, но их используют менее 3% веб-сайтов.</p><p> Ключевым моментом здесь является не использование нескольких стандартов кодирования в одном документе, так как это запутает как браузеры, так и поисковые системы.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> В свою очередь, это может привести к проблемам с индексацией контента и некорректному отображению текста.</p><p> В настоящее время практически каждая поисковая система умеет определять кодировку страницы без посторонней помощи. Но на всякий случай лучше указать кодировку, используемую на странице, чтобы избежать проблем.</p><h4><span class="ez-toc-section" id="3-6"> 3) Теги </span></h4><a> и<link> создают ссылки</h4><p> Тег <strong> <a> </strong> служит для определения гиперссылок, ведущих с одной страницы на другую. По сути, стандартная гиперссылка на веб-странице представляет собой тег <a>.</p><p> Вот пример того, как выглядит его HTML-код:</p><pre> <a href="www.website.com">текст привязки ссылки</a> </pre><p> При добавлении в код HTML и размещении в содержании приведенный выше пример будет выглядеть следующим образом:</p><p> текст привязки ссылки</p><p> Теперь давайте разберем его, чтобы понять его части. Во-первых, у нас есть тег <em> <a> </em>, который указывает, что элемент является ссылкой. Затем атрибут <em> href= </em> определяет страницу, на которую ведет ссылка, в нашем случае это <em> www.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> website.com </em>. Текст, который вы можете видеть между открывающим тегом <a> и закрывающим тегом </a>, является якорным текстом, так как интерактивный текст в содержании сайта посетители увидят на странице.</p><p> Обратите внимание, что тег <a> используется для интерактивных ссылок, которые размещаются в содержимом страницы, как в теге<body>. Если вам нужно связать веб-страницу с внешним ресурсом, например с документом, содержащим шрифты или внешние таблицы стилей, вам нужно использовать тег <strong><link> </strong>, который появляется в<head> страницы.</p><p> Вот как выглядит его HTML-код:</p><pre> <head> <strong> <ссылка rel="stylesheet" href="styles.css"> </strong> </голова> </pre><p> Обратите внимание, что ссылки тега<link> не являются гиперссылками, по ним нельзя щелкнуть, а сам элемент<link> содержит только атрибуты. Они просто показывают, как веб-документы связаны друг с другом.</p><p> Теперь давайте посмотрим на атрибуты, связанные с тегами ссылок.</p><p> <strong> Атрибуты Hreflang </strong></p><p> Наиболее важными атрибутами тега <a> являются атрибуты <strong> href </strong> и <strong> hreflang </strong>, которые указывают место назначения ссылки и указывают страну и язык альтернативной страницы соответственно.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Атрибут hreflang был в первую очередь разработан для веб-сайтов, которые содержат одну и ту же копию на разных языках. Это позволяет поисковым системам узнать, какая версия страницы должна отображаться для посетителей веб-сайта, позволяя им видеть контент на предпочитаемом ими языке.</p><p> Атрибут hreflang также можно использовать в теге<link>, где он определяет язык веб-страницы, на которую делается ссылка. Как и тег<link>, атрибут href должен быть размещен внутри элемента<head> страницы, и вот как выглядит его HTML-код:</p><pre> <link <strong> rel="alternate" href="https://website.com" hreflang="en-gb" </strong> /> </pre><p> Код можно разделить на три части:</p><ul><li> <em> rel= «альтернативный» </em> указывает поисковым системам, что веб-страница имеет альтернативную релевантную страницу.</li><li> Атрибут <em> href= </em> определяет URL-адрес связанной страницы.</li><li> Код языка, указанный после атрибута <em> hreflang= </em>, позволяет поисковым системам узнать язык связанной страницы.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Ознакомьтесь с полным списком языковых кодов, известных как ISO 639.-1 коды.</li></ul><p> Обратите внимание, что атрибут hreflang можно дополнительно использовать в HTTP-заголовке для не-HTML-документов или указать в XML-карте сайта сайта.</p><p> <strong> Rel="nofollow" attribute </strong></p><p> Атрибут <strong> rel="nofollow" </strong> указывает поисковым ботам, что им не разрешено переходить по URL-адресу, указанному в атрибуте href.</p><p> Этот атрибут никак не влияет на посетителей веб-сайта, поэтому они по-прежнему могут щелкать ссылки для перехода на другие страницы. Тем не менее, это влияет на ботов, поскольку они не могут перейти по ссылке, чтобы посетить страницу, или выделить какой-либо конкретный положительный аспект ссылки с одной страницы на другую.</p><p> Этот атрибут можно применить к одной ссылке следующим образом:</p><pre> <a href=www.website.com <strong> rel="nofollow" </strong> >якорный текст ссылки</a> </pre><p> Или вы можете пометить все ссылки на сети как «nofollow», используя его в теге<head>, подобно атрибуту «noindex»:</p><pre> <meta <strong> name="robots" content="nofollow" </strong> /> </pre><p> Но речь идет не только о поисковых системах и их боты.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Вы по-прежнему можете получить косвенную выгоду от ссылок nofollow, если посетители вашего веб-сайта переходят на связанную веб-страницу.</p><p> <strong> Использование Google атрибута rel="nofollow" </strong></p><p> Несколько лет назад поисковый гигант внес несколько изменений в атрибут "nofollow" и ввел <em> rel="ugc" </em> и <em> rel="sponsored" </em> атрибута. В отличие от атрибута «nofollow», эти новые атрибуты позволяют издателям гораздо более четко определять связь между ссылками и их целевыми страницами.</p><p> Они помогают Google распознавать, когда страница, на которую есть ссылка, не должна учитываться при ранжировании страниц:</p><ul><li> <strong> rel="ugc" </strong> Атрибут обозначает пользовательский контент и используется для обозначения ссылок, которые были добавлены через общедоступные ресурсы, такие как форумы.</li><li> <strong> rel="sponsored" Атрибут </strong> используется для идентификации ссылок, которые были получены через рекламу или спонсорство.</li></ul><p> Кроме того, Google также заявил, что атрибуты «nofollow», «rel=«ugc» и rel=«sponsored» теперь рассматриваются поисковым гигантом как подсказки.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Раньше бот Google игнорировал такие ссылки, но теперь он может принять во внимание предоставленную «подсказку», но по-прежнему может трактовать ссылку как «nofollow».</p><p> <strong> Канонический атрибут </strong></p><p> Атрибут <strong> rel="canonical" </strong> тега ссылки позволяет оптимизаторам указать, какая другая веб-страница должна считаться канонической, поскольку это основная версия страницы, но могут существовать ее копии.</p><p> С точки зрения SEO, это помогает продвигать определенную страницу в органическом поиске, блокируя ранжирование ее копий.</p><p> Вот как выглядит этот атрибут:</p><pre> <link <strong> rel="canonical" href="https://www.website.com/" </strong> /> </pre><p> Код с каноническим атрибутом должен быть размещен внутри элемента<head> страницы. Обратите внимание, что вы должны указать страницу, которую вы хотите, чтобы роботы поисковых систем считали канонической, после атрибута «href=».</p><p> Узнайте, что Google говорит о канонических ссылках, чтобы узнать больше.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><h4><span class="ez-toc-section" id="4-3"> 4) Тег </span></h4><img> отображает и описывает изображения</h4><p> Тег <strong> <img> </strong> присутствует на любой странице с изображением. Он используется для встраивания изображений в код HTML и их отображения в форматах PNG, JPEG или GIF. Вы также можете добавить изображение в виде ссылки на другой файл. Для этого просто поместите тег <img> в контейнер <a>.</p><p> Изображения также можно использовать в качестве карт HTML-изображений, если изображение содержит интерактивные области, действующие как ссылки. Карты изображений ничем не отличаются от обычных изображений, за исключением того, что первые можно разбить на невидимые зоны различной формы, по которым можно щелкнуть.</p><p> Интересно, что этот тег на самом деле не вставляет изображения на страницы, а ссылается на них, чтобы они отображались на странице. Тег <img> в основном служит контейнером для изображений, которые на самом деле расположены где-то еще, например на сервере.</p><p> Вот как выглядит HTML-код тега <img>:</p><pre> <img class="lazy lazy-hidden" decoding="async" src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="imagefilename.<img class="lazy lazy-hidden" decoding="async" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img decoding="async" src="imagefilename.<img decoding="async" loading='lazy' src='' /></noscript> jpg" title=”здесь идет описание изображения” alt="здесь идет альтернативное описание изображения"> </pre><p> Как вы можете видите, в этом теге есть три атрибута. Один из них необходимо заполнить правильно, чтобы тег функционировал, а остальные можно оставить без значения. Рассмотрим троицу более подробно.</p><p> <strong> Атрибут Src </strong></p><p> Основная цель 9Атрибут 0103 src= </strong> указывает, где (URL) находится файл изображения, показанного на веб-странице.</p><p> Местоположение изображения, как и его URL-адрес, можно указать двумя способами для атрибута src=:</p><ol><li> Если его можно найти в том же домене, что и контейнер, в котором оно размещено, следует использовать относительный URL-адрес <em>. </em> . В этом случае доменное имя не включается в URL-адрес. Если в начале URL-адреса нет косой черты, это относится к текущей странице.</li></ol><pre> src="imagefile.png" </pre><p> Но если в начале URL стоит косая черта, то это относится к домену.</p><pre> src="/images/imagefile.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> png" </pre><p> Обратите внимание, что относительные URL-адреса не будут прерываться при смене домена, например, при переключении с HTTP на HTTPS. И если изображение не может быть найдено браузером , альтернативный текст будет отображаться вместе со значком неработающей ссылки.</p><ol start="2"><li> Но если вы хотите использовать изображение, расположенное на другом веб-сайте, используйте <em> абсолютный URL-адрес </em> .</li></ol><pre> src="https://www.website.com/images/imagefile.png" </pre><p> Обратите внимание, что использование изображений из внешних источников без разрешения может нарушать законы об авторском праве, к тому же вы не контролируете их и не узнаете при их удалении или обновлении.</p><p> Единственная цель этого атрибута с точки зрения SEO заключается в том, что он нужен вам для индексации изображений и их ранжирования в поиске изображений. Кроме того, тег изображения просто не будет работать без этого атрибута.</p><p> <strong> Альтернативный атрибут </strong></p><p> Основная цель этого атрибута — указать альтернативный текст, который будет отображаться, если изображение не может быть отображено на странице по какой-либо причине.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Вдобавок ко всему, поскольку поисковые системы все еще изо всех сил пытаются придумать технологию, которая позволит им в совершенстве понимать, что изображено на изображениях, атрибут alt предоставляет еще один способ — в дополнение к атрибуту title — для них понять, что изображено на изображении. изображенному на изображении и, в конечном счете, ранжировать его в поиске изображения.</p><p> Итак, попробуйте использовать ключевые слова, которые <em> а) описать изображение </em> и <em> б) использовать ключевые слова, относящиеся к теме веб-страницы </em>.</p><p> Что касается посетителей веб-сайта, текст в атрибуте alt= используется программами чтения с экрана и вспомогательными технологиями, чтобы слепые или слабовидящие люди могли понять, что содержит изображение. Таким образом, вы можете максимально использовать атрибут alt, чтобы помочь таким людям усваивать контент.</p><p> Помните, я говорил, что два атрибута <img> можно оставить без значения? Что ж, хотя атрибут alt= должен присутствовать в теге изображения, как и атрибут title=, вы не обязаны его заполнять.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Тем не менее, учитывая пункты, указанные выше, вы, возможно, захотите заполнить его в конце концов.</p><p> <strong> Атрибут заголовка </strong></p><p> Атрибут заголовка <strong> </strong> описывает содержимое изображения.</p><p> Хотя этот атрибут не так важен для оптимизации, как атрибут alt, поскольку он не используется для ранжирования в поиске, его все же стоит заполнить, поскольку он может предоставить дополнительную информацию, когда пользователи наводят курсор на изображение.</p><p> Наряду с тегом <img> используются многие другие атрибуты, отвечающие за расположение изображения на странице, размер и особенности дизайна. Итак, вот короткая таблица, которая их охватывает:</p><table><tbody><tr><td> <strong> Attribute </strong></td><td> <strong> Value </strong></td><td> <strong> Description </strong></td></tr><tr><td> crossorigin</td><td> anonymoususe-credentials</td><td> Allows the use of images from third-party sites that permit cross-origin access use with canvas</td></tr><tr><td> height</td><td> пикселей</td><td> Определяет высоту изображения</td></tr><tr><td> ismap</td><td> ismap</td><td> Определяет изображение как серверную карту изображений</td></tr><tr><td> Загрузка</td><td> eagerlazy</td><td> Определяет, должен ли браузер загрузить изображение сразу или подождать, пока не будут выполнены конкретные условия</td></tr><tr><td> Longdesc</td><td> URL</td><td>.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Определяет веб -страницу, на которой содержится описание</td></tr>.<td> referrerpolicy</td><td> no-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-url</td><td> Определяет, какая информация о реферере должна использоваться при получении изображения</td></tr><tr><td> sizes</td><td> sizes</td><td> Defines the sizes of an image for different page layouts</td></tr><tr><td> srcset</td><td> URL-list</td><td> Provides a list of image files that should be used in different scenarios</td></tr><tr><td> usemap</td><td> #mapname</td><td> Определяет изображение как карту изображения на стороне клиента</td></tr><tr><td> ширина</td><td> пикселей</td><td> Определяет ширину изображения</td></tr></tbody></table><p></p><h4><span class="ez-toc-section" id="5-4"> 5) Теги </span></h4><i>, <em>, <b> и <strong> выделяют важный текст</h4><p> Отдельная группа тегов отвечает за выделение текста — выделение жирным шрифтом, курсивом, подчеркиванием и т.д. полезно, когда нужно логично выделить важную часть текста как для читателей, так и для поисковых систем.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Вот наиболее распространенные теги, помогающие форматировать текст:</p><ul><li> Тег <strong> <i> </strong> делает текст <em> курсивом </em> .</li></ul><pre> <i>Текст, выделенный курсивом</i> </pre><ul><li> Тег <strong> <em> </strong> определяет выделенный текст. Содержимое тега отображается курсивом. Программы чтения с экрана используют словесное ударение при произнесении слов в <em>.</li></ul><pre> <em>Выделенный текст</em> </pre><p> Обратите внимание, что основное различие между тегами <i> и <em> заключается в том, что последний обеспечивает семантическое выделение важного слова или части слов (полезно для поисковой оптимизации). , в то время как первый представляет собой просто смещенный текст, обычно выделенный курсивом, чтобы показать альтернативное настроение или голос.</p><ul><li> Тег <strong> <b> </strong> делает текст <strong> полужирным </strong> .</li></ul><pre> <b>Выделенный текст</b> </pre><ul><li> Тег <strong> <strong> </strong> также делает текст жирным.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Однако, в отличие от тега <strong> <b> </strong>, который просто выделяет текст жирным шрифтом без какого-либо логического смысла, этот тег сообщает поисковым системам, что текст, выделенный жирным шрифтом, имеет большое значение.</li></ul><pre> <strong>Развернутый текст</strong> </pre><h4><span class="ez-toc-section" id="6-3"> 6) Теги </span></h4><table>,<ul>,<ol> помогают попасть в блок ответов Google</h4><p> Таблицы и списки помогают упорядочить информацию на странице, но они также могут дать приятный бонус — шанс появиться в окне ответов Google. Например, при вводе запроса «сравнение видеокарт» мы видим блок ответов со следующей таблицей:</p><p> Теперь, если мы проверим код страницы, которая появилась в блоке ответов, мы можем найти таблицу в коде это выглядит примерно так:</p><p> Вот как выглядит чистый HTML-код без всей дополнительной информации:</p><pre> <таблица> <tr> <th>Рейтинг ФИФА</th> <td>Португалия</td> </tr> </table> </pre><p> Я понимаю, что здесь слишком много аббревиатур и двухбуквенных кодов, поэтому давайте разберемся и узнаем, как использовать <em><table> </em> , <em><caption>, </em> <em><tr>, </em> <em><td> </em> и <em><th> </em> теги правильно:</p><ul><li> Тег <strong><table> </strong> определяет структуру и содержимое таблицы.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> <strong><caption> </strong>, <strong><td> </strong>, <strong><th> </strong>, <strong><tr> </strong> и другие элементы используются внутри тега <strong><table> </strong>. Вы можете полностью изменить таблицу с помощью атрибутов: <strong> выровнять </strong> таблицу, установить <strong> фон </strong> изображение, изменить <strong> bgcolor </strong> (цвет фона), установить <strong> границу </strong> ширину и т. д. </li><li> Тег <strong><caption> </strong> создает заголовок для описания таблицы.</li><li> 9Тег 0103<tr> </strong> создает строку в таблице.</li><li> Тег <strong><td> </strong> создает стандартную ячейку в таблице.</li><li> Тег <strong><th> </strong> создает ячейку заголовка в таблице с выровненным полужирным текстом.</li></ul><p> Что касается <strong> списков </strong>, мы можем наблюдать аналогичную историю. SEO-ценность списков заключается в их четкой, лаконичной, пошаговой структуре, которая повышает шансы страницы появиться в избранном фрагменте.</p><p> Вот пример того, как выглядит HTML-код для неупорядоченного (<ul>) и упорядоченного (<ol>) списков:</p><pre> <ул> <li>Элемент ненумерованного списка</li> <li>Еще один элемент списка</li> </ul> </pre><pre> <ol> <li>Элемент упорядоченного списка</li> <li>Еще один элемент списка</li> </ol> </pre><p> Еще раз давайте разберемся и узнаем, как правильно использовать теги <em><ul> </em> , <em><ol> </em> и <em><li> </em>:</p><ul><li> Тег <strong><ul> </strong> определяет неупорядоченный (маркированный) список.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li><li> <strong> Тег<ol> </strong> определяет упорядоченный список.</li><li> Тег <strong><li> </strong> указывает значение элемента списка, где каждый элемент в списке должен начинаться с тега <strong><li> </strong>.</li></ul><p> С точки зрения SEO гораздо выгоднее использовать таблицы вместо списков, поскольку таблицы позволяют поисковым системам легко извлекать табличные данные и в результате ранжировать статьи выше.</p><h4><span class="ez-toc-section" id="7-3"> 7) Тег </span></h4><header> делает контент доступным для сканирования</h4><p> <strong> Тег<header> </strong> был разработан для определения заголовка страницы или раздела для представления содержимого впереди и обычно имеет логотип или значок, навигационные ссылки и панель поиска.</p><p> Важно отметить, что в одном HTML-коде может быть несколько тегов<header>, но сам тег не может быть размещен в теге<footer>, <address> или другом теге<header>. Тег<header> поддерживает глобальные атрибуты HTML и атрибуты событий HTML.</p><p> Вот как выглядит HTML-код:</p><pre> <!DOCTYPE HTML> <html> <тело> <статья> <strong> <заголовок> <h2><span class="ez-toc-section" id="i-68">Напишите здесь заголовок</span></h2> <p>Автор: Джон Эпплсид</p> <p>Представьте свой контент</p> </заголовок> </strong> <p>Теперь войдите во все детали</p> </статья> </тело> </html> </pre><p> Запустив его, вы получите следующее:</p><p> Это всего лишь пример, но вы можете легко найти элемент<header>, используемый в самом верху многих веб-сайтов:</p><p> Что касается преимуществ SEO, боты поисковых систем считают заголовки удобными для пользователя, поскольку они обеспечивают форматирование страницы, делая содержимое страницы доступным для сканирования.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Без заголовков поисковые роботы могут подумать, что ваша страница неудобна для пользователя, и в результате ваш рейтинг может пострадать. Кроме того, поскольку заголовок также может содержать внутренние навигационные ссылки, это дает поисковым системам четкое представление о том, какие страницы являются наиболее важными в структуре вашего сайта.</p><h4><span class="ez-toc-section" id="8-2"> 8) Теги </span></h4><h2><span class="ez-toc-section" id="i-69"> … </span></h2><h6><span class="ez-toc-section" id="i-70"> структурируют текст по разделам </span></h6></h4><p> Каждый фрагмент онлайн-контента структурирован таким образом, чтобы поисковые системы и пользователи могли понять, о чем он. В результате весь текст получает заголовок и разбивается на логические смысловые блоки, каждый со своим заголовком. HTML использует специальные теги для выделения таких элементов на странице: заголовки.</p><p> Имеется 6 уровней заголовков: от h2 до h6. <strong><h2></h2></strong> используется в качестве основного заголовка и обычно размещается над текстом. Все заголовки должны соответствовать принципу иерархии (от<h2><span class="ez-toc-section" id="i-71"> до </span></h2><h6><span class="ez-toc-section" id="_9_0103">), с 9Тег 0103 </span></h6><h2></h2></strong> используется только один раз в подавляющем большинстве случаев.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Вот как выглядит HTML-код:</p><pre> <strong> <h2><span class="ez-toc-section" id="_SEO-8">Все, что нужно знать новичкам в SEO о тегах</span></h2> </strong> <p>Мы решили написать эту статью, потому что в нашу службу поддержки поступает много вопросов, касающихся HTML-тегов.</p> <strong> <h3><span class="ez-toc-section" id="i-72">С чего начать</span></h3> </strong> <p>Мы не собираемся учить вас программировать, но мы покажем вам наиболее часто встречающиеся теги в SEO.</p> </pre><p> Кстати, эксперимент подтвердил приоритет использования <strong><h2></h2></strong> . Независимо от того, сколько заголовков<h3><span class="ez-toc-section" id="i-73"> вы оптимизируете, они все равно не смогут превзойти веб-страницу с оптимизированным </span></h3><h2><span class="ez-toc-section" id="i-74">. </span></h2></p><p> Итак, чтобы получить преимущества SEO, лучше всего придерживаться лучших практик в отношении использования заголовков в контенте — использовать только один заголовок h2 и поддерживать иерархию заголовков.</p><p> Обратите внимание, что теги <strong><title> </strong> и <strong><h2></h2></strong> — это не одно и то же. Путаница может быть вызвана тем, что оба они имеют схожие функции описания содержимого страницы.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Но основное различие между этими двумя тегами заключается в том, что заголовок отображается в сниппете, социальных сетях и вкладках браузера, а 9Тег 0103<h2></h2></strong> отображается только на странице в качестве заголовка. Кроме того, они должны различаться, поскольку служат разным целям: заголовок привлекает людей из поисковой выдачи, а тег <strong><h2></h2></strong> подтверждает, что искатели пришли на нужную страницу, описывая содержание.</p><h4><span class="ez-toc-section" id="9-2"> 9) Тег </span></h4><footer> обеспечивает внутреннюю структуру ссылок и навигацию</h4><p> Тег<footer> был разработан для определения нижнего колонтитула документа или раздела на веб-сайте.</p><p> Как правило, этот тег содержит информацию об авторстве, авторских правах, контактные данные (должен находиться внутри тега <address> внутри<footer>), ссылки на связанные документы и страницы, ссылку на начало страницы и, возможно, даже карту сайта. . Код HTML может содержать несколько тегов<footer>, а также поддерживает глобальные атрибуты HTML и атрибуты событий HTML.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Вот пример того, как выглядит код HTML:</p><pre> <!DOCTYPE html> <html> <тело> <h2><span class="ez-toc-section" id="i-75">Элемент нижнего колонтитула</span></h2> <strong> <нижний колонтитул> <p>Автор: Джон Эпплсид<br> <a href="mailto:[электронная почта защищена]">[электронная почта защищена]</a></p> </нижний колонтитул> </strong> </тело> </html> </pre><p> Активный код создает следующую страницу:</p><p> Приведенный выше пример не является типичным подвалом, который приходит на ум, но его можно найти в различных статьях. Ниже вы можете увидеть заполненный ссылками нижний колонтитул с домашней страницы SE Ranking вместе с его HTML-кодом:</p><p> В большинстве случаев нижний колонтитул одинаков для всего веб-сайта и предоставляет пользователям всю информацию, которая им может понадобиться.</p><p> Но в чем преимущество использования нижнего колонтитула для SEO? Ну, футер содержит ссылки. Много ссылок. И в SEO это важно, поскольку обеспечивает четкую структуру внутренних ссылок. Поэтому убедитесь, что все ваши важные страницы связаны с нижним колонтитулом для поисковых систем.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><h4><span class="ez-toc-section" id="10-2"> 10) Слишком много тегов </span></h4><div> замедляют работу веб-страниц</h4><p> Тег<div> был разработан для определения раздела в коде HTML. Он используется для хранения всех типов HTML-элементов.</p><p> Чтобы уточнить, тег<div> — это блочный элемент, предназначенный для выделения фрагмента документа с целью изменения внешнего вида его содержимого. Чтобы не приходилось каждый раз описывать стиль тега, выбирайте стиль из внешней таблицы стилей, также добавляйте атрибут class или id вместе с именем селектора.</p><p> Вот как выглядит HTML-код:</p><pre> <!DOCTYPE html> <html> <голова> <стиль> <strong> .myDiv { граница: 7 пикселей с отступом черный; цвет фона: светло-зеленый; выравнивание текста: по центру; </strong> <strong> } </strong> </стиль> </голова> <тело> <h2><span class="ez-toc-section" id="_div">Тег div</span></h2> <strong> <дел> <h3><span class="ez-toc-section" id="_div-2">Заголовок в теге div</span></h3> <p>Текст в теге div.</p> </дел> </strong> <p>Текст вне тега div.</p> </тело> </html> </pre><p> После успешного запуска кода вы увидите, что содержимое элемента div отделено от остального:</p><p> Тег<div> может содержать два атрибута:</p><ul><li> Атрибут <em> align </em> определяет, как элемент div будут выровнены на странице по отношению к ее окружению.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></li><li> Атрибут <em> title </em> добавляет к содержимому дополнительную всплывающую информацию.</li></ul><p> Тег<div> также поддерживает глобальные атрибуты HTML и атрибуты событий HTML.</p><p> С точки зрения SEO, упаковка содержимого страницы в теги<div> не будет прямой проблемой, однако наличие большого количества ненужного кода в вашем HTML-документе может замедлить работу страницы, что приведет к проблемам с UX.</p><h4><span class="ez-toc-section" id="11-2"> 11) Тег </span></h4><section> объединяет логические группы связанного содержимого</h4><p> Просто и понятно, тег<section> был разработан для определения раздела HTML-документа. Но помимо этой цели, его также можно использовать для пометки блоков новостей, контактных данных, глав контента и вкладок диалоговых окон, и это лишь некоторые из них.</p><p> Следует отметить, что этот элемент обычно имеет заголовок, и вы можете поместить один элемент раздела в другой. Глобальные атрибуты HTML и атрибуты событий поддерживаются тегом<section>.</p><p> Вот как выглядит HTML-код:</p><pre> <section> <h3><span class="ez-toc-section" id="i-76">Стадион Сантьяго Бернабеу</span></h3> <p>Стадион Сантьяго Бернабеу — футбольный стадион в Мадриде, Испания.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> С текущей вместимостью 81 044 человека он был домашним стадионом «Реал Мадрид» с момента его завершения в 1947. </p> </section> </pre><p> Запустив его, вы увидите что-то, что визуально ничем не отличается от элементов<article> или<aside>:</p><p> Как вы можете видеть на снимке экрана ниже, мы также используем элемент < section> на нашем веб-сайте для маркировки различных частей или разделов нашей домашней страницы:</p><p> С точки зрения SEO элемент<section> подобен тегу<div>, но, хотя он выглядит так, как будто ничего не происходит, это посылает более мощный сигнал поисковым системам. Он сообщает им, что внутри тега заключена логическая группа связанного контента, например, раздел контактной информации.</p><h4><span class="ez-toc-section" id="11-3"> 11) Тег </span></h4><article> указывает на самодостаточное содержимое</h4><p> Тег<article> обозначает связное и отчетливое содержимое. Но, в отличие от тега<section>, его можно вырезать и вставлять из одного места в другое, как другой сайт, и статья не потеряет своего смысла. Тем более, что сделать это можно за считанные минуты.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Тег часто используется для статей и постов в блогах.</p><p> Ниже вы можете увидеть страницу статьи SEJ с бесконечной прокруткой. Как только вы закончите читать одну статью, сразу же начнется другая.</p><p> Тег<article> упрощает процесс выделения новых статей или сообщений в блогах в онлайн-публикации для поисковых систем. Таким образом, поисковые системы, такие как Google, могут уделять больше внимания содержанию, помещенному в тег<article>.</p><p> Кроме того, использование тегов<article> сокращает использование тегов<div> и очищает HTML-код вашей страницы.</p><h4><span class="ez-toc-section" id="13-2"> 13) Тег </span></h4><aside> создает боковые панели</h4><p> Тег<aside> используется для определения блока сбоку страницы, который содержит заголовки, ссылки на другой контент, теги, а также другую информацию. Обычно это называют боковой панелью, хотя она может содержать сноску, рекламу или что-то еще.</p><p> Как правило, содержимое, размещенное внутри элемента aside, не должно быть напрямую связано с содержимым страницы.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Подобно тегу<div>, aside создает только боковую панель и не отображает никаких аспектов дизайна. Однако его можно стилизовать с помощью CSS. Тег<aside> поддерживает глобальные атрибуты HTML и атрибуты событий HTML.</p><p> Вот как выглядит код HTML для боковой панели на главной странице нашего блога:</p><p> Тег<aside> помогает поисковым системам быстро получать ценную информацию о странице, такую как автор, количество просмотров и дата. Кроме того, этот тег можно использовать для предоставления дополнительного закрытого контента на странице, который имеет отношение ко всей странице, а не к одному из ее сообщений в блоге. Это дает поисковым системам возможность анализировать окружение страницы, чтобы лучше понять ее общую и более конкретную тему с конечной целью ранжирования страницы по релевантным запросам.</p><h4><span class="ez-toc-section" id="15-2"> 15) Теги </span></h4><iframe> против<frame>: что предпочитают SEO-специалисты</h4><p> Вы, наверное, слышали, что большинство SEO-специалистов неодобрительно относятся к сайтам, использующим фреймы (большинство таких сайтов было создано еще в 90-х).<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Если разобраться в причинах этих настроений, то можно увидеть, что такие сайты сложно оптимизировать, они медленнее и не всегда корректно индексируются, плюс у этих сайтов масса проблем с юзабилити.</p><p> Как видите, выглядит не очень, но за кулисами происходит гораздо больше, что вызывает еще больше проблем с такими страницами.</p><p> Итак, что вам нужно знать о теге <strong><frame> </strong>?</p><p> Тег<frame> определяет свойства отдельного фрейма веб-сайта. Он находится внутри контейнера<frameset> <strong> </strong>, который разбивает страницу на разные области. По сути, каждая область представляет собой отдельную веб-страницу.</p><p> Сегодня эта технология считается устаревшей, поскольку HTML5 больше не поддерживает традиционные фреймы. Однако многие современные технологии поддерживают <iframe>, что позволяет вставлять фреймы в текстовые блоки на страницах.</p><p> Тег <strong> <iframe> </strong> используется для указания встроенного фрейма. По сути, фреймы позволяют встроить другой веб-сайт в HTML-код вашего сайта, например, интерактивные карты или видео на YouTube.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> Итак, тег <iframe> дает вам возможность вставлять контент с другого сайта на ваш собственный сайт. Есть ли в этом SEO преимущества? Что ж, поскольку поисковые системы понимают, что контент в формате iframe подтягивается с другого ресурса, веб-страницы, использующие элемент iframe, не получат никаких положительных сигналов, но все же лучше использовать его, чем<frame>.</p><h4><span class="ez-toc-section" id="15-3"> 15) Тег </span></h4><nav> определяет приоритетные страницы</h4><p> Тег<nav> используется для навигации по сайту и указывает на наиболее важные страницы сайта.</p><p> Поскольку мы уже обсуждали навигационные и внутренние структурные ссылки в разделах<header> и<footer> этой записи блога, вам может быть интересно, чем отличается этот тег. Что ж, если ваша страница содержит несколько блоков ссылок, вы можете использовать<nav> для отметки приоритетных ссылок. Но не переусердствуйте и пометьте все ссылки элементом<nav>.</p><p> Вы заметили, что я сказал ссылки во множественном числе? Тег<nav> можно использовать более одного раза в HTML-документе, но убедитесь, что вы не помещаете его в тег <address>.<img class="lazy lazy-hidden" loading='lazy' src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript></p><p> С помощью этого тега программы чтения с экрана могут понять, нужно ли им пропустить первоначальный рендеринг контента. Кроме того, тег<nav> поддерживает глобальные атрибуты HTML и атрибуты событий HTML.</p><p> Вот как выглядит HTML-код:</p><pre> <!DOCTYPE html> <html> <тело> <h2><span class="ez-toc-section" id="i-77">Элемент навигации</span></h2> <p>Элемент nav определяет набор навигационных ссылок:</p> <strong> <навигация> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/python/">Питон</a> </nav> </strong> </тело> </html> </pre><p> Ниже вы можете увидеть, как выглядит HTML-код, когда он активен:</p><p> А вот как работает тег, когда он правильно добавлен в HTML-код сайта:</p><p> Для поисковой оптимизации ссылки с тегами с помощью элемента<nav> отправьте сигнал поисковым роботам о страницах, которые вы считаете наиболее важными на своем сайте. Кроме того, он обеспечивает им быстрый и легкий доступ к этим веб-страницам.</p><h4><span class="ez-toc-section" id="16-2"> 16) Тег </span></h4><script>ускоряет страницу за счет встроенных скриптов</h4><p>Основное назначение тега<strong><script></strong>— добавлять скрипты,в основном JavaScript,в документы HTML.<img class="lazy lazy-hidden"loading='lazy'src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src=''/><noscript><img loading='lazy'src=''/></noscript>JavaScript используется для создания интерактивных карт,которые реагируют на действия пользователя.Например,меню расширяется по щелчку,лайк добавляется после нажатия на значок сердца и так далее.Очень сложно представить качественный сайт,на котором не используется JavaScript.</p><p>Этот элемент может содержать ссылку на файл внешней ссылки или его текст на определенном языке кодирования,известном как 9Оператор сценария 0332</em>.Скрипты могут быть размещены во внешних файлах и связаны с любым HTML-документом.</p><p>Тег<script>можно размещать в заголовке или теле HTML-документа неограниченное количество раз.В большинстве случаев расположение скрипта никак не влияет на его работоспособность.Однако обратите внимание,что вы должны размещать скрипты,которые должны выполняться первыми,в заголовке HTML-кода.</p><p>Вот как выглядит пример кода HTML:</p><pre><script src="javascript.js"></script> </pre><p> Сейчас нет особого смысла показывать вам, как будет выглядеть пример кода в действии, потому что у вас не будет никакого контекста, поэтому вот как мы используем тег script, чтобы добавить виджет HelpCrunch на наш веб-сайт:</p><p> Прежде чем мы перейдем к SEO-преимуществам использования тега <script>,вот таблица,которая даст вам представление о том,как вы можете выполнять внешние скрипты на своих страницах и какие атрибуты могут помочь.<img class="lazy lazy-hidden"loading='lazy'src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src=''/><noscript><img loading='lazy'src=''/></noscript></p><table><tbody><tr><td><strong>Атрибут</strong></td><td><strong>Value</strong></td><td><strong>Description</strong></td></tr><tr><td>async</td><td>async</td><td>Specifies that the script will be executed as the page is parsing</td></tr><tr><td>defer</td><td>defer</td><td>Specifies that the script will be executed once the страница проанализирована</td></tr><tr><td>язык</td><td>JavaScript(последние версии HTML,XHTML,его преемники не используют этот атрибут)</td><td>Указывает язык кодирования,на котором был написан скрипт</td></tr><tr><td>SRC</td><td>URL</td><td>Определяет адрес URL-адреса внешнего файла сценария,который будет импортирован в текущий документ</td></tr><tr><td>Тип</td><td>Scripttype</td><td>Указывает Содержимое Содержимого Типа<criptype</td><td>.<p>Обратите внимание:если в скрипте нет атрибутов async или defer,он будет выбран и выполнен без задержки,даже до того,как браузер проанализирует ресурс.<img class="lazy lazy-hidden"loading='lazy'src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src=''/><noscript><img loading='lazy'src=''/></noscript></p><p>Также стоит помнить,что у поисковых систем есть проблемы с JavaScript.Его использование часто означает,что определенный контент появится на сайте только после того,как пользователь выполнит действие,поэтому большинство поисковых систем просто не увидят этот контент и в результате он не будет проиндексирован.</p><p>Пока что только Google знает,как обрабатывать JavaScript,поэтому,если вы хотите,чтобы ваш контент JavaScript был виден всеми поисковыми системами,мы рекомендуем использовать динамическую визуализацию или визуализацию на стороне сервера.</p><h3></h3><strong>Как проверить,в порядке ли ваши теги</strong></h3><p>Чтобы не допускать ошибок в HTML-тегах,которые могут повлиять на качество продвижения вашего сайта,необходимо провести полный анализ сайта.Вы можете легко провести аудит всего своего веб-сайта с помощью аудита веб-сайта SE Ranking.</p><p>Подробный анализ каждой из страниц вашего сайта покажет страницы с тегами<strong>noindex</strong>,<strong>hreflang</strong>,<strong>rel="canonical"</strong>и<strong>rel="alternate"</strong>.<img class="lazy lazy-hidden"loading='lazy'src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src=''/><noscript><img loading='lazy'src=''/></noscript>Кроме того,инструмент проверяет заголовки и метатеги на уникальность и соответствие ограничениям длины,находит все дубликаты и изображения с пустыми тегами<strong>alt</strong>,анализирует теги<strong>h2-h6</strong>и многое другое.Помимо ошибок и замечаний,отчет также содержит предложения по их устранению.Кроме того,вы можете вручную настроить,как часто должны выполняться проверки в зависимости от ваших потребностей и как часто вы вносите изменения на веб-сайт.</p><p>В этом сообщении блога мы рассмотрели только теги и атрибуты,с которыми чаще всего сталкиваются специалисты по поисковой оптимизации.Хорошо понимая важность каждого из этих элементов,их структуру и роль на странице,вы сможете выявлять ошибки использования тегов,правильно разрабатывать задачи для программистов и контентрайтеров и,возможно,даже заниматься кодингом без посторонней помощи.</p><p>Вам не обязательно любить теги HTML,но знать,какие из них важны для оптимизации сайта,совершенно необходимо.<img class="lazy lazy-hidden"loading='lazy'src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src=''/><noscript><img loading='lazy'src=''/></noscript>Если вы хотите,чтобы поисковые системы ранжировали ваши страницы,помогите им,предоставив полезную и актуальную информацию в HTML-коде.</p><p>Теги HTML</p><p>Код веб-сайта</p><p>29982 просмотров</p><h2><span class="ez-toc-section"id="_SEO_5">Как писать теги заголовков для SEO:5 лучших практик как мало у тебя власти на самом деле.Многое из того,что определяет,где страницы вашего сайта будут отображаться в рейтинге,находится вне вашего контроля.Но эти ограничения делают еще более важным делать все возможное с теми частями,которые вы</span></h2><i>может управлять</i>.</p><p>Каждый бизнес может по крайней мере практиковать хорошую внутреннюю оптимизацию.Это относительно дешевый и простой способ дать вашему сайту преимущество над(на удивление)многочисленными сайтами,которые не удосуживаются этого сделать.</p><p>Наряду с метаописаниями и оптимизацией на странице одним из наиболее важных факторов ранжирования на странице,который вы можете контролировать,является тег заголовка<strong></strong>.Узнайте больше об этом в этом посте!</p><p>Чему вы научитесь.<img class="lazy lazy-hidden"loading='lazy'src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src=''/><noscript><img loading='lazy'src=''/></noscript>..</p><ul><li>SEO 101:Как написать убедительные теги заголовков</li><li>Что такое тег заголовка?</li><li>Почему теги заголовков имеют значение</li><li>5 советов по написанию тегов заголовков<ul><li>1.Придумайте уникальные заголовки для каждой страницы.</li><li>2.Обратите внимание на длину.</li><li>3.Используйте целевое ключевое слово(но не переусердствуйте).</li><li>4.Описывайте содержание страницы.</li><li>5.Сделайте(краткий)пример того,что находится на странице.</li></ul></li><li>Теги заголовков:короткие,но мощные</li><li>Почему изображения важны для SEO</li><li>12 советов по улучшению SEO для изображений<ul><li>1.Используйте релевантные высококачественные изображения.</li><li>2.Настройте имя файла.</li><li>3.Используйте замещающий текст.</li><li>4.Добавьте подписи к изображениям.</li><li>5.Уменьшите размер файла изображения.</li><li>6.Найдите правильное соотношение качества и размера.</li><li>7.Выберите правильный тип файла.<img class="lazy lazy-hidden"loading='lazy'src="//russia-dropshipping.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif"data-lazy-type="image"data-src=''/><noscript><img loading='lazy'src=''/></noscript></li><li>8.Добавьте изображения на карту сайта.</li><li>9.Используйте адаптивные изображения.</li><li>10.Используйте ленивую загрузку.</li><li>11.Используйте схемы для продуктов и рецептов,где это уместно.</li><li>12.Размещайте изображения на своем сайте.</li></ul></li><li>Найдите время для оптимизации изображений</li></ul><h3><span class="ez-toc-section"id="i-78">Что такое тег заголовка?</span></h3><p>На странице результатов поисковой системы(SERP)заголовок является основной частью списка сайта.Он отображается синим цветом,шрифтом крупнее,чем все остальное,и имеет гиперссылку на ваш сайт.</p><p>На вашем веб-сайте заголовок отображается на вкладке в верхней части браузера(хотя это нормально,что многие из них здесь не видны).</p><p>Тег заголовка — это место в html,где вы определяете,что будет отображаться в этих местах.Обычно вы добавляете его в html в шапке страницы с тегом,который выглядит так:<em><title>Название вашей страницы

Если вы используете WordPress и у вас есть плагин SEO,вы можете пропустить html и добавить тег заголовка на свою страницу,заполнив поле с надписью «Заголовок» или « Тег заголовка» в вашем плагине.

Почему теги заголовков имеют значение

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

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

Но помимо роли,которую они играют в ранжировании,они также чрезвычайно важны для того,чтобы люди нажимали на ссылку,как только она появляется в результатах поиска.Заголовок — это первая и наиболее очевидная часть списка,который они видят — он большой,синий,и люди ожидают,что он предоставит им основную информацию о том,что находится на странице за этой ссылкой.

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

И в этом есть разница.В одном тематическом исследовании Ahrefs обнаружил,что улучшение тега заголовка веб-страницы привело к увеличению веб-трафика на этой странице на 37%.Если вы не оптимизируете теги заголовков,вы упускаете большую возможность.

5 советов по написанию тегов заголовков

Чтобы максимально эффективно использовать пространство для тегов заголовков,следуйте нескольким рекомендациям.

1.Напишите уникальные заголовки для каждой страницы.

Каждая страница вашего веб-сайта уникальна,и ваши теги заголовков должны отражать это.Убедитесь,что вы настроили теги заголовков на каждой странице вашего веб-сайта,чтобы они точно описывали то,что находится на этой конкретной странице.Вы хотите,чтобы ваш тег заголовка сигнализировал поисковым системам,о чем отдельная страница.

Кроме того,наличие четкого и точного заголовка более полезно для всех,кто видит страницу в списках поиска.

2.Обратите внимание на длину.

Google и другие поисковые системы будут отображать 50-60 символов тега заголовка в результатах поиска,прежде чем обрезать его,поэтому обычно вам следует ориентироваться на теги заголовка,длина которых составляет около50 символов или меньше.

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

3.Используйте целевое ключевое слово(но не переусердствуйте).

Каждая страница вашего веб-сайта должна отвечать на вопрос или предоставлять ценную информацию,которую кто-то будет искать.Ваш веб-сайт будет более полезен для этих людей,если он появится в поиске по правильному запросу — именно тогда,когда они ищут информацию,которую вы предоставляете.Поэтому для каждой страницы вы должны иметь в виду целевое ключевое слово(или несколько).

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

4.Описывайте содержание страницы.

Когда ваша веб-страница появится в поисковых системах,многие люди решат,стоит ли на нее кликать,основываясь на теге заголовка.Если они нажмут и перейдут на веб-страницу,которая не соответствует их ожиданиям,исходя из заголовка,они,скорее всего,сразу же нажмут эту кнопку «Назад» и будут искать другой результат,чтобы попробовать.

Вы хотите,чтобы ваш тег заголовка давал точное описание того,что люди увидят,когда решат посетить веб-страницу.Когда ожидания людей совпадают с тем,что они видят на странице,это означает более низкий показатель отказов на веб-сайте и более длительное время,проведенное на сайте — показатели,которые сигнализируют Google о том,что ваша страница ценна и должна поддерживать высокий рейтинг.

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

5.Приведите(краткое)обоснование того,что находится на странице.

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

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

Теги заголовков:короткие,но мощные

Теги заголовков — короткая и поэтому обманчиво простая часть SEO.Просто потому,что они не требуют много написания,не думайте,что вы должны относиться к ним как к быстрому и легкому.Потратьте некоторое время,чтобы действительно подумать о том,какие слова лучше всего использовать,чтобы сообщить Google,о чем страница,и сообщить потенциальным посетителям,что на странице ценно.Ваш тег заголовка должен делать и то,и другое одновременно.Если вы все сделаете правильно,это может улучшить ваш рейтинг и повысить рейтинг кликов.

Не пропустите остальную часть нашей серии SEO 101!

Как работают поисковые системы?
Как писать метаописания
Какая структура URL лучше?
Передовой опыт по архитектуре веб-сайтов

Нужна помощь экспертов в улучшении вашего SEO рейтинга?Свяжитесь с экспертными службами SEOHostGator.

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

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

Потратьте время на оптимизацию изображений для SEO — это простой и важный шаг к тому,чтобы сделать ваш сайт более конкурентоспособным в поисковых системах.Это мелочь,которую многие компании упускают из виду,и именно поэтому ее выполнение может дать вам конкурентное преимущество в поиске ваших целевых ключевых слов в поисковой выдаче(страницы результатов поисковой системы).

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

Почему изображения важны для SEO

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

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

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

Изображения играют большую роль в том,как мы воспринимаем веб-страницу.Это важно для SEO,потому что алгоритм Google обращает внимание на поведенческие показатели,которые отражают пользовательский опыт,такие как показатель отказов и количество времени,которое посетители проводят на веб-странице.

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

12 советов по улучшению SEO для изображений

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

1.Используйте релевантные высококачественные изображения.

Это имеет решающее значение для пользовательского опыта SEO.Изображение,не имеющее отношения к содержимому страницы,будет сбивать с толку пользователя,а изображение,размытое или плохо обрезанное,просто сделает вашу страницу плохой и непрофессиональной.Убедитесь,что каждое изображение,которое вы используете,имеет четкую связь с тем,что находится на странице,и выглядит хорошо.

Вы должны быть осторожны,чтобы не использовать изображения,на которые у вас нет прав,но вы можете найти множество ресурсов в Интернете,которые предоставляют бесплатные изображения,которые могут использовать предприятия.А инструменты для самостоятельного проектирования,такие как Canva,теперь делают создание оригинальной графики доступным,быстрым и простым даже для недизайнеров.

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

2.Настройте имя файла.

Это один из тех шагов,которые настолько просты,что просто удивительно,как никто этого не делает.

Прежде чем добавить изображение на свой веб-сайт,уделите время настройке имени файла.Измените его на то,что имеет отношение к изображению и,если возможно,включает одно из ваших целевых ключевых слов для страницы.Например,если ваша веб-страница посвящена рюкзаку,который вы продаете,изображение можно назвать,например,brandname-backpack.jpg.

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

3.Используйте замещающий текст.

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

Этот текст является еще одной частью страницы,которую вы можете использовать,чтобы сообщить поисковым системам,о чем эта страница.Всегда обновляйте альтернативный текст для ваших изображений.Включите основное ключевое слово для страницы и описание самого изображения.Если вы используете WordPress,для этого вы можете заполнить альтернативное текстовое поле.

Если вы предпочитаете использовать HTML,вы можете добавитьalt="your alt text"к тегу изображения.

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

4.Добавьте подписи к изображениям.

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

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

В целом добавление подписей — хорошая идея,но нет единого четкого правила,как их лучше использовать.В некоторых случаях подписи могут быть хорошей возможностью добавить немного индивидуальности или вставить шутку.Если это улучшит взаимодействие с пользователем больше,чем добавление ключевого слова улучшит SEO,то это лучший вариант.Используйте свое лучшее суждение здесь.

5.Уменьшите размер файла изображения.

Вы выполняете тяжелую работу по поиску или созданию изображения,следующим шагом будет его загрузка на ваш сайт,верно?Еще не совсем.

Часто размер файла изображения намного больше,чем необходимо для размера,который он будет отображаться на вашем веб-сайте.Если вы потратите несколько секунд перед загрузкой,чтобы уменьшить размер файла,это не замедлит работу вашего сайта.Скорость сайта является фактором ранжирования SEO,поэтому,если вашим посетителям приходится некоторое время ждать загрузки страницы на вашем сайте,это плохо для пользовательского опыта и вашего SEO.

Если вы используете CMS,такую как WordPress,изменить размер изображения на вашем веб-сайте после его загрузки в CMS очень просто,но это означает,что у вас все еще будет большой размер файла,который замедляет работу серверной части.

Вы можете ускорить работу своего веб-сайта,по-прежнему отображая изображения с высоким разрешением,изменив размер файлов изображений перед их загрузкой на веб-сайт.Часто это легко сделать с помощью программ,которые входят в стандартную комплектацию большинства компьютеров,таких как программа Mac Preview или Microsoft Paint.Или,если у вас есть Adobe Photoshop,вы можете использовать команду «Сохранить для Интернета»,чтобы помочь вам найти файл наименьшего размера,который по-прежнему обеспечивает хорошее разрешение.

После изменения размера вы все равно можете уменьшить размер файла изображения без ущерба для качества путем сжатия.Воспользуйтесь такими инструментами,как TinyPNG и JPEGmini,чтобы упростить этот процесс.

6.Найдите правильное соотношение качества и размера.

Эта часть немного сложна,потому что вы хотите,чтобы ваши изображения выглядели действительно хорошо(см.«Высокое качество» в части № 1),но вы не хотите,чтобы они были достаточно большими,чтобы замедлить работу вашего сайта.

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

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

7.Выберите правильный тип файла.

Вы,наверное,заметили,что существует три основных типа файлов изображений,но вы,возможно,не совсем понимаете разницу между ними.Понимание различных типов файлов может помочь вам выбрать лучший для ваших нужд:

JPGявляется одним из наиболее распространенных форматов файлов,поскольку он использует файлы небольшого размера и широко поддерживается.Но качество изображения не всегда такое хорошее,как у файлов PNG,а формат не поддерживает прозрачный фон,поэтому в некоторых случаях JPG не работает.
PNG— это формат файла для изображений,обеспечивающий высокое разрешение и поддерживающий текстовое описание изображения,что хорошо для SEO.Основным недостатком PNG является то,что для него требуются файлы большего размера,чем для JPG и GIF.Часто это лучше всего подходит для сложных изображений и изображений,содержащих текст.
GIFне поддерживает такой широкий цветовой диапазон,как два других,но может быть хорошим выбором для более простых изображений.Он поддерживает небольшие размеры файлов и прозрачный фон.

Для фотографий часто хорошо подходит формат JPG.Для разработанной графики более распространены GIF и PNG,и если вам нужна версия более высокого качества,вам подойдет PNG.

8.Добавьте изображения на карту сайта.

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

Если вы используете WordPress,есть плагины,которые вы можете использовать для создания карты сайта для изображений,например Google XML Sitemap для изображений и Undira All Image Sitemap.Если вы предпочитаете делать это самостоятельно,Google предоставляет информацию о создании карты сайта для изображений здесь.

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

9.Используйте адаптивные изображения.

К настоящему моменту вы,наверное,уже все слышали об адаптивных веб-сайтах.Адаптация — лучший способ убедиться,что ваш веб-сайт хорошо выглядит на всех типах устройств,независимо от размера экрана,и при этом убедиться,что все пользователи видят одну и ту же информацию.Использование адаптивных изображений является частью этого.

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

Если вы услышали «HTML-код» и начали отключаться,не волнуйтесь.Если ваш сайт работает на WordPress,CMS позаботится об этом за вас.Пока вы используете WordPress 4.4 или более позднюю версию(которой вы определенно должны быть сейчас),к вашим изображениям будет автоматически применяться код srcset,и вам не нужно ничего делать.

10.Используйте ленивую загрузку.

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

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

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

Если вы используете WordPress,самый простой способ реализовать ленивую загрузку — это плагин.Ленивая загрузка — одна из многих функций,включенных в плагин JetPack,если вы хотите пойти по этому пути.Или вы можете рассмотреть тот,который просто обеспечивает ленивую загрузку,например a3 Lazy Load или Lazy Load.

11.Используйте схемы для продуктов и рецептов,где это уместно.

Разметка Schema — еще один инструмент,с помощью которого вы сообщаете Google,что находится на странице.Для определенных типов контента он предоставляет поисковым системам данные,которые помогают им предоставлять пользователям полезную информацию прямо в поисковой выдаче.

Когда вы ищете рецепт или продукт и рядом с результатом в Google видите звездный рейтинг,калории,цены или информацию об инвентаре,это происходит потому,что веб-сайт использует микроразметку.

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

12.Размещайте изображения на своем сайте.

Хотя может показаться заманчивым разместить свое изображение на стороннем веб-сайте,таком как Imgur,для экономии места,это сопряжено с реальным риском.В любое время,когда эти сайты перегружены трафиком,ваши изображения могут не загружаться,создавая путаницу на вашем веб-сайте и ухудшая внешний вид вашего бренда.

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

Уделите время SEO-оптимизации изображений

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

Кристен Хикс

Кристен Хикс — внештатный писатель из Остина и постоянно учится,постоянно стремясь узнавать что-то новое.Она использует это любопытство в сочетании со своим опытом работы в качестве внештатного владельца бизнеса,чтобы писать на темы,важные для владельцев малого бизнеса,в блоге HostGator.Вы можете найти ее в Твиттере по адресу@atxcopywriter.

How meta tagging benefits SEO

Strategy
Developers
Product
Partners
Blog Home

Strategy

Published

June 30,2022

Author

Bulent Yusuf

Что такое метатеги?

Мета-теги — это процесс добавления метаданных на веб-страницу для предоставления информации о содержимом страницы.Метатеги — это фрагменты HTML,предоставляющие информацию о документе в целом и о том,как он соотносится с другими документами.Используя функционал вашей контент-платформы,вы можете легко редактировать метатеги страниц вашего сайта(подробнее об этом в конце этой статьи).

Как работают метатеги?

Когда вы добавляете метатег на веб-страницу,вы добавляете информацию в код HTML,всегда в разделе заголовка между открывающим и закрывающим тегами заголовка.Эти теги HTML используются поисковыми системами для индексации и понимания содержимого страницы.Их следует использовать всегда,даже если вы используете другие формы разметки,такие как схема.

Простой пример мета-тегов,написанный для этого сообщения в блоге.

С точки зрения поисковой системы

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

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

Типы метатегов

Давайте углубимся в наиболее распространенные типы метатегов и их влияние на SEO страницы.

1.Тег заголовка

Тег заголовка страницы — это метатег,который отображается на вкладке браузера и на страницах результатов поисковой системы(SERP)в качестве заголовка листинга.Тег title может быть оптимизирован для SEO независимо от заголовка на странице(или h2),но в идеале они очень похожи или идентичны.

Длина метатега заголовка должна составлять около 55 символов,включая пробелы,и он должен включать основное ключевое слово страницы или ключевую фразу.Размещение ключевого слова в начале тега заголовка придаст ему больший вес.

Оптимизация тегов заголовков может иметь огромное значение для вашей эффективности SEO.После того,как вы поставите свой сайт на прочную техническую основу,особенно когда речь идет о Core Web Vitals,и вы определите основную ключевую фразу для каждой из ваших основных страниц,изменение тегов заголовков даст вам самые быстрые улучшения рейтинга,потому что содержание Тег title по-прежнему является одним из важнейших факторов ранжирования в алгоритме Google.

2.Мета-тег описания

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

Включение вашего основного ключевого слова или фразы в мета-тег описания может помочь повысить рейтинг кликов(CTR),что,конечно же,повысит посещаемость сайта и,возможно,продажи.Хотя Google это отрицает,многие SEO-специалисты считают,что увеличение CTR со временем также поможет повысить рейтинг.Поэтому не пренебрегайте своими мета-описаниями и относитесь к ним как к рекламному пространству.Расскажите пользователям,почему посещение вашей страницы будет им выгодно.Всегда помните,что люди используют поисковые системы,чтобы найти ответ на вопрос или решение проблемы.

3.Метатег robots

Метаатрибут robots — это метатег,который сообщает поисковым роботам,следует ли индексировать ваш веб-сайт и его содержимое.В большинстве случаев для метатега робота установлено значение «index,follow» или «noindex,nofollow»,хотя в определенных обстоятельствах могут иметь смысл и другие комбинации,такие как «noindex,follow».

Если ваша страница не проиндексирована Google,первым делом нужно проверить метатег robots.Особенно после миграции сайта неправильная настройка метатега robots является проблемой,с которой часто сталкиваются.Метатег robots также намного эффективнее файла robots.txt,особенно если вы хотите,чтобы страницы были удалены из индекса Google.

4.Канонический тег

Канонический тег — это метатег,который сообщает поисковым системам,какую версию веб-страницы следует индексировать,если есть очень похожие страницы,что часто имеет место на веб-сайтах электронной коммерции,которые также используют нумерацию страниц или фильтры продуктов.как порядок сортировки на страницах категорий.Использование этого тега позволит избежать проблем с дублированием контента.

Тег canonical должен быть установлен на URL-адрес веб-страницы,которую вы хотите проиндексировать.Каждая страница должна иметь канонический тег,даже если он содержит URL-адрес страницы,на которой она находится,что на самом деле чаще всего и происходит.Это поможет канонизировать URL-адреса с добавленными параметрами,например,для целей отслеживания рекламы,а также поможет Google и другим поисковым системам понять,предпочитаете ли вы свой веб-сайт с www.

Убедитесь,что ваши XML-карты сайта содержат только канонические URL-адреса.Если они этого не сделают,Google может полностью отклонить их.

5.Тег hreflang

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

Начните использовать метатеги в Contentful

Настроить метатеги в Contentful очень просто!Узнайте,как внедрить метатеги и другие советы по оптимизации,в нашем посте о CMS SEO или зарегистрируйте бесплатную учетную запись Contentful,чтобы начать работу сегодня.

Часто задаваемые вопросы(FAQ)

Хотите узнать больше о метатегах?Вот несколько полезных ответов,которые помогут вам встать на правильный путь.

В.Какие бывают типы метатегов?

Наиболее распространенными типами метатегов являются тег заголовка,метатег описания,метатег robots,канонический тег и тег hreflang.

В.Почему так важны метатеги?

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

В.Какой метатег наиболее важен для SEO?

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

Темы

SEOCreator

Об авторе

Бюлент Юсуф

ВЕБ-САЙТ

GITHUB

TWITTER

Начните бесплатно

Зарегистрируйте бесплатную учетную запись Contentful за считанные минуты.

Начало работы

Не пропустите последние новости

Получайте обновления на свой почтовый ящик

Узнайте,как улучшить цифровые впечатления с помощью Contentful.

Узнайте больше

Стратегия

Как системное мышление влияет на создание хорошего контента и дизайна

21 апреля 2022 г.Крис Страл

Стратегия

Четыре принципа,которыми руководствовалось Fitch Ratings при переходе на контентную платформу,ориентированную на API

12 мая 2022 г.