Главная / Основы HTML / Блог / Метатеги: ключевые слова, заголовок и описание html-страницы

Метатеги в HTML: ключевые слова (keywords), заголовок (title) и (description) страницы

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

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

Разберем первый очень важный тег <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, помогут его оптимизации и раскрутке.

← Создание таблиц в HTML Безопасные цвета в HTML (Web-палитра) →
Дата публикации: 15 мая, 2012
    Отзывы и комментарии:
  • Дима Пегасов:
    Так же не стоит забывать, что description не должен быть в двух словах. К примеру: <meta name="description" content="Доска объявлений" /> Фактическим источником является "инструменты гугла". Лучше оставить поле пустым, если чего то, нечего написать. 1)Допустимый пример: <meta name="description" content="Бесплатная доска объявлений site.ru" /> 2)Следующий пример: Доска бесплатных объявлений, на которой можно быстро и беспрепятственно продать, купить товар. Узнать стоимость и цену, подобрать или оказать услуги. 2 пример более громоздкий, такие отлично принимает гугл, 1 же пример подходит под яндекс, его вывод в выдаче короче. Используйте оптимальное количество символов.


Люди сами не знают чего они хотят, пока им это не покажешь.
© Стив Джобс

Скидки для новичков:

Купить виртуальный хостинг для сайта и домен со скидкой 5%!

Подробнее

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