Теги для сайта html: HTML и HTML5. Описание тегов по основным разделам

Попадание в ТОП-1 – это заветная мечта многих сайтов. К сожалению, в интернете работают миллионы хороших и полезных web-ресурсов, которые так и не нашли своих пользователей. Рассмотрим пример одной компании.

Компания разработала веб-сайт. Он стал одним из миллионов ресурсов в высококонкурентном онлайн-мире. Его темой был «Цифровой маркетинг».

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

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

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

Большинство владельцев сайтов приходят к одному выводу: без SEO площадка просто не сможет существовать. Поисковая оптимизация web-ресурсов – это очень широкая и многосторонняя тема. О ней можно говорить часами, днями, неделями.

Лучше всего начинать знакомство с оптимизации сайта с мета-тегов. И на то есть как минимум 4 причины:

1. Мета-теги лучше всего прописывать ещё на этапе создания страниц и сайта в целом.
2. Они не требуют финансовых затрат и большого количества времени при создании. Но если сайт уже работает, проставление тегов отнимет колоссальное количество сил.
3. С самого начала появления сайта в интернете поисковые системы будут смотреть на него под нужным углом.
4. В будущем владелец ресурса всё равно никуда не денется от правильного использования тегов.

Итак, рассмотрим 7 основных тегов по порядку по степени их важности и влиянию на поисковое ранжирование.

1. Мета-тег Title

Тег Title является самым важным при определении поисковой позиции. При определении релевантности какой-либо страницы поисковик должен определить, какого рода контент содержится на ней и на всём сайте.

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

Для одной из страниц сайта seoquick.com.ua тег названия в Google будет выглядеть следующим образом:

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

В нашем примере ключевое выражение «инструменты бесплатного продвижения сайтов». Это легко увидеть по похожим словам в теге Title и описании (представлено ниже). Данный приём необычайно важен для поискового продвижения.

В кодировке сайта тег Title может выглядеть следующим образом:

Содержимым будет являться всё выражение, заключённое между тегами <title> и </title>.

Некоторые системы управлением сайтами (так называемые «движки»), могут проставлять автоматически либо в них есть специальное окно для копирования Title. Так работает WordPress. И всё же лучше в конце посмотреть код страницы и убедиться, что в мета-тег Title попало то, что нужно. Это принципиально важно.

Тег Title играет ключевую роль при поисковом продвижении. Его правильное составление – это ключ к успеху и искусство одновременно. Техника «Эверест» поможет выжать 100% возможностей из этого тега. Познакомиться с ней можно из представленного ниже видео https://www.youtube.com/watch?v=youstCMC8oQ.

Мы также создали бесплатный калькулятор Title — который прекрасно справляется с задачей по 

Ссылка на утилиту здесь.

2. Мета-тег Description

Это второй по важности тег после Title. Без него не обойтись всем, кто серьёзно относится к поисковому продвижению. Если сравнить с книгой, Title – это название, а Description – это краткое содержание.

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

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

К примеру, в Title может быть написана фраза «инструменты продвижения сайтов», а в описании используется лишь выражение «утилиты SEO» По значению они идентичны. Но такое положение вещей введёт поисковые системы в замешательство. Теперь они не могут точно установить, о чём конкретно идёт речь в контенте: о продвижении сайтов либо SEO.

Нужно выбрать одну фразу и задействовать её. Мета-тег Description выглядит так:

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

Удостоверьтесь, что в теме не будет написано «инструменты для продвижения сайтов», а в описании «утилиты для поискового продвижения». Это две различные ключевые фразы. Отсутствие последовательности может запутать поисковые системы. Ключевые слова лучше использовать по всему контенту, что сделает его более контекстуальным.

Если сайт построен на «движке» WordPress, тогда описание достаточно скопировать в специальное поле. Оно находится под текстом страницы:

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

Теги заголовков очень легко включить в контент сайта. Для них не нужно писать что-то особенное. Посмотрите немного выше и найдите «3. Тег заголовка», строка выделена жирным. Вся она является мета-тегом h3.

Теги заголовков бывают разными. Чаще всего используются h2 и Н2, но в некоторых случаях применяются Н3, Н4 и Н5. Если их задействовать правильно, это поможет организовать контент.

На практике тег заголовка выглядит следующим образом:

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

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

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

Проставить мета-теги заголовков несложно. В визуальном редакторе для этого нужно выделить текст и выбрать нужный Header. В HTML оформлении он должен быть заключён между тегами <h2> и </ h2>. Подобным образом выделяются заголовки второго, третьего и последующих уровней (h3, h4, h5 и h5).

