Html тег ключевые слова – Мета теги для сайта — что такое мета теги, какие бывают, для чего прописывать ключевые слова в мета-теги | Дропшиппинг

Содержание

заголовок (title), ключевые слова (keywords), описание (description).

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

Если ты не забыл, то должен знать, что метатеги должны находиться в заголовке html-страницы в тегах <HEAD> и </HEAD>. Они не выводятся на страницу, кроме заголовка (title). Мета-тегов заголовка существует большое количество, но я напишу лишь о самых главных:

title — текст в данном теге виден в заголовке окна браузера. Его еще называют заголовком html-страницы;
meta — метатег, в котором содержатся атрибуты с различными параметрами, которые помогуют серверам и поисковым системам.

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

 
<html>
 <head>
  <title>Заголовок страницы (название страницы)</title>
 </head>
 <body>Содержимое твоего сайта.</body>
</html>

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

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

Метатег (<META>) служит для определения служебных данных об html-странице. Атрибуты метатега можно разделить на два вида: HTTP-EQUIV (HTTP-эквиваленты) и NAME. Хотя данных атрибутов большое количество, я напишу лишь основные, которые тебе надо для создания сайта. Начну с HTTP-EQUIV.

content-type — тип документа и его кодировка. Служит для правильного отображения символов в окне браузера. HTML-код:


<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>

content-language — указание языка документа. Значение этого атрибута используется как поисковыми роботами, так и web-серверами. HTML-код:


<meta http-equiv="content-language" content="ru">

refresh — время (в секундах), через которое будет обновление страницы или переход на другую html-страницу или сайт. HTML-код для обновления страницы через 20 секунд:


<meta http-equiv="refresh" content="20">

Если ты хочешь, чтобы через 10 секунд посетитель перешел, например, на страницу https://1seo.by, пиши вот так:


<meta http-equiv="refresh" content="10; https://1seo.by/">

Далее расскажу про группу метатегов NAME:

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


<meta name="description" content="Описание документа до 100 символов">

keywords — ключевые слова документа. Думаю тут все понятно — ты пишешь тут все ключевые слова через запятую, которые связаны с данной страницей. HTML-код:


<meta name="keywords" content="ключевые слова">

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


<head>
 <meta http-equiv="content-type" content="Тип документа и кодировка">
 <meta name="keywords" content="Ключевые слова документа">
 <meta name="description" content="Описание страницы">
 <title>Заголовок страницы</title>
</head>

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

Дата публикации: 15 мая, 2012

1seo.by

Ключевые слова html: как их определить?

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

Для чего нужны ключевые слова?

Теги ключевые слова сильно облегчают работу Гуглу, Яндексу и другим поисковикам. Keywords проставляются по одному, через запятую, всегда в единственном числе. К сожалению, многие веб-мастеры злоупотребляют тем, что употребляют в ключах еще и производные от keywords, с целью занять наилучшую позицию в выдаче поисковиков.

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

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

Начинающие веб-программисты еще не знают о том, что такое seo, не умеют продвигать свой сайт, грамотно подобрав для него ключевые слова, а вывести ресурс в топ поиска Гугла или Яндекса хочется. В таком случае рекомендуется посмотреть ключевые слова keywords на сайте-конкуренте. Причем не обычном ресурсе, а сервисе, который выбился в лидеры по своей тематике. Посмотрев его ключевые слова, можно сравнить их со своим семантическим ядром, проанализировать информацию и добавить недостающие пункты в код html. Как же это сделать? Есть несколько вариантов.

Первый вариант

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

Нажимаем правой клавишей мыши по любому месту на открывшемся сайте. Появится контекстное меню. Ищем пункт «Исходный код страницы», и кликаем по нему. Откроется еще одна вкладка с содержимым html кода страницы. Либо сразу нажимаем комбинацию клавиш Ctrl+U. Окно с кодом откроется мгновенно. Если не можем найти ключевые слова самостоятельно, жмем еще одну комбинацию Ctrl+F. Появится строка поиска, в которой надо вбить тег keywords. Произойдет переброска именно на этот тег, который будет подчеркнут желтым цветом.

Не во всех браузерах исходный код открывается именно таким способом. Например, в Mozilla Firefox процедура происходит после нажатия пункта «Веб-разработка».

По тому же принципу можно искать и другие фрагменты кода.

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

Второй вариант

