Элемент
является единственным обязательным тегом заголовка и служит для того, чтобы дать документу название. Текст, размещенный внутри тега
, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке окна браузера. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
Для каждого документа, элемент
не только необходим, но и очень полезен по ряду причин:
С помощью элемента можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора html-документа и прочие свойства метаданных. Элемент может содержать несколько элементов , потому что в зависимости от используемых атрибутов они несут различную информацию.
Кодировка HTML-страницыКодировку HTML-страницы нужно указывать для того, чтобы веб-браузер мог правильно отображать текст на странице. Если явно не указать кодировку, тогда браузер при отображении страницы будет определять ее автоматически. Если кодировка при этом будет определена не верно, то вместо текста будут отображаться иероглифы.
Самая распространённая современная кодировка — utf-8
.
Указать браузеру пользователя какая кодировка используется на данной странице:
Метаэлементы и поисковые системы
Некоторые поисковые системы во время индексации страницы обращаются к метаэлементам.
Например метаэлементы ниже определяют описание для HTML-документа и ключевые слова (данная информация может использоваться поисковыми системами при отображении документа в поисковой выдаче):
Описание содержимого страницы и ключевые слова:
Для элемента доступны атрибуты charset , content , http-equiv , name , а также глобальные атрибуты.
| charset | Указывает кодировку символов для текущего HTML-документа: |
| content | Определяет возвращаемое значение для свойства. Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name . |
| http-equiv | Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: default-style — указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента , который ссылается на таблицу стилей CSS, или идентификатор элемента , содержащего таблицу стилей. refresh — указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" . Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд: Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url: |
| name | Обеспечивает дополнительное описание тега. Если этот атрибут опущен, он считается эквивалентным атрибуту http-equiv . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop . application-name — указывает название веб-приложения, используемого на странице. author — используется для указания имени автора веб-страницы: description — является описанием страницы, оно чаще всего используется поисковыми системами для определения, чему та посвящена, например: generator — указывает один из пакетов программного обеспечения, используемого для создания документа, например: keywords — содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например: pragma — предотвращает кэширование страницы браузером, например: expires — может быть использован для указания того, когда у страницы должен истечь срок актуальности (и она должна быть удалена из кэша), например: robots — показывает, должны ли поисковые системы включать данную страницу в результаты поиска. Например, значение nofollow устанавливает, что поисковые системы могут включать данную страницу в результаты поиска, но не должны показывать страницы, на которые ведут ссылки с нее: viewport — позволяет разработчикам управлять размером исходной области просмотра на различных устройствах: width=device-width — указывает браузеру задать ширину области просмотра равную ширине экрана устройства какой бы она ни была; initial-scale=1.0 — устанавливает начальный уровень масштабирования при первой загрузке страницы браузером. |
Элемент
в НТМL-документе сообщает браузеру, где находится внешний файл CSS, используемый для форматирования страницы.
Элемент
должен использовать три следующих атрибута:
Вы можете включить правила CSS в НТМL-страницу, поместив их внутри элемента , который обычно находится в элементе .
ЭлементЭлемент
позволяет присоединять к документу различные сценарии. Сам код сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента
.
В следующем примере внешний файл script.js подключается к HTML-документу и генерирует всплывающее окно при клике пользователем по кнопке:
Элемент
служит для указания полного базового URL-адреса документа, относительно которого вычисляются все относительные адреса. Это поможет избежать проблем в случае переноса вашей страницы в другое место. Иначе говоря, все ссылки будут работать, как и прежде.
Основным атрибутом элемента
является href
. В качестве его значения используется адрес базовой папки, относительно которой и будут вычисляться относительные адреса. По умолчанию корневой адрес равен доменному имени сайта.
Еще одним полезным атрибутом этого тега является target
. Атрибут target
определяет, в какое окно будут загружаться страницы по ссылкам, встречающимся в HTML-документе. По умолчанию ссылки открываются в том же окне браузера.
Мета теги в html - это группа специальных тегов, которые находятся между тегами и . Из названия сразу понятно, что располагаются они в начале кода.
Заголовочные теги выполняют две важные задачи:
Особенностью заголовочных тегов является то, что они визуально для пользователя не видны (исключением является тег , который может быть виден во вкладке страницы браузера). Все заголовочные теги являются необязательными, но это не означает, что они не нужны.
Эти теги можно разделить на 4 группы.
Давайте рассмотрим каждую группу в отдельности.
1. Тег- название страницы. Это единственный заголовочный тег, который виден пользователям. Он имеет большую важность для поисковых систем в плане SEO. Именно этот заголовок страницы выводится в выдаче когда указываются названия страниц.
... Заголовок страницы ...Грамотно составить для новичка непросто, поскольку нужно учесть несколько нюансов. Идеальный заголовочный тег должен быть привлекательным для пользователей и содержать ключевые фразы для поисковых систем. Нельзя делать этот тег очень длинным, поскольку поисковыми системами это может быть воспринято как спам. Для каждой страницы этот тег должен быть уникальным!
2. Теги- эти группа служебных тегов, которые содержат в себе информацию о странице. Рассмотрим отдельно каждый из них.
2.1. Meta Content-TypeСинтаксис этого атрибута следующий:
... ...Этот тег указывает кодировку страницы. Конкретное значение записывается через атрибут charset . В данном случае указана кодировка windows-1251 . Чаще всего на сайтах используется кодировка UTF-8 .
В случае, если кодировка сайта и конкретного html-страницы (или же в базе данных) не будут совпадать, то сайт может отображаться через иероглифы в некоторых браузерах.
2.2. Meta description ... ...В атрибуте content содержится описание страницы. Чаще всего это описание используется как сниппет для поисковой системы. Description не является обязательным тегом. Например, поисковая система Яндекс на своё усмотрение определяет сниппет, Google же пользуется этим описанием и выводит так, как оно написано.
2.3. Meta keywords ... ...Этот тег вызывает много споров о том, нужен ли он вообще. Поисковые машины не заявляют, что эти ключевые слова как-то участвуют при ранжировании сайта .
В атрибут content перечисляются ключевые слова. Вряд ли это кардинально повлияет на продвижение сайта, но при каких-то спорных моментах это может повлиять в вашу пользу. Ключевые слова должны быть написаны через запятую. Не пишите ключевые слова, которых нету на странице. Более подробно о Keywords Вы можете прочитать .
2.4. Meta refresh ... ...Существуют множество других метатегов , но они не представляют никакой важности как для браузеров, так и для поисковых систем, поэтому нет смысла их использовать.
2.5. Meta viewport ... ... 3.3. Link rel=Alternate ... ... 4. Тег <script>- подключение java-файлов со скриптами.
... ...В атрибуте src указывается расположение подключаемых java-файлов. Используется для уменьшения кода на странице, а также в случае, если какие-то ява функции необходимо использовать при открытии страницы. Также это ускоряет загрузку страницы, т.к. браузеры обычно кэшируют скрипты.
Уважаемый читатель, мы рассмотрели заголовочные теги html документа. Теперь Вы лучше ориентируетесь в оптимизации сайта и в составлении грамотного кода.
Здравствуйте, уважаемые читатели блога ! Продолжаем рубрику «Создаем сайт с нуля», а в частности тему тегов... И сегодня мы рассмотрим теги, которые присутствуют в любой интернет-страничке - , и . Есть еще один тег, который должен находиться в каждом HTML-документе и про который я уже писал в одной из предыдущих статей — , поэтому затрагивать его мы не будем.
В прошлых статьях рубрики я писал про создание пустого файла в формате html. Фактически, он был использован в статье про (именно в нем были применены теги заголовков). Теперь мы напрямую будем редактировать этот файл с полными описаниями.
И начнем статью именно с редактирования созданного файла. Лично я назвал его index.html, но имя может быть любым. Открываем его с помощью любого текстового редактора (лучше использовать Notepad++, так как в нем есть подсветка кода и другие полезные примочки). И сразу добавим в него теги , и ровно в таком порядке, в каком они написаны. Не забудьте их закрыть, как показано на скриншоте. Документ примет следующий вид:
А теперь рассмотрим значение каждого тега в отдельности. Не зря же они есть в каждом HTML-документе.
Функции тега Итак, тег является контейнерным (). Внутри него заключается все видимое и невидимое содержимое веб-страницы (включая теги и ). Открывающий тег идет сразу после декларации Doctype, а закрывающий стоит в конце документа. Тем самым, он дает понять браузеру, откуда начинать обработку документа и где ее заканчивать.Теоретически, он и сам может понять что и как. Ведь ? Это переводчик языка HTML и вряд ли он начнет обработку с середины документа и закончит ее, не дойдя до конца. Вопрос, конечно, спорный, но я всегда думал (и сейчас не отказываюсь от своего мнения) о том, что написание данного тега обязательно.
Даже учитывая то, что функция данного тега лишь в обозначении границ содержимого , он имеет свои атрибуты (которые сейчас либо не используются вообще, либо используются крайне редко). В разных источниках указываются отличные друг от друга атрибуты, поэтому не осмелюсь выдвигать правильную версию.
Единственное, что точно могу сказать — большинство атрибутов не поддерживаются HTML 4.01 или нежелательны. Хотя один пример все же приведу. — всплывающая подсказка в любом месте документа. Например, при наведении мыши на изображение вы можете увидеть всплывающий текст. Также и в случае с этим тегом:
А вот что вы увидите, наведя курсор на документ с данным содержимым:
Предпочтительнее использовать атрибут title не в теге , а в любых других конкретных участках страницы. Во-первых — удобно, во-вторых — поисковые системы лучше отнесутся к вашему сайту. Непосредственно на оптимизацию ресурса этот тег не оказывает. Идем далее.
Функция тега И следующим на очереди идет тег . В нем содержится вся техническая информация о странице, которая служит для помощи браузеру и поисковым системам. Тег является контейнерным и следует сразу после , только в отличии от последнего, закрывающий тег стоит не в конце документа, а перед открывающим тегом .Какую же информацию можно увидеть в ? А никакую. Все, что находится в пределах этого тега доступно для глаза человека только с помощью просмотра исходного кода страницы. Все содержимое этого тега предназначено для поисковых систем и браузеров . Единственное, что вы хоть как-то можете увидеть это тег , который отвечает за заголовок окна веб-страницы. Вот пример:
Текст после иконки и есть содержание тега . А теперь рассмотрим содержание , которое мы увидеть не можем, но которое является очень важной частью создания и продвижения сайта. В первую очередь это строка
Это мета-тег отвечающий за тип содержимого страницы (Content-Type). В данном случае, это html код в кодировке UTF-8 (content="text/html; charset=UTF-8"). Далее идет тег title, описанный выше. Затем идут строки, начинающиеся с тега . Он указывает на связь с внешним документом. Например, строка
указывает на то, что подключен (rel="stylesheet") файл с (type="text/css"), который находится по такому-то адресу (для уменьшения длины строки, я заменил половин адреса на точки). После обработки данной строки браузером он определит, откуда брать каскадные таблицы стилей .
Вообще, в теге head много информации,о которой можно рассказывать бесконечно долго. Последнее, что стоит отметить (конкретно в случае с ) — наличие тегов описания, ключевых слов и canonical. Я использую плагин All in One SEO Pack , поэтому они и присутствуют в пределах .
В сем привет. Давненько ничего не писал, но сегодня вот решил вас порадовать интересной статейкой про оптимизацию, а если быть конкретнее оптимизацию служебного блока head в html коде сайта. Итак, приступим.
Д ля поисковых роботов не маловажную роль играет структура и содержимое служебного тега head, в котором размещается информация не отображаемая на странице (скрипты, файлы стилей, подключаемые плагины и мета теги).
Все содержимое области head выводится на сайте, при помощи служебного файла wordpress header.php содержимое которого вы можете посмотреть перейдя в админ панель/внешний вид/редактор:
Если, вы внимательно посмотрите на HTML код wordpress блога в область head, а потом сравните это с файлом header.php, то обнаружите, что кроме указанных там вызовов: мета тегов, стилей CSS и заголовка, есть много других строк. Они, как правило, появляются при использовании различных плагинов, которые добавляют свои стили или скрипты в HTML. Иногда, результирующий код получается ну очень большим и захламленным что плохо влияет на продвижение сайта.
Структура и содержимое правильного headВ соответствии со стандартами HTML только несколько тегов, могут быть помещены в раздел head. Это следующие теги: , , , , и .
Самые важные из этих тегов в плане оптимизации страницы это title, который указывает название окна текущего документа и meta - применяется для указания информации об HTML-документе, которая помогает браузерам правильно отображать страницы, а поисковым машинам - их индексировать и ранжировать в выдаче.
Но, зачастую эти теги, либо вообще отсутствуют, либо из-за подключаемых плагинов оказываются в самом конце блока head, что в свою очередь не благоприятно влияет на ранжирование сайта в выдаче. Самым простым способом добавить эти теги для wordpress сайта - установить один из плагинов:
Один из лучших плагинов для оптимизации WordPress блога под поисковые системы. Позволяет вводить мета теги для каждой страницы, менять формат вывода тайтлов и т.д.
Более продвинутая версия All in One SEO Pack. Дополнительно умеет добавлять тег nofollow к ссылкам.
После установки одного из этих плагинов в идеале у вас должно быть содержимое head для wordpress следующего вида:
Оптимизация блока head сайта на wordpress
Ну что постараемся привести код к такому виду? Конечно да!
Избавляемся от лишнего кода в headП ервое, что нужно сделать так это объединить все файлы стилей вашей темы в один общий файл style.css. Для этого откройте последовательно дополнительные файлы стилей скопируйте из них код и вставьте в конец файла style.css После этих действий, можно удалить из header.php код вывода дополнительных стилей. В итоге в html у вас должна остаться только одна строчка подключения стилей вашей темы:
В коде файла шаблона функция реализует большую часть «дополнительных вставок» не нужных для блока head. Просто удалить эту функцию нельзя, так как это непременно повлечет за собой определенные последствия, что негативно может отразиться на работе блога.
Поэтому, лучше будет просто деактивировать подключение в область head стилей плагинов, через файл функций fuctions.php.
Очень важно! Перед какими либо изменениями в файле fuctions.php, не поленитесь сделайте его копию.
Используем следующий алгоритм:
1). Прежде чем начать отключать добавление плагинов в head скопируйте html код который они добавляют.
2). Создайте в области Body дополнительный блок к примеру под названием header:
А тут код плагинов
В этот блок нам нужно вставить код который добавляют плагины, чтобы они не перестали корректно работать.
3). Нужно тщательно просмотреть основной файл php плагина, хуки которого Вы собрались удалить. При помощи сочетания клавиш Ctrl+F отыщите там следующую конструкцию:
Add_action("wp_head", "plugin_function_here");
4). Чтобы корректно избавится от данного вызова, нужно добавить в файл functions.php следующую строку:
Remove_action("wp_head", "plugin_function_here");
5). Сохраняем шаблон и проверяем, что у нас получилось.
Уникальные случаи тоже встречаются, при которых применение remove_action для wp_head() не работает. Приведу в пример WP-PageNavi (версия 2.5.0), там явного вызова функции в wp_head() нет, невзирая на это, плагин подгружает свой файл стилей. Внимательно посмотрите на первоначальный код wp-pagenavi.php, там есть такая функция «Enqueue PageNavi Stylesheets», добавляющая стили через:
Add_action("wp_print_styles", "pagenavi_stylesheets");
Дописываем в самый конец файла функций fuctions.php перед ?>, следующую строку, чтобы отделаться от этого вызова:
Add_action("init", "remheadlink"); function remheadlink() { remove_action("wp_print_styles", "pagenavi_stylesheets"); }
В работе с ненужными вызовами и хуками просматривается определенный принцип – Вы ищите нужную функцию и отключаете ее.
Можно освободиться и от других не нужных элементов, которые вы не используете, применив хаки для functions.php, например:
Add_action("init", "remheadlink"); function remheadlink() { remove_action("wp_head","feed_links_extra", 3); // ссылки на дополнительные rss remove_action("wp_head","feed_links", 2); //ссылки на основной rss и комментарии remove_action("wp_head","rsd_link"); // для сервиса Really Simple Discovery remove_action("wp_head","wlwmanifest_link"); // для Windows Live Writer remove_action("wp_head","wp_generator"); // убирает версию wordpress }
Add_action("init", "remheadlink"); function remheadlink() { remove_action("wp_head","start_post_rel_link",10,0); remove_action("wp_head","index_rel_link"); remove_action("wp_head","rel_canonical"); remove_action("wp_head","adjacent_posts_rel_link_wp_head", 10, 0); remove_action("wp_head","wp_shortlink_wp_head", 10, 0); }
На последних версиях wordpress в блоке head появляется странный скрипт:
Script type text javascript window. wpemojiSettings baseUrl http: s.w.org images core emoji 72x72 ext png source concatemoji http: medicinahouse.ru wp-includes js wp-emoji-release.min.js? ver 4.2.4 !function a, b, c function d a var c b.createElement canvas d c.getContext c.getContext 2d return d d.fillText? d.textBaseline top
Этот скрипт добавляет набор стандартных смайликов Emoji, даже не знаю зачем вордпресс его добавил, ну да ладно. Убрать этот скрипт, можно при помощи добавления в самый конец файла функций, перед знаком?> следующей конструкции:
Add_action("init", "remheadlink"); function remheadlink() { remove_action("wp_head", "print_emoji_detection_script", 7); remove_action("admin_print_scripts", "print_emoji_detection_script"); remove_action("wp_print_styles", "print_emoji_styles"); remove_action("admin_print_styles", "print_emoji_styles"); }
Помимо всего сказанного выше, через файл функций, можно убрать версию скриптов и стилей. Нужно всего навсего добавить код:
Function _remove_script_version($src){ $parts = explode("?", $src); return $parts; } //Это для скрытия версии скриптов add_filter("script_loader_src", "_remove_script_version", 15, 1); //Это для стилей add_filter("style_loader_src", "_remove_script_version", 15, 1);
На этом у меня все. Спасибо за внимание.
Видно, что она состоит из трех основных секций.
Тег ничем особым не отличается, кроме того, что это есть корневой элемент – контейнер для всех остальных блоков. Поэтому приступим к более детальному рассмотрению секции .
Элементы данной секции напрямую не показываются на веб странице. Единственный тег из данной секции, который будет отображать информацию – это тег . В теге , секции , прописывается заголовок веб-страницы этот текст будет выведен в строке заголовка окна браузера.
Заголовок, будет выведен в строке заголовка браузера
Данный тег является единым обязательном тегом в секции .
Кроме тега , в этой секции можно размещать следующие теги: , , , .
ТегЭтот тег указывает браузеру где находятся некие внешние ресурсы, например, внешние стили (CSS). Также при помощи тега и указания соответствующего атрибута rel , можно указать адрес канала RSS, фавиконку для сайта, и другие внешние ресурсы.
Тег
Это универсальный тег, который описывает данные. Тег предоставляет метаданные о документе HTML браузеру. Метаданные, не отображаются, а только используются для служебных целей, либо движком браузера, либо поисковыми пауками. Мета элементы, как правило, используется для описания страницы (description ), указания ключевых слов (keywords ), указание автора документа (author ), указания типа контента и его кодировки, и другие метаданные.
Тег
С помощью данного тега, можно указать браузеру, где он должен искать внешние скрипты:
либо же, вставить скрипт прямо в данную секцию:
document.write("Hello World!")
ТегДанный тег можно использовать, для того, чтобы задать стили, необходимые, только для этой странички, а также, если нету необходимости подключать внешний файл стилей, при помощи тега . Можно задавать более чем один тег
h1 {color: red} p {color: blue}
Вот и вся информация, которую необходимо знать о секции . Далее будем рассматривать секцию , которая будет содержать основной контент веб странички.
