Html тег

Теги на сайте

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

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

Процесс поиска информации за счет тегов может осуществляться несколькими способами:

Поисковая строка.

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

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

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

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

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

Атрибуты

Атрибут	Значение	Описание
charset	character_set	Задает кодировку символов для HTML документа.
content	text	Задает значение, связанное с атрибутами name и http-equiv, в зависимости от контекста.
http-equiv	content-security-policycontent-typedefault-stylerefresh	Фактически эквивалентен гипертекстовому заголовку (имитация http-заголовка), формируют заголовок страницы и определяют его обработку. Как правило, они управляют действиями браузеров и используются для формирования информации, выдаваемой обычными http-заголовками.
name	application-nameauthordescriptiongeneratorkeywords	Определяет имя документа на уровне метаданных.
scheme	format/URI (универсальный идентификатор ресурса)	Не поддерживается в HTML 5. Указывает полезную информацию о схеме или названии самой схемы, которая должна быть использована для уточнения значения свойства атрибута content.

Мета-теги в html

Значение и применение

Html ссылки, как сделать ссылку (гиперсылку) в html

Тег <meta> обеспечивает метаданные о HTML документе. Метаданные не отображаются на странице, но интерпретируются браузерами и поисковыми системами.

Мета элементы, как правило, используются, чтобы указать описание страницы, ключевые слова, автора документа и другие метаданные. Разрешается и, как правило, необходимо использовать несколько метатегов. Тег <meta> всегда размещается внутри тега <head>.
XHTML требует закрывающего тега <meta/>, в HTML элемент считается одиночным.

Подробную информацию о использовании мета тегов вы можете получить также в статье учебника HTML 5 «Метаданные в HTML».

Определение и использование

Как создать файл html в блокноте

Метаданные — это данные (информация) о данных.

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

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

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

HTML5 ввел метод, позволяющий веб-дизайнерам управлять окном просмотра (видимой областью пользователя веб-страницы), через — <meta> тег (уидеть «Setting
The Viewport» Пример ниже).

Метатег Title

Мета-теги
Meta tags

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

Утеряна главная суть тега – описывать страницу коротко и очень емко. Потому следует использовать Title по назначению. При этом имеет смысл применять слова, которые повышают CTR («акции, скидки» вместо привычных «купить, отзывы или фото»).

Теги в музыке

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

Аудиотеги позволяют не только категорировать треки, но и нести в себе определенную информацию, а именно:

название;
автор;
альбом;
жанр;
продолжительность трека;
битрейт и т. д.

С помощью специального софта (например, mp3tag) можно отредактировать эти данные. Для чего это нужно? Есть две причины:

Навести порядок в своей папке с музыкой (если данные указаны некорректно).
Скрыться от преследования за нарушение авторских прав.

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

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

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

Title

Заголовок страницы. В индексе это — крупная синяя ссылка на сайт, в браузерных вкладках — название.

Как заполнять

Атрибут должен содержать основные ключевые слова и конкурентные преимущества

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

У Google максимум — 70 (12 слов), у Яндекс — 80 (15 слов).

Рассмотрим пример. Дано: ключевые слова «купить кресло», «купить кресло недорого», «купить удобное кресло»

Неудачный title: Купить кресло. Купить удобное кресло, купить кресло недорого

Удачный title: Как купить удобное кресло недорого с доставкой и получить скидку 15%?

Description

Краткий «анонс» страницы в результатах поиска. Несколько коротких предложений, в которых используются ключевые слова (не все — наиболее значимые) конкретной страницы. Рекомендуемая длина meta тега — 160-200 символов.

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

С помощью meta name description поисковым роботом описание страницы — сниппет. Он отображается в результатах поиска под title.

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

Как заполнять
Дано: магазин продажи книг; ключевые слова «интересная книга», «купить книгу»

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

Удачный Description: Нужна интересная книга? В нашем магазине — широкий выбор тематик: от узкоспециальной литературы до мировых бестселлеров. У нас Вы можете купить книгу с доставкой в течение 1-5 дней в любой регион РФ. Первым покупателям — скидка 10%.

Keywords

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

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

Как заполнять

Meta Keywords Attribute

Meta Keywords are an example of a meta tag that doesn’t make much sense to use these days. Years ago, the meta keyword tags may have been beneficial, but not anymore.

Remember back in kindergarten and when your teacher gave you a stern look and said “if you can’t stop using those crayons while I’m talking, I’m going to take them away from you,” and you didn’t listen and, to your shock, they were indeed taken away? That’s sort of what Google did with meta keywords.

Years ago, marketers eager for page views would insert keywords totally unrelated to their pages into their code in an attempt to pirate traffic from the more popular pages, those that actually were about Lindsay Lohan, or whoever was then trending. This was known as «keyword stuffing.» Google eventually got wise to this and decided in the end to devalue the tool. These days Google doesn’t use meta keywords in its ranking algorithm at all, because they’re too easy to abuse.

