Html: теги

Атрибуты http-equiv и content тега

Атрибут content используется в паре не только с атрибутом name, но и
с атрибутом http-equiv, который применяется для конвертирования метатега в заголовок
HTTP. Заголовки представляют собой текстовые строки, которые используются при обмене сообщениями браузера с сервером
и состоят из пар имя: значение (разделяются двоеточием). Сам атрибут http-equiv
задает имя пары, аналогично атрибуту name, а атрибут content, соответственно,
значение пары: <meta http-equiv=»имя http-заголовка» content=»значение»>. Однако в одном элементе
«meta» допускается использовать только один из атрибутов: или name или
http-equiv. Браузеры преобразовывают значение атрибута http-equiv, заданное с
помощью атрибута content, в формат заголовка HTTP-ответа и обрабатывают их так,
как будто они прибыли непосредственно от сервера. Атрибут может принимать значения:

• default-style – указывает предпочтительный для данной страницы стиль; при этом
  атрибут content должен содержать
  id элемента
  <link>, ссылающегося на требуемую внешнюю таблицу стилей, или элемента
  <style>, содержащего требуемую внутреннюю таблицу стилей;
• refresh – задает время в секундах до перезагрузки страницы (например,
  <meta http-equiv=»refresh» content=»15″>) или перенаправления на другую
  страницу, если атрибут content содержит целочисленное положительное число (время в секундах), после
  которого идет строка с корректным url-адресом (например,
  <meta http-equiv=»refresh» content=»15; url=httрs://site.com»>).

Атрибуты

charset:

Указывает кодировку символов для текущего HTML-документа. Чаще всего используется кодировка UTF-8.

Тег с атрибутом charset лучше всего располагать в качестве первого дочернего элемента внутри элемента

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

content:

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

http-equiv:

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

default-style: указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента , который ссылается на таблицу стилей CSS, или идентификатор элемента

Тег <meta> так же поддерживает Глобальные атрибуты

Schema.org для описания контента

Schema.org предоставляет схемы для структурированных данных в Интернете.

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

Рассмотрим пример статьи в блоге:

<article itemscope itemtype="http://schema.org/BlogPosting">
    <meta itemprop="image" content="http://yoursite.com/image.jpg">
    <img src="http://yoursite.com/image.jpg">

    <h1 itemprop="name headline">Тайтл статьи</h1>

    <p>
        <time datetime="date_to_xmlschema" itemprop="datePublished">Apr 4, 2016</time>

        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name">Имя автора статьи</span>
        </span>
    </p>

    <div itemprop="articleBody">
        <!—Тело статьи -->
    </div>
</article>

Используйте атрибут itemscope, чтобы обозначить начало нового объекта schema.org. itemtype определяет тип элемента, начинающегося с itemscope. Используйте атрибут itemprop в пределах открывающегося и закрывающегося тегов элемента с атрибутом itemscope.

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

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

Мета тег nofollow

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

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

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

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

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

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

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

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

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

Мета тег robots

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

<meta name=”robots” content=”noindex, nofollow” />

This meta tags tells search engines not to index the page and prevent them from following the links. If you happen to be using two contradictory terms (e.g. noindex and index), Google will choose the most restrictive option.

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

Теги верификации

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

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

Позвольте мне объяснить.

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

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

Самый простой вариант доказать право собственности на сайт — это метатег. Коды верификации предоставляются Google Search Console, и т.д.

Добавим в наш пример использования мета-теги для сайта, код в котором значение поля Content является кодом верификации, предоставляемым Google Search Console:

<!DOCTYPE html>
<html>
    <head>
        <!—Кодировка символов UTF8 -->
        <meta charset="utf-8">
        <!—Установка ширины страницы на ширину для устройства с масштабом 1 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!—Тайтл страницы заключается в тег <title> -->
        <title>Это тайтл вашей страницы</title>
        <!—Описание страницы определяется в мета-формате -->
        <meta name="description" content="Это описание вашей страницы">
<!—Верификация сайта в Google -->
        <meta name="google-site-verification" content="59408yhfuhfjskdlhfasdhfuoyHJHLJHK__Random__BLAH_BLAH" />

    </head>

    <body>
        <!—Содержимое страницы... -->
    </body>
</html>

Ключевые слова и их значение для оптимизации

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

Важно учитывать, что одни и те же слова не должны повторяться более трех раз, иначе сайт будет помечен как “спам”. Общее их количество – 50

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

Attribute Values

❮ HTML <meta> tag

Attribute Values

❮ HTML <meta> tag

Группа значений атрибута NAME

«keywords» (ключевые слова)

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

Если раньше «keywords» имел определённую роль в ранжировании сайта, то в последнее время поисковые системы относятся к нему нейтрально.

HTML-код с «keywords»:

«description» (описание страницы)

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

Таким образом, правильный description обязательно должен содержать ключевое слово, коротко и точно описывать то, о чём данная веб-страница. «Description» вместе с «title» образуют очень важную пару значений, от которых зависит то, перейдёт пользователь из поисковой выдачи на веб-страницу или нет! Поэтому «description» и «title» нужно прописывать для каждой веб-страницы!

HTML-код с «description»:

«Author» и «Copyright»

Эти значения, как правило, не используются одновременно. Функция author и copyright — идентификация автора или принадлежности контента на странице. «Author» содержит имя автора веб-страницы, но в случае, если веб-сайт принадлежит какой-либо организации, целесообразнее использовать значение «Copyright».

HTML-код с «author»:

«Robots»

Robots — формирует информацию о гипертекстовых документах, которая поступает к роботам поисковых систем.

У «robots» могут быть следующие значения:

• index — страница должна быть проиндексирована;
• noindex — страница не индексируется;
• follow — гиперссылки на странице учитываются;
• nofollow — гиперссылки на странице не учитываются
• all — включает значения index и follow, включен по умолчанию;
• none — включает значения noindex и nofollow.

HTML-код с «robots»:

Мета теги заголовков (H1-H6)

Теги подзаголовков – это HTML-теги, используемые для отграничения заголовков и подзаголовков в вашем контенте от других типов текста (например, текста абзаца). Использование heading tags в наши дни является темой многих споров.

Хотя теги H2-H6 считаются не столь важными для поисковых систем, правильное использование тега H1 подчёркивалось во многих отраслевых исследованиях. В то же время Джон Мюллер не устаёт повторять, что подзаголовки вообще не являются факторами ранжирования.

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

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

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

Оптимизация подзаголовков

Заголовки должны соответствовать тому фрагменту текста, который они описывают

То, что они не являются фактором ранжирования (по словам Мюллера), не означает, что поисковые системы не принимают их во внимание.
Заголовки всегда должны отражать тональность текста, над которым они расположены. Избегайте заголовков вроде «Глава 1… Глава 2… Глава 3…».
Не злоупотребляйте тегами и ключевыми словами в них

Подзаголовки должны быть понятны простым людям.

Должны ли совпадать мета-теги title и H1?

Согласно официальным рекомендациям Google по созданию статей, название страницы (в HTML-теге <title>), на которой размещён материал, должен совпадать с заголовком статьи (в теге <h1> или аналогичном). Так что здесь можно обойтись одним и тем же текстом для обоих элементов.

Другие возможности http-equiv

Но атрибут http-equiv можно использовать еще одним интересным образом: при использовании значения refresh браузер будет обновлять страницу через какой-то определенный промежуток времени. Например, можно указать “5 секунд” в атрибуте content. Тогда содержимое документа будет обновляться и изменяться, если оно не статическое. Для проверки работоспособности этого варианта использования http-equiv добавляется возможность перехода на другую веб-страницу. Для того чтобы это сделать, в значении атрибута content после таймера, в котором указывается промежуток времени для обновления, добавляется адрес другой страницы. Тогда, после обновления страницы, через 5 секунд будет совершен переход на другой адрес, и откроется указанная в атрибуте ссылка.

HTML Теги

<!—…—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Мета теги для социальных сетей

Open Graph был первоначально представлен Facebook, чтобы вы могли контролировать, как страница будет выглядеть при публикации в социальной сети. Сегодня эта разметка поддерживается большинством популярных соцсетей и мессенджеров: ВКонтакте, Твиттер, LinkedIn, Телеграм, Viber, Slack и др.

Вот основные теги Open Graph:

• og:title – здесь вы помещаете заголовок, который будет отображаться при ссылке на вашу страницу.
• og:url – URL вашей страницы.
• og:description – описание вашей страницы. Помните, что, например, Facebook будет отображать всего около 300 символов описания.
• og:image – здесь вы можете поместить URL-адрес изображения, которое будет отображаться при ссылке на вашу страницу.

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

Как внедрить мета теги для социальных сетей

• Добавьте базовые и дополнительные метаданные, используя протокол Open Graph, и проверьте URL-ы, чтобы увидеть, как они будут отображаться.
• Настройте карточки для Твиттера и просмотрите результат.
• Дополнительную справку по мета тегам семантической разметки страниц можно получить в Яндексе.
• В Яндекс Вебмастере есть отдельный инструмент (валидатор) для проверки микроразметки, который подходит и под Open Graph.
• Для WordPress существует множество готовых решений. Я, например, использую плагин Yoast SEO.