WebSlon

https://webslon.by/ - WebSlon

Важнейшие HTML-теги для для оптимизации сайта

Главная >> Наш блог >> Важнейшие HTML-теги для для оптимизации сайта

Свяжитесь с нами сейчас

Наши специалисты ответят на все интересующие Вас вопросы

или заполните форму обратного звонка и мы сами свяжемся с Вами

Важнейшие HTML-теги для для оптимизации сайта

Важно ли то, что у вас в голове? Согласны, вопрос дурацкий; конечно же, важно, ведь в ней полно изученных и неизученных возможностей мозга. А следите ли вы за своим телом? Можно было не спрашивать, потому что конечно да, и гамбургеры вы всегда запиваете колой без сахара.

А что насчет разделов <head> и <body> в HTML-документе вашего сайта? Следите ли вы за их содержанием и состоянием? И надо ли вообще это делать? Важно ли их содержимое для поисковиков?

Давайте попробуем собрать все доступные на сегодняшний день данные, чтобы получить представление о значимости HTML-тегов для SEO.

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

HTML-теги — это…

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

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

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

Важны ли HTML-теги сейчас?

За последние годы влияние HTML-тегов на рейтинги снизилось. Сегодня веб-мастера могут даже отказаться от использования некоторых тегов в HTML без существенных последствий.

Тем не менее, некоторые теги по-прежнему:

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

Вы можете спросить: так какие же теги могут нам в этом помочь? Давайте подробно разберем каждый из них.

Раздел <Head>

1. Тег заголовка

Что это такое?

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

Значимость для SEO

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

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

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

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

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

В чем же проблема?

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

Почему так происходит:

  • Заголовок переполнен ключевиками — конечно, заголовок нужно оптимизировать по ключевым словам, но важно при этом не переусердствовать. В противном случае Google перепишет ваш заголовок так, как посчитает нужным.
  • Заголовок не соответствует запросу — Google может отобразить вашу страницу в ответ на определенный запрос, даже если заголовок ему не соответствует. В этом случае заголовок иногда переписывается для страницы результатов выдачи. Конечно, нельзя составить заголовок, который будет соответствовать всем возможным запросам. Тем не менее, если вы видите, что Google изменяет ваш заголовок при получении объемных запросов, задумайтесь над тем, чтобы его изменить.
  • Альтернативные заголовки — Facebook и Twitter используют собственные теги в разделе <head>, поэтому если вы используете альтернативные заголовки в этих социальных сетях, Google также может использовать их вместо вашего тега заголовка.

Способы оптимизации

Вам нужно кое-что знать: оптимизировать заголовки на самом деле легко! Вот несколько советов о том, как создать заголовок, который точно понравится Google:

  • Длина заголовка

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

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

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

Для проверки заголовков откройте проект в WebSite Auditor или создайте новый проект, выберите Content Analysis > Page Audit > Content optimization и проанализируйте раздел Title.

Важнейшие HTML-теги для для оптимизации сайта

В приложении можно также отредактировать заголовок и увидеть, как он будет отображаться на странице выдачи. Откройте Content Editor > Titles & Meta tags и придайте вашему заголовку эффектный вид:

Важнейшие HTML-теги для для оптимизации сайта
  • Ключевики для заголовка

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

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

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

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

  • Бренд в заголовке

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

2. Тег мета-описания

Что это такое?

Мета-описание представляет собой короткий абзац текста в разделе HTML <head> страницы. Как правило, оно отображается в сниппете на странице результатов выдачи после названия и URL сайта. В HTML тег имеет следующий вид: <meta name="description" content="Ваше потрясающее описание">

Значимость для SEO

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

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

Мета-описание отображается в двух местах с максимальной видимостью:

  • Страница выдачи — мета-описание занимает большую часть сниппета в выдаче;
  • Социальные сети — мета-описание обычно отображается, когда пользователи делятся вашим URL в социальных сетях.

В чем же проблема?

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

Судя по всему, мета-описания зависят от запросов еще сильнее, чем заголовки. В одной из сессий в Hangout Джон Мюллер заявил, что Google адаптирует описание на основании запроса пользователя.

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

Не существует способов решить эту проблему, поскольку невозможно составить описание, которое будет совпадать со всеми запросами. Лучшее, что вы можете сделать — составить описание, наилучшим образом соответствующее контенту на вашей странице.

Способы оптимизации

  • Длина мета-описания

Не так давно длина мета-описания должна была составлять около 160 символов, чтобы оно полностью отображалось в сниппете на странице выдачи. Затем это значение постепенно увеличилось до 300 символов. Наконец, в декабре 2017 года возможная длина сниппета превысила 300 символов.

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

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

Вы можете просмотреть ваши мета-описания в WebSite Auditor. В проекте нажмите Content Analysis > Page Audit > Content optimization и проанализируйте раздел Meta tags.

Важнейшие HTML-теги для для оптимизации сайта

В приложении можно также отредактировать описание и увидеть, как оно будет отображаться на странице выдачи. Откройте Content Editor > Titles & Meta tags и поэкспериментируйте с вашим описанием:

Важнейшие HTML-теги для для оптимизации сайта
  • Мета-описание как реклама вашей страницы

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

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

Важнейшие HTML-теги для для оптимизации сайта
  • Отсутствие кавычек в мета-описании

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

  • Микроразметка Schema.org

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

Важнейшие HTML-теги для для оптимизации сайта