Есть немногочисленные сервисы, с помощью которых можно узнать ключевые слова конкурентного ресурса. В режиме онлайн они проводят анализ страниц и выдают информацию о контенте, в том числе и ключевые слова (самые часто употребляемые слова и есть keywords). Пример ресурса: pr-cy.ru.

Также существуют ресурсы, выдающие информацию о плотности этих ключей и тошнотности текста.

Третий вариант

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

Четвертый вариант

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

В пунктах «Место в поисковике» и «Ключевые фразы» представлены ключевые слова, по которым этот ресурс ищут в поиске пользователи.

Пятый вариант

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

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

Что такое переспам? Читайте здесь. Как составить семантическую структуру текста? Полезная информация в этой статье.

Заключение

Узнать ключевые слова можно несколькими способами, но лишь одним из них — по исходному коду html. Keywords располагаются на видном месте в начале кода, поэтому не заметить их нельзя. Для точного местонахождения, воспользуйтесь поиском, вызываемым клавишами ctrl+u. Есть варианты такие же простые, но для этого придется пользоваться сторонними сервисами. Для того, чтобы понять алгоритм ключевых слов, и научиться ими пользоваться, смотреть ключи сайтов-конкурентов не просто нужно, а необходимо.

Прочтите также:
— Платный контент — что это значит?
— Сео текст — как его написать?
— Seo оптимизация сайта самостоятельно

— Изучение содержания текста посредством контент-анализа
— Анализ контента сайта и его преимущества, методики
— Шингл — что это такое?

←Вернуться

business-text.com

Основные в HTML meta-теги: описание :: SYL.ru

Теги <meta> в HTML располагаются внутри тега <head> и очень важны для ранжирования веб-страницы в поисковых системах. В документе их может быть несколько. Название этого тега произошло от греческого слова, обозначающего фразу “вместе с чем-либо” или “после чего-либо, потом”. Мета-теги хранят служебную информацию о данных, не предназначенных для посетителей страницы. Эти данные используются поисковыми роботами для поиска и отображения сайтов по определенным запросам пользователей. Они также влияют на оптимизацию страницы и на ее место в поисковой выдаче. Например, с помощью мета-тегов можно указать авторство, добавить какое-то описание сайта, разрешить или запретить индексирование поисковыми системами или настроить автоматическое обновление страницы. Сделать это помогают атрибуты тега HTML <meta>, такие как charset, keywords и другие. Обычно они записываются в паре: в первом атрибуте находится имя, а во втором – значение.

Атрибуты тега <meta>

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

Основные атрибуты тега HTML <meta> в <head>:

name;
content;
http-equiv;
charset.

Последний атрибут – charset – нужен для указания кодировки страницы. Он появился только в последней, пятой спецификации языка HTML. Наиболее часто встречающееся значение кодировки – utf-8 или “Юникод”.

Атрибуты name и content обычно используется в паре. У name может быть несколько значений:

description – краткое описание страницы, которое показывается в выдаче;
author – необязательный атрибут для указания авторства, имя создателя документа;
robots/norobots – разрешает или запрещает индексацию страницы поисковыми роботами;
follow/nofollow – разрешает или запрещает переход по ссылкам;
application-name – задает имя веб-приложения, если представляет веб-страницу, в других случаях не используется;
generator – используется для описания программного пакета, в котором сгенерирована веб-страница;
viewport – нужен для корректного отображения страницы на экране мобильного устройства;
keywords – ключевые слова, облегчающие ранжирование страницы поисковыми системами.

Атрибут тега HTML <meta> content (описание) будет хранить значение атрибута name”\ (имя). Например: <meta name=»description» content=»описание страницы»>. Такая запись означает, что для страницы существует какое-то краткое описание, которое нужно отобразить в браузере. Если пользователь будет искать информацию в Интернете и в выдаче появится эта страница, описание будет под ссылкой на нее. Что именно – указано в значении name. Атрибут content же сообщает, какое именно это будет описание. Значений description может быть несколько, написанных на разных языках. Описание страницы значительно влияет на ранжирование сайта в поисковых системах и помогает в привлечении пользователей. Но текст должен быть не только релевантен содержанию страницы, но и привлекателен для читателя. Поэтому правильное составление description – это целое искусство. Указать, какой именно язык используется в описании, нужно будет в дополнительном атрибуте lang.