4. Теги картинок alt

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

Хотя часто при поиске в Google пользователи заходят во вкладку «Все»:

Но иногда они производят поиски по вкладке «Картинки»:

Во втором случае поисковое продвижение отличается. Google не может читать картинки, но он может видеть слова.

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

Чтобы заполнить этот тег в визуальном редакторе WordPress, необходимо нажать на изображение и кликнуть кнопку с изображением карандаша:

В открывшееся окно необходимо вставить alt:

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

5. Теги Nofollow

Этот тег сообщает поисковику, что сайт не подтверждает обратную внешнюю ссылку. В обычных условиях линк повышает вес ресурса, на который он ссылается. Если же стоит тег Nofollow, этого не происходит.

Использование тега Nofollow никак не отражается на работоспособности ссылки. При нажатии на неё пользователь попадёт в требуемое место. Однако такой линк не окажет влияния на SEO.

Тег Nofollow прописывается следующим образом:

Почему теги Nofollow так важны? Если вы занимаетесь поисковым продвижением с помощью обратной ссылки на свой сайт, нужно точно узнать, будут ли они давать эффект или нет. Линки с тегами Nofollow окажутся менее эффективными, чем Dofollow.

Мнение SEO-специалистов на счёт эффективности ссылок Nofollow разное. Многие говорят, что они вносят свой вклад при ранжировании, однако польза от них намного меньше, чем от ссылок Dofollow.

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

Если сайт построен на системе WordPress, проставить тег не составит труда. Нужно перейти в режим отображения текста и прописать его. Увидеть это можно на изображении ниже:

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

6. Ссылки и якорь текстовых тегов

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

Не многим известно об анкорном тексте (якорь) в теге ссылки. Большинство пользователей просто устанавливают линк и не используют анкорный текст. С позиции SEO это плохое решение.

Пример ссылки с анкорным текстом:

Анкорный текст следует сразу же после тега <a href=»http://my_site.ru»>. Он представляет собой фразу «Ссылка на мой сайт». После этого закрывается тег </a>.

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

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

При использовании анкорной ссылки на своём сайте можно сохранить его контент без изменений. Поисковые системы ценят организованный контент. Для этой цели предназначены специальные теги. О них речь пойдёт дальше.

7. Канонические теги

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

Поисковые системы при сканировании одной страницы сайта могут использовать различные адреса URL для неё:

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

При ранжировании контента наличие большого количества дубликатов превращается в настоящую проблему. Поисковая система рассматривает каждый URL-адрес по отдельности. Канонический тег укажет Google, какую страницу необходимо индексировать в первую очередь. Он выглядит так:

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

Рекомендация: добавляйте теги с помощью программного обеспечения

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

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

ВЫВОДЫ

Без мета-тегов самый полезный и профессионально созданный сайт станет «мёртвым», поисковые системы просто не смогут определить оптимальную аудиторию для его выдачи. Вывод web-ресурса в топ-1 – это долгий и кропотливый процесс, однако данная цель вполне достижима.

Благодаря тегам вебмастер сможет:

• Сообщить основную тему (Title) страницы сайта. Она будет иметь особое влияние в поисковой выдаче. Внесите в тег Title ключевые слова.
• Коротко описать содержание (Description) страницы. Поможет потенциальному посетителю выбрать оптимальный сайт для своих потребностей. Использование в содержании ключевых слов повысит позиции ресурса в выдаче.
• Организовать содержание сайта с помощью заголовков (Header). Использование в них ключевых слов станет дополнительным преимуществом.
• Повысить позиции картинок в выдаче (Alt). В этой области конкуренция намного ниже, картинки помогут получить целевой трафик.
• Запретить влияние ссылок на SEO (Nofollow). Даже если сайт будет ссылаться на ресурс с сомнительной репутацией, это не причинит ему вреда.
• Использовать текстовые ссылки с якорем. Сделают перелинковку более эффективной.
• Определить приоритетность страниц-дубликатов для поисковых систем.

Теги являются эффективным и мощным инструментом бесплатного поискового продвижения. Однако он далеко не единственный. В этой статье собраны 5 самых эффективных методов оптимизации сайтов. Все они на 100% проверены и «белые». Их использование станет следующим шагом к достижению мечты каждого владельца сайта – попадание на вершину поисковой выдачи!

Читайте также:

