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