Особенности взаимодействия атрибутов name и content

Для того чтобы взаимодействие атрибутов тега <meta> name и content стало понятнее, рассмотрим еще одно значение name – author. Используя его вместе с content, можно указать автора страницы. Пример: <meta name=»author» content=»имя автора»>. Еще одним важным значением атрибута name тега HTML <meta> является keywords, или ключевые слова. Они перечисляются через запятую и нужны для SEO-оптимизации страницы. В настоящее время ведутся споры, так ли важны ключевые слова и действительно ли они оказывают влияние на ранжирование, но точный ответ на этот вопрос знают только технические специалисты, работающие на крупные поисковики. Рядовым же специалистам по созданию и раскрутке сайтов рекомендуется все же добавлять этот мета-тег в <head>.

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

Ключевые слова помогают поисковому роботу быстро находить сайт и выдавать его по определенному запросу пользователя. Без их указания поисковая машина обращается к странице, находит несколько слов на ней и уходит, если необходимая информация не найдена. Поэтому ключевые слова необходимо указывать. Важно учитывать, что одни и те же слова не должны повторяться более трех раз, иначе сайт будет помечен как “спам”. Общее их количество – 50. Составление description и keywords – это работа человека, занимающегося поисковой оптимизацией, продвижением сайтов и их ранжированием в поисковых системах. Верстальщику нужно понимать важность значения этих атрибутов тега HTML <meta> для помощи SEO-специалисту.

Значение атрибута тега <meta> “robots”

Еще одно интересное значение HTML<meta> name – robots. С его помощью можно разрешить и запретить индексацию веб-страницы какими-либо поисковыми машинами. Здесь в значении content можно написать index – и разрешить индексацию, или noindex – и запретить ее. Дополнительно через запятую в значении тега указывается также follow или nofollow, то есть “разрешить” или “запретить переход по ссылкам с веб-страницы”. Можно запрещать индексацию, при этом разрешая переходы, и наоборот. Еще один вариант разрешить все – добавить в атрибут content значение all. Для того чтобы запретить все, нужно написать none.

Атрибут http-equiv

Важный атрибут тега HTML <meta> – http-equiv. Он используется аналогично name с атрибутом charset, который задает кодировку страницы. Для этого http-equiv нужно задать значение content-type, а в атрибуте content указать тип документа и кодировку, которую нужно использовать. Например: <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>. Если разобрать эту запись более подробно, то станет понятно, что атрибут http-equiv указывает браузеру на то, как и на основании каких данных обработать страницу.

У этого атрибута могут быть и другие значения:

expires – используется для установки даты и времени, после которой контент будет считаться устаревшим;
pragma – указывает способ кэширования страницы;
refresh – указывает, что нужно отобразить другой документ в браузере.

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

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

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

Атрибут viewport

Слово viewport можно перевести как “окно просмотра”. Этот атрибут используется, чтобы мобильные устройства правильно отображали контент страницы. С этого тега начинается адаптивный дизайн. Он помогает масштабировать и изменять текст и изображения на сайте, в зависимости от положения экрана. Без этого тега шрифты не будут увеличиваться до нужного размера, и пользователь просто не сможет прочитать, что написано на странице. Атрибут viewport задает определенную ширину окна, в которое нужно поместить сайт. Для каждого браузера она будет различной. Пример того, как может выглядеть мета-тег с этим атрибутом: <meta name=»viewport» content=»width=device-width, maximum-scale=1.0, minimum-scale=1.0″>.

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

www.syl.ru

Атрибут name тега | HTML справочник

HTML тег <meta>

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

Атрибут name (HTML тега <meta>) определяет имя документа на уровне метаданных. Имя метаданных указывается в атрибуте name, а значение указывается в атрибуте content.

Если атрибут http-equiv используется, то атрибут name не должен устанавливаться в мета-теге.

Поддержка браузерами

Синтаксис:

<meta name = "value">

Значения атрибута

Значение	Описание
application-name	Указывает имя веб-приложения, которое запущено на этой странице. Браузеры могут использовать эту информацию для идентификации приложения.
author	Указывает имя автора документа.
description	Задает описание для страницы. Это описание могут использовать поисковые машины для отображения результатов поиска.
generator	Указывает один из программных пакетов, который использовался для создания этого документа (как правило подобные мета-теги формируются автоматически, если используется какой-либо конструтор создания сайтов).
keywords	Задает разделенный запятыми список ключевых слов. Ключевые слова могут использоваться некотрыми поисковыми машинами.