Благодаря Google вам не обязательно быть веб-разработчиком для того, чтобы разметить структурированные данные на сайте. Вы можете использовать Structured Data Markup Helper. Перед тем, как добавить разметку в HTML-код ваших страниц, обязательно просмотрите предварительную версию сниппетов, скопировав и вставив исходный код страницы в Google’s Testing Tool.

3. Теги Open Graph

Что это такое?

Теги Open Graph (OG) представляют собой дополнительные мета-теги в разделе <head>, позволяющие любой странице стать объектом с дополнительными данными в социальных сетях. Они были впервые использованы Facebook в 2010 году и впоследствии были приняты на вооружение другими крупными социальными медиа (LinkedIn, Google+ и т.д.)

В HTML тег может иметь следующий вид: <meta name="og:title" property="og:title" content="Ваш восхитительный заголовок Open Graph">

Значимость для SEO

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

Способы оптимизации

Перед добавлением тегов OG в HTML следует подумать насчет оптимизации. Существует несколько разных тегов Open Graph; ниже описаны самые важные и популярные из них.

Важнейшие HTML-теги для для оптимизации сайта
  • OG title

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

Помните, что его длина должна быть в пределах 60-90 символов; в противном случае он может быть обрезан.

  • OG type

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

Этот тег считается значимым, если на вашей странице есть кнопка Like. Он помогает определить, будет ли ваш контент рекомендован пользователю Facebook, если пользватель «лайкнет» этот контент.

В большинстве случаев тип объекта (тот самый OG type) — это сайт, поскольку вы в основном делитесь ссылками на сайты. В этом случае тип не нужно указываться в коде; он будет считываться по умолчанию.

  • OG description

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

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

Считается, что подходящая длина для такого описания — около 200 символов.

  • OG image

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

Очевидно, что изображение должно привлекать взгляд и вызывать соответствующие ассоциации. Вы можете поместить текст над OG-изображением, чтобы подчеркнуть основную идею вашего контента или призвать пользователя к действиям. Постарайтесь разместить текст (или его самую важную часть) в середине изображения — Facebook, например, часто обрезает края превью.

Рекомендуемое разрешение OG-изображения — 1200×627 пикселей, размер –до 5 Мб.

Закончив работу с мета-тегами OG, вы можете просмотреть результат с помощью Open Graph Object Debugger — инструмента, созданного Facebook.

  • Twitter cards

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

Важнейшие HTML-теги для для оптимизации сайта

Существует несколько типов Twitter-карточек:

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

    Заголовок: 70 символов
    Описание: 200 символов
    Изображение: 120×120 пикселей, до 1 Мб
  • Summary card с большим изображением — аналогична предыдущему типу, но содержит изображение большего размера. Изображение также может содержать текст, передающий основную суть контента на вашей странице, призывающий к действию или провоцирующий пользователя на переход по ссылке.

    Заголовок: 70 символов
    Описание: 200 символов
    Изображение: 280×150 пикселей, до 1 Мб
  • Player cards — эти карточки позволяют пользователю воспроизводить видео или аудио в твите.

    Описание: 200 символов
    Видео: H.264, базовый профиль, уровень 3.0, до 640 x 480 пикселей при 30 кадрах в секунду.
    Аудио: AAC, Low Complexity Profile
  • Карточки приложений — позволяют пользователям скачивать мобильные приложения прямо из твита. Они содержат имя, описание, иконку, рейтинг и цену.

    Заголовок: берется из идентификатора приложения
    Описание: 200 символов
    Изображение: берется из идентификатора приложения

Примечание: Вы можете использовать только один тип карточек на страницу.

После завершения работы с элементами Twitter-карточки нужно сделать две вещи:

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

4. Тег Robots

Что это такое?

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

В HTML тег может иметь следующий вид: <meta name="robots" content="index, follow">

Значимость для SEO

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

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

Способы оптимизации

  • Корректное использование тега robots

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

Кроме того, если какая-либо страница находится в разделе, защищенном от обхода файлом robots.txt, любой тег robots в HTML этой страницы будет игнорироваться.

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

Google понимает и принимает во внимание следующие параметры, которые вы можете задать в вашем теге robots:

  • Noindex — предотвращает индексацию страницы поисковиками;
  • Nofollow — запрещает поисковику переходить по ВСЕМ ссылкам на странице (в этом его отличие от атрибута nofollow, который применяется на уровне отдельных URL);
  • Noarchive — предотвращает отображение кэшированной копии страницы в результатах поиска;
  • Nosnippet — предотвращает отображение описания страницы в результатах поиска, а также кэширование страницы;
  • None — то же самое, что «noindex, nofollow».

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

  • Тег Robots и безопасность

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

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

5. Тег canonical

Что это такое?

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

В HTML он может иметь следующий вид: <link href="URL" rel="canonical">

Значимость для SEO

Тег canonical важен для SEO по двум причинам.

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

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

Способы оптимизации

Откройте проект в WebSite Auditor, нажмите Site Structure > Site Audit и обратите внимание на раздел On-page, в частности — на пункты Duplicate titles и Duplicate meta descriptions.

Важнейшие HTML-теги для для оптимизации сайта

Если несколько URL на вашем сайте содержат идентичный контент, задайте элемент <link rel=»canonical»> в разделе <Body>.

продолжить читать статью можно по ссылке —> https://www.seopowersuite.ru/seo-articles/html-tags-for-seo.html

Заказать сайт в Бресте
Продвижение сайта Минск
Разработка сайта в Барановичах
Сайт для строительной компании в Минске

Заказать звонок