Html мета-теги
Содержание:
Другие метатеги
Есть еще несколько метатегов, которые нужно добавлять на все веб-страницы в разделе <head>:
charset определяет кодировку символов HTML-документа. Браузер использует эту информацию, чтобы правильно отобразить страницу.
http-viewport задает видимую пользователю область веб-страницы. Этот метатег был введен в адаптивном веб-дизайне. Он позволяет контролировать начальные размеры окна просмотра и их изменение при загрузке страницы.
Давайте расширим наш предыдущий пример:
<!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="Это описание вашей страницы">
</head>
<body>
<!—Содержимое страницы... -->
</body>
</html>
Существуют и другие менее используемые мета теги для сайта интернет магазина. Наиболее важные из них: robots, и http-equiv. Мы должны упомянуть еще одну важную часть метаинформации, хотя она не задается в виде тега. Атрибут изображений alt описывает содержимое картинок на сайте.
alt — это единственный способ продвинуть изображения в поиске. Компьютеры еще не распознают графического содержимого, поэтому мы должны сообщить им, что изображено на картинке. Именно по этой причине атрибут alt является обязательным для всех изображений.
Атрибут charset тега
Со служебным тегом <meta>
(от англ. metadata – метаданные)
мы уже кратко знакомились. Он формирует пустой элемент разметки «meta», который используется для хранения метаданных.
Для сообщения браузеру кодировки документа применяется атрибут charset.
О кодировках мы будем говорить отдельно, пока следует запомнить, что если кодировку не задать, то документ может быть не правильно отображен.
Поэтому в процессе верстки нужно всегда использовать элемент «meta» и указывать в нем атрибут
charset=»utf-8″. В случае необходимости, разрешается использовать более одного элемента
«meta», но атрибут charset должен задаваться только один раз в одном из элементов
«meta».
HTML Ссылки
HTML по АлфавитуHTML по КатегориямHTML Атрибуты ТеговHTML Атрибуты ГлобалHTML Атрибуты СобытийHTML ЦветаHTML ХолстыHTML Аудио / ВидеоHTML Наборы символовHTML DOCTYPEsHTML Кодирование URLHTML Языковые кодыHTML Коды странHTTP Ответы сервераHTTP МетодыPX в EM конвертерГорячие клавиши
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>
<menu>
<menuitem>
<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>
<wbr>
Viewport мета тег
Метатег Viewport позволяет вам настроить, как страница будет масштабироваться и отображаться на любом устройстве. Обычно этот тег и его значение выглядят следующим образом:
Где «width=device-width» заставляет страницу соответствовать ширине экрана в пикселях, независимо от устройства, а «initial-scale=1» устанавливает соотношение 1:1 между пикселями CSS и пикселями устройства, с учётом ориентации экрана.
Этот тег легко добавить, и одного скриншота из Google достаточно, чтобы показать разницу:
Мета тег Viewport не имеет ничего общего с ранжированием, но напрямую влияет на пользовательский опыт
Это особенно важно, учитывая разнообразие устройств, которыми люди пользуются в настоящее время, и знаменитый переход Google на индексирование с приоритетом мобильного контента
Как и в случае со многими тегами и настройками, которые мы с вами обсуждали в этой статье, заботу о метатеге области просмотра ваши пользователи по достоинству оценят. В противном случае ждите ухудшения показателя отказов и негативных отзывов.
Мета теги для социальных сетей
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.
Мета-теги технического плана
Эти элементы используются для внутренней оптимизации сайта. Они отвечают за передачу информации пользователям и содержат некоторые команды для поисковых роботов (например, позволяют закрыть от индексации отдельные страницы или разделы). Рассмотрим основные технические мета-теги:
Content-language
Передают информацию о том, на каком языке представлено содержимое страницы. Сейчас поисковые боты и браузеры научились автоматически определять язык. Однако при неправильных настройках этот тег окажется полезным.
Content-type
Содержит данные о типе документа и кодировке. Браузер не всегда правильно определяет кодировку с содержанием на кириллице. Переключить кодировку вручную нельзя, поэтому пользователь не получит доступ к контенту. Наличие этого тега решает ситуацию.
Robots
Тег указывает поисковым роботам, какие страницы индексировать, а какие — нет. Можно избирательно закрывать от индексации контент, ссылки, картинки для Google или Яндекс.
Чтобы тег правильно восприняли поисковые роботы, содержимое атрибута должно включать одну или несколько директив:
- index/noindex – указывает боту индексировать или не индексировать ссылки на странице.
- follow/nofollow – анализировать или не учитывать ссылки на странице.
- all/none – индексировать страницу или нет.
- noimageindex – не индексировать картинки на странице.
- noarchive – говорит поисковому роботу, чтобы он не выводил в поисковой выдаче ссылки «Сохраненная копия». Так пользователи не смогут посмотреть копию страницы из базы поисковой системы, если вдруг сайт будет недоступен или страница удалена.
- nosnippet – команда запрещает вывод сниппета в поисковой выдаче.
Refresh
Тег используется для автоматического обновления страницы или переадресации на другой раздел/сайт. Можно задавать время, когда произойдет это обновление или переадресация: 5 сек, 10 сек и так далее.
Актуально при обновлении ресурса: вместо ожидания долгой загрузки или ошибки 404 пользователь перенаправляется в новый раздел, что сокращает количество отказов.
Copyright и Meta Author
Он не участвует в формировании сниппета (не путайте с микроразметкой Schema.Org), а используется для указания автора и авторских прав.
Нужны ли метатеги?
Поисковые системы, такие как Google и Yandex, понимают содержание ряда метатегов и учитывают их при ранжировании сайта. Список метатегов, которые используют поисковые машины:
- Yandex
Перечислим основные метатеги для поисковых систем:
- title;
- description;
- keywords;
- robots.
Метатег robots
Метатег robots управляет индексацией страниц сайта. Данный метатег может иметь несколько значений, которые записываются в атрибут content:
- NOINDEX — запрещает индексирование страницы;
- NOFOLLOW — запрещает проход по ссылкам, имеющимся на странице;
- INDEX — разрешает индексирование страницы;
- FOLLOW — разрешает проход по ссылкам;
- ALL — равносильно INDEX, FOLLOW;
- NONE — равносильно NOINDEX, NOFOLLOW.
Метатег keywords
Keywords — список ключевых слов, которые соответствуют сущности (содержимому) страницы. Много о данном метатеге говорить не будем: как показывает практика можно оставлять его пустым или вовсе не использовать.
Заявление Google об использовании метатегов:
А теперь перейдем к самому важному, разберем главные метатеги для SEO продвижения и ответим на популярные вопросы которые нам задают
Что такое title страницы на самом деле
Title — это прежде всего заголовок документа, который отображается в название окна браузера, но так исторически сложилось, что стало привычней относить его к метатегам.
Для чего нужен Title?
Title —чуть ли не самый важный тег для поисковой оптимизации, имеет большое значение для поисковых систем, а также отображается в результатах поисковой выдачи.
Для Яндекса — 80 символов, 15 слов.
Для Google — 70 символов, 12 слов.
Что должно быть в title?
Title неприменно должен содержать в себе ключевые слова, тоесть запросы по которым вы хотите видеть себя в ТОП-е.
Приведем пример тайтл:
Основные ключевые запросы:
бахилы цена
бахилы оптом
купить бахилы
у вас возникнут вопросы по подобию:
- Как правильно составить тайтл?
- Можно ли в title ставить цену?
- и тд.
Получить ответы на вопросы можно путем анализа title в Топ по вашим запросам. Просмотрите как выглядит выдача поисковика, зайтите в ТОП 10 сайтов и проанализируйте Title. Только после этого можно грамотно составить title.
Description сайта: что это такое
Мета тег description используется для описания содержания страницы. Иногда поисковики используют его для формирования сниппета (то, что вы видите под ссылкой на страницу в выдаче). Тег description — служебная информация, поэтому он никоим образом не может повлиять на внешний вид страницы.
Как писать description что должно быть в description?
Рекомендуемая длина —150-200 символов. Именно такой объем помещается под ссылкой на страницу в поисковой выдаче. Конечно, можно написать и побольше, но в таком случае описание будет выглядеть незавершенным.
Также дескрипшн должен содержать ключевые фразы, по которым продвигается оптимизируемая страница. Самые частотные ключи следует расположить в начале
Важно: употребляйте не больше 3-х ключевых фраз и не повторяйте одно и то же слово больше 5 раз.
Тег description должен быть уникальным, т.е отличным от title и от описаний других страниц сайта. Также не советуем копировать какие-либо части текста со страницы (даже особо удачные) и вставлять их в мета-тег.
Самое главное при написании дискрипшена — точность
Вы должны лаконичино и емко описать содержание страницы и сделать ее привлекательной для пользователя (для чего, собственно, нужен description).
Как посмотреть description страницы?
Способ первый — открыть код элемента и отыскать информацию о метатегах в нем. Способ второй — скачать Netspeak Spider, вставить урл интересующего сайта и в течение минуты получить информацию об описаниях каждой страницы. Очень удобно, когда ищешь дубли.
Атрибуты
charset:
Указывает кодировку символов для текущего HTML-документа. Чаще всего используется кодировка UTF-8.
Тег с атрибутом charset лучше всего располагать в качестве первого дочернего элемента внутри элемента
. Чтобы текст на странице отображался корректно, кодировка, указанная в значении атрибута должна совпадать с кодировкой самого документа.
content:
Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name, в зависимости от их значения.
http-equiv:
Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте.
Возможные значения атрибута:
default-style: указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента , который ссылается на таблицу стилей CSS, или идентификатор элемента
Тег <meta> так же поддерживает Глобальные атрибуты
Атрибуты
- charsetHTML5
- Указывает кодировку символов для текущего HTML-документа. Авторам рекомендуется использовать значение UTF-8.
Тег <meta> с атрибутом charset лучше всего располагать в качестве первого дочернего элемента внутри элемента <head>. Чтобы текст на странице отображался корректно, кодировка, указанная в значении атрибута должна совпадать с кодировкой самого документа. - content
- Устанавливает значение атрибута, заданного с помощью name или http-equiv.
- http-equiv
- Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: — указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей. — указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка «url=адрес_страницы».
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url: - name
-
Обеспечивает дополнительное описание тега. Если этот атрибут опущен, он считается эквивалентным атрибуту . Не должен использоваться в случае, если для элемента уже заданы атрибуты , или . — указывает название веб-приложения, используемого на странице. — используется для указания имени автора веб-страницы:
— является описанием страницы, оно чаще всего используется поисковыми системами для определения, чему та посвящена, например:
— указывает один из пакетов программного обеспечения, используемого для создания документа, например:
— содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:— предотвращает кэширование страницы браузером, например:
— может быть использован для указания того, когда у страницы должен истечь срок актуальности (и она
должна быть удалена из кэша), например:
— показывает, должны ли поисковые системы включать данную страницу в результаты поиска. Например, значение устанавливает, что поисковые системы могут включать данную страницу в результаты поиска, но не должны показывать страницы, на которые ведут ссылки с нее:— позволяет разработчикам управлять размером исходной области просмотра на различных устройствах:
width=device-width — указывает браузеру задать ширину области просмотра равную ширине экрана устройства какой бы она ни была;initial-scale=1.0 — устанавливает начальный уровень масштабирования при первой загрузке страницы браузером. - scheme
- Указывает полезную информацию о схеме или названии самой схемы, которая должна быть использована для уточнения значения свойства атрибута content.
Элемент поддерживает глобальные атрибуты и события.
Мета тег link rel canonical
Тег link rel=”canonical” – это способ сообщить поисковым системам, какую версию страницы вы считаете основной и хотели бы, чтобы её индексировали поисковые системы и находили люди.
Он обычно используется в тех случаях, когда одна и та же страница доступна по нескольким разным URL-адресам или несколько разных страниц имеют очень похожий контент, охватывающий одну и ту же тему.
Внутренний дублированный контент на сайте не рассматривается поисковиками так же строго, как скопированный у конкурентов, поскольку обычно за этим не скрывается никаких манипулятивных целей.
Выбранный URL сканируется чаще остальных, и риск штрафа практически отсутствует, но такое положение дел далеко не оптимально.
Ещё одно преимущество заключается в том, что канонизация страницы упрощает отслеживание статистики, связанной с контентом.
Кроме всего прочего, Джон Мюллер также упоминает, что использование rel=canonical для дублированного контента помогает Google объединить все ваши линкбилдерские усилия и передать сигналы ссылок со всех версий страницы на предпочтительную.
Использование тега canonical
Страницы со схожим контентом на одну и ту же тему.
Дублированный контент, доступный по разным URL-адресам.
Разные версии одной и той же страницы, различающиеся по ID или другим URL-параметрам, не влияющим на контент.
Осторожно используйте мета-тег canonical на схожих страницах. Если две страницы, объединённые им, достаточно сильно отличаются в плане контента, поисковая система может просто проигнорировать ваш тег.
Obsolete Usage
The tag usage has evolved over the years and there are certain popular practices from years ago that should not be followed today. For instance:
That’s the longer version of the character encoding that was common in XHTML. Shortening it to what we discussed above is sufficient.
Meta tags have also been used to indicate copyrights.
This can be improved by instead providing a link tag pointing to a copyright page (or an anchor on the same page).
Finally, although many websites still use the value of the attribute, Google will not consider this in its search ranking algorithm or when displaying search results. In fact, Google has never considered keywords in its search algorithm.
Google has said that it is extremely unlikely that this will change in the future, so you shouldn’t bother with the keywords meta tags.
But an important factor, as pointed out earlier, is the fact that Baidu’s Chinese-language search engine considers the keywords meta tag a major factor in its search algorithm. So if you expect that a significant part of your traffic is coming from Chinese-language users, then you should include the keywords meta tag — but always be careful not to use unnecessary and unethical keyword stuffing.
Having said all of this, it won’t hurt your ranking to use any of these obsolete methods, but they will often add unnecessary code to your page, so it’s best to just avoid them and use alternative methods.
Ключевые слова и их значение для оптимизации
Ключевые слова помогают поисковому роботу быстро находить сайт и выдавать его по определенному запросу пользователя. Без их указания поисковая машина обращается к странице, находит несколько слов на ней и уходит, если необходимая информация не найдена. Поэтому ключевые слова необходимо указывать
Важно учитывать, что одни и те же слова не должны повторяться более трех раз, иначе сайт будет помечен как “спам”. Общее их количество – 50
Составление description и keywords – это работа человека, занимающегося поисковой оптимизацией, продвижением сайтов и их ранжированием в поисковых системах. Верстальщику нужно понимать важность значения этих атрибутов тега HTML для помощи SEO-специалисту.
Характеристики хорошего мета-описания
Почти каждая статья о мета-описаниях будет содержать некоторые из приведенных характеристик. Но здесь собраны все характеристики, которые имеют весомое значение для правильного составления мета-описания:
1. Длина до 155 символов, а иногда и больше
Правильная, или конкретная длина на самом деле не существует; это зависит от вида сообщения, которое вы хотите передать. Вы должны использовать достаточно места, чтобы донести сообщение при помощи символов, но в то же время ваше сообщение должно быть кратким и емким.
Время от времени Google меняет длину. В настоящее время вы в основном увидите мета-описания длиной до 155 символов, с некоторыми выбросами ― в 300 символов. По крайней мере, постарайтесь включить важную информацию в первые 155 символов вашего мета-описания.
2. Требующее конкретных действий и написанное в активном стиле
Конечно ваше мета-описание должно соответствовать данным характеристикам. Если вы считаете, что мета-описание ― это приглашение на страницу, то вы не можете просто сделать его «смешанной метафорой, описывающей несуществующий, но неявно высокий уровень квалификации».
Это скучное описание, и люди не будут знать, что они получат. Но об этом чуть позже, подкрепив некоторыми примерами из практики.
3. Включающий призыв к действию
«Здравствуйте, у нас есть такой-то новый продукт, и вы его хотите
Узнайте больше!» Это совпадает с тем, что я сказал об активном стиле, о котором уже шла речь, но я лишь хотел заострить на этом моменте особое внимание. Это ваш рекламный текст, где вашим продуктом является связанная страница, а не продукт на этой странице
Приглашения типа: «Узнай больше», «Получи сейчас», «Попробуй бесплатно» очень пригодятся здесь и будут как нельзя к месту.
4. Содержать ключевое слово с определенным акцентом
Если ключевое слово поиска соответствует части текста в мета-описании, Google будет более склонен использовать это мета-описание и выделять его в результатах поиска. Это сделает ссылку на ваш сайт еще более привлекательной.
5. По возможности показать спецификацию
Например, если у вас есть продукт для технически подкованных пользователей, то конечно же стоит обратить внимание на технические характеристики продукта ― производитель, размеры, мощность, цена и тому подобное. Если посетитель ищет именно этот продукт, скорее всего, вам не придется его убеждать, а наличие информации, такой как цена, вызовет клик
Обратите внимание, что вы можете, конечно, попытаться получить и более «богатые» на контент фрагменты.
6. Соответствие содержания
Это важно. Google узнает, когда мета-описания обманом заставляют посетителей нажимать, и может даже оштрафовать сайты, которые делают это
Но кроме этого, вводящие в заблуждение описания, вероятно, увеличат показатель отказов. Это плохая идея хотя бы только по этой причине. Нам же надо, чтобы мета-описание соответствовало содержанию на странице.
7. Уникальность описания
Если ваше мета-описание такое же, как и для других страниц, то взаимодействие с пользователем в Google будет затруднено. Хотя заголовки страниц могут различаться, но все страницы будут выглядеть одинаково, потому, что все описания одинаковы. Если вы намеренно хотите создать дублированное мета-описание, лучше оставить описание пустым. Google сам выберет фрагмент страницы, содержащий ключевое слово, используемое в запросе.
Посетите Инструменты Google для веб-мастеров > Улучшения HTML или используйте Screaming Frog SEO Spider, чтобы найти дубликаты мета-описаний.
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>