На этой странице перечислены прочие допустимые значения (расширения) атрибута name тега <meta>: MetaExtensions.

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

Часто используемые значения атрибута

Рассмотрим часто используемые варианты использования тега <meta>:

<meta name = "description" content = "Бесплатные уроки по созданию сайтов" >

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

<meta name = "keywords" content = "HTML, CSS, JavaScript">

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

Определяет автора контента:

<meta name = "author" content = "Denis Bolshakov">

Индексация страниц

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

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

Доступные значения:

Значение атрибута	Определение
noindex	запрещает индексирование документа.
nofollow	запрещает проход по ссылкам в документе.
index	разрешает индексирование документа.
follow	разрешает проход по ссылкам в документе.

Настройка области просмотра

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

Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге <head> разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:

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

Атрибут name задает имя документа метаданным, значение «viewport» дает подсказку браузеру о размере начального размера области просмотра. Функция атрибута content задать значения для этого атрибута.
Значение width=device-width атрибута content сообщает, что ширина страницы устанавливается в соответствии с размером экрана устройства в аппаратно-независимых пикселях (device-independent pixel, dip), что позволяет странице пересчитывать положение элементов для корректного отображения на различных экранах. По аналогии допускается указать значения для высоты height=device-height.
Значение initial-scale=1 атрибута content сообщает браузеру, что необходимо установить соответствие 1:1 для пикселей CSS и аппаратно-независимых пикселей вне зависимости от ориентации устройства (альбомной или портретной).

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

Доступные значения:

Значение атрибута	Определение
width	Определяет ширину в пикселях области просмотра (значение — положительное целое число или device-width).
height	Определяет высоту в пикселях области просмотра (значение — положительное целое число или device-height).
initial-scale	Определяет соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение — положительное целое число от 0.0 до 10.0.
minimum-scale	Определяет минимальное значение zoom (оно должно быть меньше или равно maximum-scale). Значение — положительное целое число от 0.0 до 10.0.
maximum-scale	Определяет максимальное значение zoom (оно должно быть больше или равно minimum-scale). Значение — положительное целое число от 0.0 до 10.0.
user-scalable	Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб).

Отличия HTML 4.01 от HTML 5

Нет.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<meta name = "description" content = "Бесплатные уроки по созданию сайтов" > <!-- мета элемент, который описывает содержимое документа -->
		<meta name = "keywords" content = "HTML, CSS, JavaScript, jQuery"> <!-- мета элемент, который описывает ключевые слова в документе -->
		<meta name = "author" content = "Denis Bolshakov"> <!-- мета элемент, который указывает имя автора документа -->
		<title>Пример использования атрибута name тега <meta></title>
	</head>
	<body>
		<h3> Это заголовок.</h3>
		<p>Это параграф. </p>
	</body>
</html>

В данном примере мы использовали три элемента <meta>:

