Топ-100 HTML уроки, 7 часть: head, мета-теги - Разработка сайтов на WordPress
HTML уроки, 7 часть: head

HTML head, мета-теги, description, keywords, robots

HTML head

Head – это часть страницы, которая содержит информацию о самом документе HTML и не отображается на экране. Мета-информация, содержащаяся в head HTML, может служить браузерам инструкциями о том, как представить страницу – например, включение внешних файлов – CSS, JavaScript, favicon. Кроме того, некоторые мета-заголовки, включенные в head HTML, имеют большое значение для хорошего рейтинга сайта поисковыми системами.

Заголовок HTML указывается тегами <heаd> и </ heаd>, соответственно, начинающимися и заканчивающимися, и помещается перед открывающим тегом body документа HTML (<body>). Между начальным и конечным тегами заголовка HTML находятся все элементы, которые будут включены в заголовок HTML.

Давайте посмотрим, какие элементы могут быть включены в head HTML.

Название – title

Заголовок страницы, установленный с помощью тегов <title> и </ title>, не отображается на экране, но может рассматриваться как заголовок окна, в котором открывается страница. Этот заголовок играет важную роль в определении релевантности сайта для поисковых систем, и для него полезно написать содержательный текст. Я буду использовать заголовок этой страницы в качестве примера заголовка страницы:

<title> HTML-head </title>

Включить внешние файлы

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

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

Вот несколько примеров инструкций по использованию внешнего файла:

    • Favicon: это маленький значок, который появляется рядом с адресом страницы в адресной строке браузера. Чтобы включить favicon в свои страницы, просто напишите следующую строку в заголовке HTML:
      <link rel=”shortcut icon” href=”/favicon.ico” />
      Как сделать иконку, описано в статье «Дизайн страниц»
    • CSS файл: Это файл, содержащий таблицы стилей для HTML-страниц. Чтобы использовать, напишите следующую команду:
      <link rel="stylesheet" type="text/css" href="/style.css" />
      Как видите, эта команда очень похожа на предыдущую. Сразу после link, есть атрибут rel, который определяет отношение файла инструкций к текущей HTML-странице. Атрибут href указывает имя файла и, возможно, путь к нему, если он находится в другой папке.
      В дополнение, к файлам CSS также указывается тип файла: type = “text / css”, чтобы браузер знал, как подойти к конкретному типу файла.
    • Файл JavaScript. Такие файлы могут быть включены на веб-сайт с помощью следующей команды:
      <scriрt type = "text / javascript" src = "/ superfish.js"></ Scriрt>
      Подобно команде CSS, тип файла JavaScript указывается с помощью type = “text / javascript”, а адрес самого файла указывается с помощью src =, за которым следует путь к файлу и его имя (в данном случае superfish.js).

Мета-теги

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

    • кодировка charset: указывает, какой тип кодировки используется на странице. Обязательно установите правильную кодировку, иначе вы рискуете, что посетители страницы увидят строку непонятных символов, вместо вашего сообщения. Кодировка указывается следующим мета-тегом:
      <mеta content = "text / html; charset = utf-8" />
      В этом конкретном примере указана кодировка UTF-8, но на ваших страницах может быть что-то другое, например Windows-1251. Вы можете прочитать больше о кодировании в статье Что такое кодировка.
    • описание description: описание мета тега кратко указывает тему страницы. Это текст описания, который будет предоставлен поисковыми системами на странице результатов поиска по ключевым словам. Если вы не заполните содержимое слова мета-описания, поисковые системы автоматически сгенерируют некоторый текст – обычно первый, встречающийся на странице (например, меню). Это ни в коем случае не лучший вариант, и лучше рассказать себе, о чем ваша страница:
      <mеta name = "description" content = "описание страницы">
    • ключевые слова keywords: мета-тег ключевые слова относятся к поисковым системам, хотя в настоящее время это, кажется, имеет меньшее значение (из-за злоупотреблений со стороны веб-дизайнеров поисковые системы стали уделять меньше внимания мета keywords). Выберите несколько слов, которые лучше всего отражают тему вашей страницы, и объявите их строкой, разделенной запятыми, следующим образом:
      <mеta name = "keywords" content = "ключевое слово 1, ключевое слово 2, ...">Содержание мета-тегов title, keywords, description 
      имеют важное значение для рейтинга страниц в поисковых системах. Подробнее об оптимизации этих мета-слов вы можете узнать из статьи «Продвижение сайта – SEO-оптимизация».
    • руководство для поисковых систем: robots. Вы можете управлять поведением роботов поисковых систем – индексировать страницу, переходить по гиперссылкам на странице, сохранять архивную копию страницы и т. д. Это делается командой:
      <mеta name = "robot_name" content = "команды" />
      Используйте «GOOGLEBOT» для Google, «SLURP» для Yahoo !, «MSNBOT» для поисковой системы Microsoft BING или «robots» для всех поисковых систем.В качестве «команд» вы можете использовать:noindex – отключает индексацию страницы,
      nofollow – отключает отслеживание гиперссылок на странице,
      noarchive – отключает резервное копирование страницы
      По умолчанию, поисковые системы индексируют страницы и переходят по гиперссылкам в поисках новых страниц. Поэтому, если вы хотите, чтобы страница была проиндексирована, а гиперссылки индексировались, вы можете просто пропустить написание мета слова robots.
      Инструкции robots применяются только к странице, для которой написан мета-тег robots. Если у вас есть много страниц, для которых вы хотите установить одинаковое поведение для роботов, лучше использовать файл robots.txt. О правилах создания этого файла вы можете узнать из статьи robots.txt – запреты для поисковых роботов.
  • автор страницы author. Вы можете обозначить свои веб-страницы, указав свое имя мета тегом автора следующим образом:
    <mеta name = "author" content = "Ваше имя" />
  • перенаправление на другой адрес – refresh. Это мета-слово используется при изменении адреса вашего сайта, но вы не хотите терять пользователей, которые после старых гиперссылок попадают на старый адрес.Перенаправление происходит в следующем порядке:
    <mеta name = "refresh" content="5 url = "http: //www.new адрес страницы" />
    число 5, в этом случае, означает, что перенаправление произойдет через 5 секунд – обычно достаточно времени, чтобы пользователь прочитал ваше сообщение о перемещении сайта на новый адрес. После «url» – новый адрес сайта.
VECHNOST
VECHNOST
Наша веб-студия — это то место, где рождаются оригинальные идеи, выдвигаются необычные предложения и находятся совершенно уникальные и, главное, действенные пути решения самых сложных задач! Комплексный подход к проектам: разработка сайтов, поддержка, эффективное продвижение.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Заказ услуги

Pin It on Pinterest

Открыть чат
1
Задать вопрос
Здравствуйте! 👋
У вас возникли вопросы?