Раскрутка сайта бесплатно? 5 практических советов.

Как сделать быстрый SEO аудит за 30 минут

Быстрое Увеличение Переходов с Поиска (11 Шагов)

Продвижение сайтов: Что нужно знать о бюджетах SEO. План работ.

Реклама в социальных сетях: 4 руководства и 7 советов

Реклама в Facebook сделает Вас успешным

Как решить проблемы со скоростью загрузки сайта на WordPress

Как создать рекламу в Facebook на посещение точек

Дублированный контент. Причины и решения

<!DOCTYPE html>
<html>
 <head>
  <title>keywords</title>
  <meta name="keywords" content="HTML,CSS,PHP,JavaScript"> 
 </head> 
 <body>Основное содержимое страницы</body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <title>description</title>
   <meta name="description" content="Сайт об HTML и CSS"> 
   <meta name="keywords" content="HTML,CSS,PHP,JavaScript">
 </head> 
 <body>Основное содержимое страницы</body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <title>Примеры применения метатегов</title>
  <meta name="author" content="Maxim White">
  <meta name="keywords" content="HTML, Meta Tags, Metadata">  
  <meta name="description" content="Сайт об HTML и CSS"> 
 </head> 
 <body>Основное содержимое страницы</body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <title>Примеры применения метатегов</title>
  <meta name="robots" content="noindex, nofollow">
  <meta name="keywords" content="HTML, Meta Tags, Metadata">
  <meta name="author" content="Maxim White">
  <meta name="description" content="Сайт об HTML и CSS"> 
 </head> 
 <body>Основное содержимое страницы</body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <title>Примеры применения метатегов</title>  
  <meta name="keywords" content="HTML, Meta Tags, Metadata">  
  <meta name="description" content="Сайт об HTML и CSS">
  <meta name="author" content="Maxim White">
  <meta name="robots" content="noindex, nofollow">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 </head> 
 <body>Основное содержимое страницы</body>
</html>

<meta charset="UTF-8">

<!DOCTYPE html>
<html>
 <head>
  <title>Автозагрузка</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="refresh" content="5; URL=http://www.wm-school.ru">
 </head> 
 <body>Основное содержимое страницы</body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <title>Язык документа</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="refresh" content="5; URL=http://www.wm-school.ru">
  <meta http-equiv="content-language" content="ru">
 </head> 
 <body>Основное содержимое страницы</body>
</html>

<html lang="ru">

<!DOCTYPE html>
<html>
 <head>
  <title>Заголовок страницы</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="keywords" content="HTML, Meta Tags, метаданные">
  <meta name="description" content="Сайт об HTML и CSS">
 </head> 
 <body>Основное содержимое страницы</body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta>
  <title>Ключевые слова</title>  
 </head>
 <body>
  <p>Метатеги (англ. meta tags) — предназначены для предоставления структурированных метаданных о веб-странице.</p>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta name="keywords" content="HTML,CSS,JavaScript">
 <title>Ключевые слова</title>  
 </head>
 <body>
  <p>Метатеги (англ. meta tags) — предназначены для предоставления структурированных метаданных о веб-странице.</p>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta>
  <title>Индексация и переход по ссылкам</title>  
 </head>
 <body>
  <p>Тег meta позволяет запретить или разрешить индексацию Web-страницы поисковыми машинами.</p>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta name="robots" content="index, nofollow">
  <title>Индексация и переход по ссылкам</title>  
 </head>
 <body>
  <p>Тег meta позволяет запретить или разрешить индексацию Web-страницы поисковыми машинами.</p>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta>
  <title>Автоматическая перезагрузка страницы</title>  
 </head>
 <body>
  <p>Тег meta позволяет автоматически перезагружать страницу через заданный промежуток времени.</p>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="refresh" content="30">
  <title>Автоматическая перезагрузка страницы</title>  
 </head>
 <body>
  <p>Тег meta позволяет автоматически перезагружать страницу через заданный промежуток времени.</p>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta>
  <title>Автозагрузка новой страницы</title>  
 </head>
 <body>
  <p>В данном случае через 5 сек после загрузки страницы браузер перейдет на адрес http://www.wm-school.ru.</p>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="refresh" content="5; URL=http://www.wm-school.ru">
  <title>Автозагрузка новой страницы</title>  
 </head>
 <body>
  <p>В данном случае через 5 сек после загрузки страницы браузер перейдет на адрес http://www.wm-school.ru.</p>
 </body>
</html>