первый мета элемент описывает содержимое документа (значением атрибута name мы указали, что это описание страницы (description), а текстовое содержимое указали в атрибуте content. Это описание могут использовать поисковые машины для отображения результатов поиска.
второй мета элемент описывает ключевые слова в документе (значением атрибута name мы указали, что это ключевые слова (keywords), а текстовое содержимое указали в атрибуте content. Ключевые слова могут использоваться некотрыми поисковыми машинами.
третий мета элемент описывает имя автора документа (значением атрибута name мы указали, что это автор документа (author), а имя автора указали в атрибуте content.

HTML тег <meta>

basicweb.ru

Что такое HTML-теги — шпаргалка по основным меткам

Тег — это специальное зарезервированное слово, заключённое в угловые скобки (например, <body>). Тег — основная составляющая HTML: им код начинается, им же заканчивается, внутри тегов заключается отображаемая на веб-странице информация. Записывать их рекомендуется в нижнем регистре, то есть обычными маленькими буквами: не <THEAD>, а <thead>.

Какими бывают теги?

Большинство HTML-тегов являются парными: есть открывающий (например, <html>) и закрывающий тег, который от открывающего отличает слеш (/) после первой угловой скобки (например, </html>). Всё, что находится внутри пары тегов, называется их содержимым.

<Открывающий_тег>Содержимое</Закрывающий_тег>

<b>Помещённый внутри этих тегов текст становится жирным</b>

Бывают и непарные (одиночные) теги, которые называются метками. Их, в отличие от парных тегов, не нужно закрывать, потому что они не работают с содержимым, а выполняют какую-то функцию сами по себе. Пример одиночного тега — <br>. Он устанавливает перенос текста на следующую строку.

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

Любой тег состоит из:

Открывающей угловой скобки (<).
Специального слова (имени тега). Например, hr, iframe, b.
Закрывающей угловой скобки (>).

Основные HTML-теги

Так как теги — основа языка разметки, не удивительно, что их довольно много. Рассмотрим основные, самые важные теги.

<!—…—> — одиночный тег, внутри которого размещается комментарий. Комментарий — это текст, который не обрабатывается браузером. Внутри тега можно писать, что угодно, даже другие теги — работать они не будут, на экране не отобразятся. Разработчики комментируют код либо чтобы другим веб-мастерам было проще в нём разобраться, либо чтобы спустя продолжительное время его быстро смогли понять они сами.
<html>, <!DOCTYPE>, <head>, <body>, <title> — теги, которые должны присутствовать в любом приличном HTML-документе (подробнее см. «Как создать сайт в Блокноте»).
<meta> — тег содержит вспомогательную информацию для браузеров и поисковиков. Внутри него можно прописать ключевые слова, описание страницы, кодировку документа, имя автора и т. д.
<script> содержит ссылку на файл сценария или сам код.
<style> — тег, задающий стиль документа и/или его элементов с помощью CSS. HTML-документ может содержать множество тегов <style>, определяющих разные стили разных частей страницы.
<header> — полная противоположность <footer>, его дополняющая. Тег задаёт «шапку» (заголовок) раздела или всей страницы.
<footer> хранит в себе «ноги» сайта или раздела. Внутри него можно разместить вспомогательную информацию, копирайт, контактные данные и т. д.
<main> содержит основной контент страницы. Ни шапку, ни блок меню, ни «ноги» сайта, а то, ради чего страница создавалась. Например, на странице, которую вы сейчас читаете, внутри <main> должна располагаться как раз эта статья.
<a> предназначен для создания ссылок. Ссылки — корень гипертекста, поэтому им посвящена отдельная статья.
<img> нужен для добавления на веб-страницу картинок (к вашим услугам посвящённая этому действу статья).
<blockquote>, <br>, <hi1>-<hi6>, <hr>, <i>, <p>, <s>, <strong>, <ins> и другие теги форматирования текста составляют большую группу HTML-тегов, о них рассказывает статья «Форматирование текста в HTML».
<div> — блочный элемент. Текст внутри <div></div> форматируется с помощью CSS (каскадных таблиц стилей, которым посвящена вторая часть самоучителя).
<span>. У вас есть абзац <p> или блок <div>. Текст в нём оформлен в едином стиле, но вы бы хотели, не нарушая структуры, сделать так, чтобы несколько слов имели другой размер шрифта или цвет. Именно для таких ситуаций и предназначен тег <span>.
<ol>, <ul>, <li> — теги списков. Маркированные, нумерованные — работа этих тегов. Есть ещё списки определений, за которые отвечают теги <dd>, <dt> и <dl>, но подробно обо всей это шестёрке вы узнаете из статьи «Создание списков».
<table>, <tbody>, <thead>, <td>, <th> и <tr> используются при создании таблиц и подробно рассматриваются в отдельной статье.
<form> — тег, добавляющий странице интерактивности, то есть позволяющий пользователю взаимодействовать с веб-сайтом. Конечно, форме необходим обработчик, но зато с помощью тегов внутри <form></form> вы можете создать интерфейс. Флажки, кнопки, переключатели, поля ввода и другие объекты, которые требуют от вас активных действий — всё это элементы формы, код которых размещается внутри контейнера <form>.
<button> — тег, создающий интерактивную кнопку. Чтобы при нажатии на неё что-нибудь произошло, кнопка должна находиться в форме (располагаться между тегами <form></form>).
<input> создаёт элементы формы: переключатели, флажки, кнопки, всевозможные поля ввода. Вставляется в контейнер <form>. Но зачем нам тогда отдельно <button>, если есть универсальный <input>? <button> позволяет создать кнопку с расширенными параметрами. Например, на кнопке <button> можно разместить картинку. На элементе, созданном через <input>, такого сделать нельзя.
<menu> и <command> — теги создания меню в HTML 5. <menu> — это контейнер, внутри которого помещаются элементы <command>, добавление которых и приводит к созданию пунктов меню. Довольно интересная парочка. Например, с её помощью вы можете создать собственное контекстное меню для страницы или отдельного её элемента.
<textarea> — ещё один тег формы, создающий в ней большое поле, в которое можно вводить не одну строку текста, а целые абзацы.

Полезные ссылки:

www.seostop.ru

Основные SEO HTML теги для оптимизации сайта. Валидность кода html для сео — Semantica

Тематический трафик – альтернативный подход в продвижении бизнеса

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

Подпишись на рассылку и получи книгу в подарок!

Существует масса способов продвинуть сайт. И хороший сеошник знает все эти способы, ну, или хотя бы большую часть. Лучшие сеошники цепляются за каждую возможность, которая может положительно повлиять на ранжирование в поисковиках. Сегодня мы обсудим еще один способ улучшить показатели своего ресурса. Речь пойдет о валидности кода html.
Для многих не новость, но поверхностно затронем что такое html и CSS.
CSS – это язык внешнего вида страниц, написанных на HTML. Расшифровывается как Cascading Style Sheets, что в переводе — каскадные таблицы стилей. CSS в изучении еще проще, чем язык разметки. Каскадные таблицы построены по принципу: атрибут – значение; атрибут – значение и так далее. Загвоздка в том, что этих самых атрибутов очень много и все их запомнить крайне тяжело. Плюсом будет знание английского, хотя бы широкий вокабуляр.

В чем важность HTML и CSS для SEO
Работая с сайтами клиента либо с собственным сайтом, который вам сделали на заказ, нередко появляется необходимость что-либо поправить, подвинуть, изменить. И тут базовые знания html пригодятся.
Дальше код страницы должен быть валидным, иными словами, соответствовать принятым стандартам. Поисковые роботы эти стандарты знают и, сталкиваясь с невалидным кодом, могут неправильно распознать контент страницы и сделать плохие выводы. Вплоть до исключения страницы из индекса. Чтобы понять, правильно ли написан код страницы, есть ли в нем ошибки и поймет ли его поисковая система – нужно владеть базовыми знаниями html и css.

Что такое теги в HTML
Итак, что такое тег – это своеобразная метка или элемент языка, который сообщает браузеру, как нужно интерпретировать содержание того или иного элемента, чтобы правильно отобразить информацию на странице. Все они пишутся в треугольных скобках <tag>. Существуют парные теги и одиночные. Парные имеют второй, закрывающий тег со слешом внутри:
<nazvanie tega>…содержание…</nazvanie tega>
Закрывающий тег показывает браузеру, где оканчивается содержание.
Многие теги обладают свойствами, а те – значениями. Свойства прописываются внутри квадратных скобок открывающего тега, а значение указывается после знака = в кавычках “…”. Конструкция такая:
<nazvanie tega="значение свойства">…Содержание…</nazvanie tega>
Пример с нашего блога:
<html lang="ru-RU">…много всего…</html>
Это значит, что дальше будет идти html код, свойство lang – от слова language (англ. язык) и в скобках значение «ru-RU», несложно догадаться – наша html страница написана на русском языке.
Главные три html тега, которые вы встретите в любом документе
      Первый это <html>…</html> — этот тег сообщает вашему браузеру, что дальше будет идти документ формата HTML.
      Вторым станет <head>…</head> — внутри данного тега расположена служебная информация для браузеров и поисковых машин, не видимая для пользователя. Исключение: <title>…</title> — заголовок страницы, о нем поговорим ниже.
      Третий — <body>…</body> — видимая для пользователя часть страницы. Внутри <body> располагается весь контент: текст, картинки, видео и так далее.

Основные SEO теги в HTML
Внутри <html> содержатся два основных тега: <head> и <body>.
В <head>, как уже говорилось, может входить достаточно много других тегов. Разберем основные из них, полезные для SEO:
1. <title> заголовок страницы, который виден, если навести на вкладку в браузере. Также тайтл возглавляет сниппет страницы в результатах поиска. Один из важнейших для SEO оптимизации HTML тегов.
2. Тег <meta> получил название мета-тег, нас интересуют его свойства. <meta name=”description” content=”>Описание страницы, часто используются поисковиком в формировании сниппета. Иногда описанием сниппета становятся фрагменты текста на странице, более подходящие под запрашиваемую пользователем фразу.

Итак, мы указали два свойства.
name=”description” – означает, что следующее свойство
content=”…”, является описанием. Тогда, когда content=”…” содержит текст самого описания.
Обратите внимание – тег непарный.

3. <link> отвечает за связь с внешними файлами, вроде шрифтов, а чаще стилей. Как и остальные теги, обладает рядом атрибутов. Подключить файл со стилями можно с помощью конструкции:
<link rel="stylesheets" href="/адрес/документ.css">

Конструкция, где rel= атрибут и его свойство “stylesheets” (что в переводе — таблица стилей)
Дальше, href атрибут, который ссылается на документ, и свойство — адрес этого документа ”/адрес/документ.css”
4. Атрибут тега <link> под названием Canonical. Конструкция такова:
<link rel="canonical" href="http://site.ru/statja_nomer_odin">

Суть в том, что указав канонический адрес страницы, мы можем обезопасить себя от нежелательных дублей. К примеру, на вашем сайте есть две очень похожие страницы, либо вообще одинаковые. Но обе нужны. Вы можете написать в каждой странице канонический (главный) адрес. Тогда поисковые системы будут оценивать только одну страницу, адрес которой будет указан в конструкции выше.
Теги в теле документа <body>…</body>
Как уже говорилось, в <body> находится видимая для посетителя информация. Перейдем сразу к главному:
Теги h2…h6. Это заголовки страницы, которые разбивают текст по смыслу. Поисковые роботы любят, когда страница структурирована и оформлена. Используйте на страницы только один заголовок <h2>…</h2> и он должен быть первым (выше всех) на странице. Последующие подзаголовки можно использовать несколько раз, но важно, чтобы они шли по очереди. От <h3> до <h6>. Чаще всего Используют всего три типа заголовка: <h2>, <h3> и <h4>.
Оформление текста. Для того, чтобы разбить текст на параграфы используйте тег <p>…</p>.
Выделить жирный текст <strong>текст текст текст</strong>
Курсив: <em>текст текст текст</em>
<ul>…</ul> начало и конец маркированного списка.
<li>…</li> строка списка.
<ol>…</ol> нумерованная строка.
Картинки. Чтобы добавить изображение нужно воспользоваться тегом <img> и его атрибутами src и alt. Конструкция такова:
<img src="http://site.ru/content/kartinka_1.jpg" alt="описание, что нарисовано на картинке" />
9. Ссылки. По-хорошему, все ссылки должны быть проставлены при помощи следующей конструкции:
<a title="описание, при наведении курсора" href="адрес страницы">текст ссылки</a>
*Нежелательные ссылки можно закрывать атрибутом rel=”nofollow”, добавив его к другим атрибутам. В таком случае робот не будет переходить по этой ссылке. Добавив атрибут rel=”noindex”, вы скажите поисковику, что данная ссылка не должна индексироваться поисковым роботом.
10. Один из самых распространенных тегов <div>…</div>. Это слой, которому можно указать определенные параметры отображения на странице с помощью атрибута class=”значение”. А значит, все что расположено между <div> и </div> будет перенимать эти параметры.

Полезные советы по SEO html
Несколько важных моментов, не вошедших в основную статью:
Всегда закрывайте парные теги. Не закрытие какого-либо тега может привести к тому, что весь последующий код не будет понятен поисковому роботу.
Следите за правильной вложенностью тегов. Иногда это может выглядеть запутано. Просто придерживайтесь принципа: Открылся первым — закрылся последним.
Следите, чтобы в html коде не было стилей. Обычно они закрадываются в теге <style>…</style> или атрибутом в других тегах style=”color:…” и так далее. Если такие строки встречаются в коде вашего клиента или вашего сайта — выносите стили в отдельные файлы .css и подключайте их с помощью конструкции:
<link rel="stylesheets" href="/адрес/файла.css"> между тегами <head>...</head>
Между тегами <head>…</head>
Изучение html и css — процесс достаточно длительный. В этой статье я постарался понятным языком изложить основные моменты на которые нужно обращать внимание при продвижении сайта. Пользуйтесь советами, читайте код и делайте правильные выводы, цепляясь за очередную возможность получить плюсик в карму сайта от поисковиков.
semantica.in