Мета тег 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? В первую очередь он представляет собой простой способ предотвратить индексацию дублирующего содержания, например, печатной версии страницы. Так же мета тег может быть полезен на незавершенных страницах или для скрытия конфиденциальной информации от поисковых сервисов.

Мета тег title

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

Теги заголовков помещаются в <head> вашей веб-страницы и предназначены для предоставления чёткого и исчерпывающего представления о том, о чём эта страница. Но имеют ли они такое же сильное влияние на позиции в выдаче, как это было много лет назад?

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

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

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

Всего 1 заголовок из всего топа не включает точное соответствие. А теперь давайте взглянем на Google:

Всего 1 заголовок из всего топа включает точное соответствие. Но при этом в Гугле нет ни одного неуместного результата: каждая, из приведённых здесь страниц, объясняет, как повысить узнаваемость, и заголовки это отражают.

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

Как правильно заполнять title

Сделайте для каждой страницы уникальный заголовок, который кратко и точно описывает её контент.
Если хотите, чтобы заголовки не обрезались в поисковой выдаче, лучше ограничивать их 50-60 символами. В Google длинные заголовки сокращаются, примерно, до 600-700 пикселей, но эти цифры иногда меняются, так что не стоит их жёстко придерживаться.
Главные ключевые слова должны стоять как можно ближе к началу заголовка. Но вставляйте их максимально органично, как будто вы это делаете для посетителей сайта.
Используйте название вашего бренда в названии, даже если оно не отображается в поисковой выдаче, это всё равно будет иметь значение для поисковой системы.

Совет: используйте title для привлечения внимания

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

Такой подход используют социальные сети: ВКонтакте, Facebook, LinkedIn, чтобы показать вам, что имеются новые уведомления. Эта тактика может дать весьма неплохой результат!

Так ли важен Keywords сейчас?

С момента появления мета-тега прошло уже 25 лет, и почти все поисковые системы от него отказались по понятным причинам. В таких поисковиках, как Яндекс, Rambler, Mail.ru, Yahoo, Bing, отношение к Кейвордс довольно посредственное. Если они и используют его, то в крайне редких случаях.

Использование в

В 2009 году Google опубликовал статью о теге Keywords. В ответ на вопрос «Используется ли в поисковике мета-тег Keywords?» было официально заявлено, что нет. Это связано с тем, что в мета-теге вебмастера использовали много нерелевантных ключевых фраз.

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

Использование в Яндекс

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

Резюмируя, следует сказать, что Keywords до сих пор актуален, но не так значим. Думаю, что совсем скоро тег полностью перестанет использоваться любой поисковой системой.

NOFOLLOW в ссылках

Nofollow используется как значение атрибута rel в теге <a>. И отвечает за индексацию каждой конкретной ссылки на странице.
<a href=»url» rel=»nofollow»>ссылка</a>
Атрибут rel показывает отношение данного документа к документу, на который ссылается.
В данном случае, указывая атрибуту rel значение nofollow, мы просим поисковую систему не переходить по внешней ссылке, а также подчеркиваем то, что мы не отвечаем за содержание, на которое ссылаемся.
По ссылкам, оформленным с данным значением, не передается авторитет нашей страницы, другими словами не передается тИЦ и Page Rank. Однако стоит также учитывать и то, что в случае с PR вес все же уходит, но не на сайт, на который мы ссылаемся, а в никуда в прямом смысле этого слова. По поводу тИЦ точной информации о том, уходит вес или остается на сайте — нет.
Остановимся подробнее на распределении и передаче веса в Google.

Итак, абсолютно не важно, сколько ссылок у вас имеют атрибут rel=»nofollow», а сколько без него. Если на странице стоит 10 ссылок, то каждая ссылка получит часть авторитета вашей страницы, и каждая из них передаст этот вес, но если в одном случае вес передастся на конкретный сайт, то в другом случае – вес просто уйдет в никуда

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

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

Теперь представим, что первый сайт закрыл свои ссылки атрибутом rel=»nofollow». Вес не перейдет на второй сайт, а утечет в никуда, и второй сайт не получит ту часть веса, которую должен был, не сможет передать его дальше по цепочке, и в итоге, пройдя весь цикл, Х-какой-то сайт, который должен был передать вес на первый сайт, передаст его в значительно меньшем количестве, чем мог бы. Итак, каждый раз не получая ту часть веса, которую вы самостоятельно пускаете в никуда, закрывая свои ссылки атрибутом rel=»nofollow», сайт не может передать вам ее, из чего следует, что закрывая свои ссылки, вы сами лишаете себя увеличения веса, и такого показателя, как PR.

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

Таким образом, если первый сайт не закрыл ссылку атрибутом rel=»nofollow», то в конце цикла получит больший вес от входящих ссылок, чем в случае, если исходящие ссылки будут закрыты.

Но есть ситуации, когда действительно необходимо закрывать ссылки значением nofollow. Обратимся к источникам, Яндекс и Google, что они говорят по этому поводу?
Выдержка из раздела Помощь Яндекса:

Выдержка из раздела Справка Google:

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

Также мне хотелось бы уделить внимание ещё одному моменту. Некоторые ярые борцы за закрытые ссылки ставят rel=»nofollow» не только в самих ссылках, т.е

в теге , но и везде, на что только хватает фантазии. И в теге , и

Давайте не будем выдумывать свои собственные стандарты, а обратимся к существующим, которые разрабатывает международная организация W3C.
Значение rel=»nofollow» можно использовать только в теге , и в других тегах его использовать нельзя!

Итак, мы выяснили, когда стоит пользоваться атрибутом ссылки rel=»nofollow», а когда это не целесообразно. Также мы больше не будем вставлять его никуда, кроме одного единственного тега, обозначающего ссылку

Теперь уделим внимание тегу noindex.

Теги в HTML

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

HTML-теги представляют собой не просто слова, а целые наборы данных (класс, категория, семантика, комментарий, справка, примечание и т. д.). Они помещаются в специальные «контейнеры»: открывающий <> и закрывающий </>.

Например, чтобы обозначить абзац, необходимо в HTML-документе прописать тег <p> … </p>:

<p> Некоторый текст </p>

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

В HTML есть множество различных тегов (<p>, <H1>, <img>, <a>, <table> и др.), и каждый из них имеет свое значение. Правда, не все они имеют открывающий и закрывающий элемент. Некоторые из них можно записать единичными скобками (например, <img/>, <meta/> и др.).

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

Description;
Keywords;
Title;
Robots;
Viewport и др.

Они помещаются в контейнер <meta/> и размещаются внутри блока <head> … </head>. Метаданные не влияют на внешний вид страницы и недоступны простым пользователям (за исключением тайтла и дескрипшена, которые выводятся в поисковом сниппете).

Также метатеги влияют на поисковое продвижение ресурса, поэтому при СЕО-оптимизации им уделяется отдельное внимание.

§ 2. Мета-тег «keywords» (ключевые слова)

С начала вкратце о том, а что, собственно, такое эти самые «ключевые слова».

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

Например, для этой странице ключевыми словами будут «мета-теги», «мета-тег title», «мета-тег keywords» и т.д.

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

Чтобы облегчить работу поисковым системам, используется мета-тег «keywords». В нём вебмастер прописывает ключевые слова для страницы. HTML-код мета-тега «keywords» выглядит следующим образом:

Перечень ключевых слов»> Содержимое мета-тега «title» Основное содержимое страницы

Ключевые слова нужно добавлять по одному, через запятую, в единственном числе. Например, не «ключевые слова», а «ключевой, слово». К тому же, безответственное поведение вебмастеров, которые в целях получения более высоких позиций в поисковиках забивали мета-тег «keywords» не только ключевыми словами, но и многочисленными производными от них, привело к тому, что поисковые системы практически перестали обращать внимания на этот тег. В настоящее время правильно заполненный мета-тег «keywords» используется поисковиками лишь как один из многих факторов ранжирования (далеко не главный). Если же они видят перед собой «keywords», в который запихнули все возможные вариации ключевиков, то это становится для них первым сигналом о неблагонадёжности данной страницы.

Know Your Meta Tags

There are four major types of meta tags worth knowing about and we’ll talk about them all here. Some are not as useful as they once were. Others are worth using regularly, and will very likely increase your traffic by letting Google know who you are and what you provide. (There are more than four kinds of meta tags, but some are less common or not relevant to web marketing).

The four types we’ll discuss here are:

Meta Keywords Attribute — A series of keywords you deem relevant to the page in question.
Title Tag — This is the text you’ll see at the top of your browser. Search engines view this text as the «title» of your page.
Meta Description Attribute — A brief description of the page.
Meta Robots Attribute — An indication to search engine crawlers (robots or «bots») as to what they should do with the page.

Мета-теги технического характера

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

Наиболее распространенные технические мета-теги:

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

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

Robots. Показывает поисковому роботу, какие страницы следует включать в индекс, а какие — нет. Данный тег предполагает ряд дополнительных атрибутов: index/noindex (можно/нельзя индексировать); follow/nofollow (учитывать/не учитывать гиперссылки); all/none (открыть/закрыть для индексации страницу и гиперссылки).

Refresh. Позволяет задать время обновления страницы при загрузке либо переадресации пользователя в другой раздел. Тег полезен в случае обновления сайта: вместо страницы ошибки 404 или длительной загрузки перенаправляет пользователя в новый раздел.

Meta Author и Copyright. Этими тегами можно прописать авторство графического и текстового содержимого страницы.

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

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

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

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

Помните, что сейчас поисковики оценивают ресурсы, в первую очередь, по качеству контента, кода, структуры

Статью подготовила Виктория Закирова.