Html head: Тег | htmlbook.ru

Leave a Comment / Html / By /

Содержание

Что можно положить в тег / Хабр

Рекомендуемый минимум

Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--
   Вышеуказанные 2 мета-тега *должны* стоять как можно раньше в <head>.
   для обеспечения правильного отображения документов.
   Любой другой элемент заголовка должен идти *после* этих тегов.
  -->
  <title>Заголовок страницы</title>
</head>

meta charset — определяет кодировку веб-сайта, стандартом является utf-8.

meta name="viewport" — настройки viewport, связанные с мобильной отзывчивостью

width=device-width — физическая ширина устройства (отлично подходит для мобильных устройств!)

initial-scale=1 — начальный масштаб, 1 означает отсутствие масштабирования.

Элементы

Допустимые элементы <head> включают

base, link, meta, noscript, script, style, template и title.

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

<!--
 Установите кодировку символов для этого документа так, чтобы
 все символы в пространстве UTF-8 (например, эмодзи)
 отображались правильно.
-->
<meta charset="utf-8">
<!-- Установите заголовок документа -->
<title>Заголовок страницы</title>
<!-- Установите базовый URL для всех относительных URL в документе -->
<base href="https://example.com/page.html">
<!-- Ссылка на внешний файл CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Используется для добавления CSS в документ. Используется для важной стилизации -->
<style>
/* ... */
</style>
<!-- Ссылка на внешний JavaScript файл -->
<script src="script.js"></script>
<!-- Используется для добавление JS в документ-->
<script>
 // функция(и) идут здесь
</script>
<!-- Используется на случай если JavaScript отключен в браузере -->
<noscript>
 <!-- Альтернатива, когда JS отключен -->
</noscript>
<!-- Используется для объявления HTML-фрагментов, которые могут быть клонированы и вставлены в документ.
  Если указан в <head>, то <template> может содержать только метаданные -->
<template>
  
</template>

Мета

<!--
 Вышеуказанные 2 мета-тега должны стоять как можно раньше в <head>.
 для обеспечения правильного отображения документов.
 Любой другой элемент заголовка должен идти после этих тегов.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
 Позволяет контролировать, откуда загружаются ресурсы.
 Поместите как можно раньше в <head>, так как тег 
 применяется только к ресурсам, которые объявлены после него.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Название веб-приложения (должно использоваться только в том случае, если веб-сайт используется как приложение) -->
<meta name="application-name" content="Имя приложения">.
<!-- Цвет вкладки для Chrome на Android, Vivaldi, Safari 15 -->
<meta name="theme-color" content="#4285f4">
<!-- Краткое описание документа (ограничение до 150 символов) -->
<!-- Это содержимое может использоваться в результатах поисковых систем.
 
  -->
<meta name="description" content="Описание страницы">.
<!-- Управление поведением поисковых машин при осмотре и индексации сайта -->
<meta name="robots" content="index,follow"><!-- Все поисковые системы -->
<meta name="googlebot" content="index,follow"><!-- Специфика Google -->
<!-- Указывает Google не показывать поисковую строку sitelinks -->
<meta name="google" content="nositelinkssearchbox">
<!-- Указывает Google не переводить документ -->
<meta name="google" content="notranslate">
<!-- Проверить право собственности сайта -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Яндекс Вебмастерам -->
<meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="verification_token"><!-- Alexa Console -->
<meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console-->
<meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web -->
<!-- Укажите программное обеспечение, использованное для создания документа (например, WordPress, Dreamweaver) -->
<meta name="generator" content="название программного обеспечения">
<!-- Краткое описание темы вашего документа -->
<meta name="subject" content="тема вашего документа">
<!-- Дает общую возрастную оценку, основанную на содержании документа -->
<meta name="rating" content="General">
<!-- Позволяет контролировать, как передается информация о реферере -->
<meta name="referrer" content="no-referrer">
<!-- Отключить автоматическое определение и форматирование возможных телефонных номеров -->
<meta name="format-detection" content="phone=no">
<!-- Полностью отказаться от предварительной выборки DNS, установив значение "off" -->
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- Указывает документ, который будет отображаться в определенном фрейме -->
<meta http-equiv="Window-Target" content="_value">
<!-- Гео-теги -->
<meta name="ICBM" content="широта, долгота">.
 
 
  <meta name="geo.position" content="широта;долгота">
<meta name="geo.region" content="country[-state]"><!-- Код страны (ISO 3166-1): обязательный, код штата (ISO 3166-2): необязательный; например, content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- например, content="New York City" -->
<!-- Монетизация веб-сайтов https://webmonetization.org/docs/getting-started -->
<meta name="monetization" content="$paymentpointer.example">

  • ​ Мета-теги, которые понимает Google

  • ​ WHATWG Wiki: MetaExtensions

  • ​ ICBM в Википедии

  • ​ Геотеги в Википедии

Ссылки

 
 
<!-- Путь до внешней таблицы стилей -->
<link rel="stylesheet" href="https://example.com/styles.css">.
<!-- Помогает предотвратить проблемы дублированного контента -->
<link rel="canonical" href="https://example.com/article/?page=2">
<!-- Ссылки на AMP HTML версию текущего документа -->
<link rel="amphtml" href="https://example. com/path/to/amp-version.html">
<!-- Ссылка на JSON-файл, в котором указаны данные для "установки" веб-приложения -->
<link rel="manifest" href="manifest.json">
<link rel="manifest" href="manifest.webmanifest">
<!-- Ссылки на информацию об авторе (авторах) документа -->
<link rel="author" href="humans.txt">
<!-- Ссылается на заявление об авторском праве, применимое к контексту ссылки -->
<link rel="license" href="copyright.html">
<!-- Дает ссылку на место в вашем документе, который может быть на другом языке -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<!-- Предоставляет информацию об авторе или другом человеке -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:[email protected]">.
<link rel="me" href="sms:+15035550125">
<!-- Ссылки на документ, описывающий коллекцию записей, документов или других материалов, представляющих исторический интерес -->
<link rel="archives" href="https://example.
  com/archives/">
<!-- Ссылки на ресурс верхнего уровня в иерархической структуре -->
<link rel="index" href="https://example.com/article/">
<!-- Обеспечивает самостоятельную ссылку - полезно, когда документ имеет несколько возможных ссылок -->
<link rel="self" type="application/atom+xml" href="https://example.com/atom.xml">
<!-- Первый, последний, предыдущий и следующий документы в серии документов, соответственно -->
<link rel="first" href="https://example.com/article/">
<link rel="last" href="https://example.com/article/?page=42">
<link rel="prev" href="https://example.com/article/?page=1">
<link rel="next" href="https://example.com/article/?page=3">
<!-- Используется, когда для ведения блога используется сторонний сервис -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
<!-- Формирует автоматический комментарий, когда другой блог WordPress ссылается на ваш блог WordPress или пост -->
<link rel="pingback" href="https://example.
 
 com/xmlrpc.php">
<!-- Уведомляет URL, когда вы ссылаетесь на него в вашем документе -->
<link rel="webmention" href="https://example.com/webmention">
<!-- Позволяет размещать сообщения на вашем собственном домене с помощью клиента Micropub -->
<link rel="micropub" href="https://example.com/micropub">
<!-- Open Search -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Заголовок поиска">.
<!-- Фиды -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
<!-- Prefetching, preloading, prebrowsing -->
<!-- Дополнительная информация: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.
  example.com/">
<link rel="prerender" href="https://example.com/">.
<link rel="preload" href="image.png" as="image">

  • ​ Link Relations

Иконки

<!-- Для IE 10 и ниже -->
<!-- Поместите favicon.ico в корневой каталог - тег не нужен -->
<!-- Иконка в максимальном разрешении, для которого она нам нужна -->
<link rel="icon" href="/path/to/icon.png">
<!-- Иконка Apple Touch (повторное использование 192px icon.png) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- Значок прикрепленной вкладки Safari -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">

  • ​ Все о фавиконах (и сенсорных иконках)

  • ​ Создание прикрепленных иконок вкладок

  • ​ Favicon Cheat Sheet

  • ​ Иконки и цвета браузера

Социальные сети

Facebook Open Graph

Большинство материалов передается на Facebook в виде URL, поэтому важно, чтобы вы разметили свой сайт тегами Open Graph, чтобы взять под контроль то, как ваши материалы появляются на Facebook.  Подробнее о разметке Facebook Open Graph

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Заголовок содержимого">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:alt" content="Описание того, что находится на изображении (не подпись)">
<meta property="og:description" content="Описание">
<meta property="og:site_name" content="Название сайта">
<meta property="og:locale" content="ru_RU">
<meta property="article:author" content="">

  • ​ Open Graph protocol

  • ​ Протестируйте свою страницу с помощью Facebook Sharing Debugger

Twitter Card

С помощью Twitter Cards вы можете прикреплять к твитам фотографии, видео и мультимедийные файлы, тем самым способствуя привлечению трафика на ваш сайт.  Подробнее о Twitter Cards

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Заголовок контента">.
<meta name="twitter:description" content="Описание контента менее 200 символов">.
<meta name="twitter:image" content="https://example.com/image.jpg">.
<meta name="twitter:image:alt" content="Текстовое описание изображения, передающее его суть пользователям с ослабленным зрением. Максимум 420 символов.">

  • ​ Начало работы с карточками — Twitter Developers

  • ​ Проверьте свою страницу с помощью Twitter Card Validator

Twitter Privacy

Если вы встраиваете твиты в свой сайт, Twitter может использовать информацию с вашего сайта для адаптации контента и предложений для пользователей Twitter.  Подробнее о возможностях конфиденциальности Twitter.

<!-- запретить Twitter использовать информацию о вашем сайте в целях персонализации -->
<meta name="twitter:dnt" content="on">
Schema.org
<html lang="" itemscope itemtype="https://schema.org/Article">
   <head>
     <link rel="author" href="">
     <link rel="publisher" href="">
     <meta itemprop="name" content="Заголовок контента">.
     <meta itemprop="description" content="Описание содержимого менее 200 символов">.
     <meta itemprop="image" content="https://example.com/image.jpg">

Примечание: Эти мета-теги требуют добавления атрибутов itemscope и itemtype к тегу <html>.

  • ​ Начало работы — schema.org

  • ​ Протестируйте свою страницу с помощью Rich Results Test

Pinterest

Pinterest позволяет запретить людям сохранять страницы вашего сайта, согласно их центру помощи. Описание description является необязательным.

<meta name="pinterest" content="nopin" description="Извините, вы не можете сохранить с моего сайта!">.
Facebook Instant Articles
<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">
<!-- URL веб-версии вашей статьи -->
<link rel="canonical" href="https://example.com/article.html">
<!-- Стиль, который будет использоваться для этой статьи -->
<meta property="fb:article_style" content="myarticlestyle">

  • ​ Создание статей — мгновенные статьи

  • ​ Образцы кода — мгновенные статьи

OEmbed
<link rel="alternate" type="application/json+oembed"
 href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json"
 title="Профиль oEmbed: JSON">
 
<link rel="alternate" type="text/xml+oembed"
 href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml"
 title="oEmbed Profile: XML">

  • ​ oEmbed format

QQ/Wechat

Пользователи обмениваются веб-страницами в qq wechat с помощью форматированного сообщения

<meta itemprop="name" content="название акции">
<meta itemprop="image" content="http://imgcache. qq.com/qqshow/ac/v4/global/logo.png">
<meta name="description" itemprop="description" content="поделиться содержимым">

  • ​ Code Format Docs

Браузеры / Платформы

Apple iOS
<!-- Баннер умного приложения -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
<!-- Отключить автоматическое определение и форматирование возможных телефонных номеров -->
<meta name="format-detection" content="phone=no">
<!-- Иконка запуска (180x180px или больше) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- Изображение экрана запуска -->
<link rel="apple-touch-startup-image" href="/path/to/launch.png">
<!-- Заголовок значка запуска -->
<meta name="apple-mobile-web-app-title" content="Название приложения">.
<!-- Включить автономный (полноэкранный) режим -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Внешний вид строки состояния (не влияет, если не включен автономный режим) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Глубокое связывание приложений iOS -->
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample. com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">

  • ​ Configuring Web Applications

Google Android
<!-- Цветовая тем приложения -->
<meta name="theme-color" content="#E64545">
<!-- Добавить на главный экран -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Дополнительная информация: https://developer.chrome.com/multidevice/android/installtohomescreen -->
<!-- Глубокое связывание приложений Android -->
<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com">
Google Chrome
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">.
<!-- Отключить подсказку перевода -->
<meta name="google" content="notranslate">
Microsoft Internet Explorer
<!-- Заставить IE 8/9/10 использовать свой последний движок рендеринга -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Отключить автоматическое определение и форматирование возможных телефонных номеров расширением для браузера Skype Toolbar-->
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
<!-- Плитки Windows -->
<meta name="msapplication-config" content="/browserconfig. xml">

Минимально необходимая разметка xml для browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="small.png"/>
            <square150x150logo src="medium.png"/>
            <wide310x150logo src="wide.png"/>
            <square310x310logo src="large.png"/>
        </tile>
    </msapplication>
</browserconfig>

  • ​ Ссылка на схему конфигурации браузера

Браузеры (китайские)

360 Browser
<!-- Выбор порядка движков рендеринга -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
QQ Mobile Browser
<!-- Фиксирует экран в заданной ориентации -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- Отображение этого документа в полноэкранном режиме -->
<meta name="x5-fullscreen" content="true">
<!-- Документ будет отображаться в "режиме приложения" (полноэкранный режим и т. д.) -->
<meta name="x5-page-mode" content="app">
UC Mobile Browser
<!-- Фиксация экрана в заданной ориентации -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- Отображение этого документа в полноэкранном режиме -->
<meta name="full-screen" content="yes">
<!-- Браузер UC будет отображать изображения, даже если находится в "текстовом режиме" -->
<meta name="imagemode" content="force">
<!-- Документ будет отображаться в "режиме приложения" (полноэкранный режим, запрещающий жест и т.д.) -->
<meta name="browsermode" content="application">
<!-- Отключение "ночного режима" браузера UC для этого документа -->
<meta name="nightmode" content="disable">
<!-- Упростить документ, чтобы уменьшить передачу данных -->
<meta name="layoutmode" content="fitscreen">
<!-- Отключить функцию браузера UC "увеличивать масштаб шрифта, когда в документе много слов" -->
<meta name="wap-font-scale" content="no">

  • ​ UC Browser Docs

Ссылки на приложения

<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org. applinks">
<!-- Web fall back -->
<meta property="al:web:url" content="https://applinks.org/documentation">

  • ​ Ссылки на приложения

Другие ресурсы

  • ​ HTML5 Boilerplate Docs: The HTML

  • ​ HTML5 Boilerplate Docs: Extend and customize

Связанные проекты

  • Atom HTML Head Snippets — Atom пакет для HEAD сниппетов

  • Sublime Text HTML Head Snippets — пакет Sublime Text для HEAD сниппетов

  • head-it — CLI интерфейс для HEAD сниппетов

  • vue-head — Манипулирование метаинформацией тега HEAD для Vue.js

Другие форматы

  • ​ PDF eng

​ Переводы

  • ​ Индонезийский

  • ​ Бразильский португальский

  • ​ Китайский (упрощенный)

  • ​ Немецкий

  • ​ Итальянский

  • ​ Японский

  • ​ Корейский

  • ​ Испанский

  • ​ Турецкий

​ Contributing

Откройте issue или PR, чтобы предложить изменения или дополнения.

​ Contributors

Посмотрите на всех супер классных авторов ​

​ Автор оригинального репозитория

Josh Buchea

​ Поддержка

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

  • ​ Sponsor me on GitHub

  • ​ Star this project on GitHub

  • ​ Следуйте за Джошем на GitHub

  • ​ Следуйте за Джошем в Twitter

Всем кто помогает, спасибо! ​

— Josh

Примечание автора: это русский перевод репозитория HEAD от Josh Buchea. Мы поддерживаем русскую версию в отдельном репозитории, куда вы можете отправлять issue или PR напрямую, если нашли неточности или вам есть, что добавить. Публикуем перевод на Хабре, чтобы поделиться с русскоязычным сообществом полезным материалом.

Другие важные статьи

Семантическая вёрстка

Pixel Perfect

Стоит ли делать слайдеры на CSS

Что использовать: ссылки или кнопки

Когда использовать флексы, а когда гриды

— HTML — Дока

  1. Кратко
  2. Пример
  3. Как пишется
  4. На практике
    1. Дока Дог советует
    2. Алёна Батицкая советует
  5. На собеседовании
    1. Почему принято размещать <link> со стилями внутри <head>, а <script> перед закрывающим тегом </body>? Когда можно нарушить это правило?

Кратко

Скопировано

Элемент <head> содержит основную информацию о документе: метаданные (например, заголовок окна или кодировку), ссылки на скрипты и таблицы стилей.

Эта информация не отображается на странице браузера. Пользователи увидят только заголовок окна страницы — его задаёт тег <title>, ну и фавиконку, если вы её поставите.

Пример

Скопировано

<html>  <head>    <title>Заголовок страницы</title>  </head></html>
          <html>
  <head>
    <title>Заголовок страницы</title>
  </head>
</html>

Как пишется

Скопировано

Кроме <title>, внутри контейнера <head> можно разместить и другие элементы: <base>, <link>, <meta>, <script>, <style>. Вот пример того, как можно поставить фавиконку — маленькую иконку в углу вкладки браузера.

<head>  <link rel="shortcut icon" type="image/png" href="/favicon. png"></head>
          <head>
  <link rel="shortcut icon" type="image/png" href="/favicon.png">
</head>

На практике

Скопировано

Дока Дог советует

Скопировано

🛠 <head> — это мозги, которые всем управляют. Метаданные и стили, которые прописываются в <head>, указывают, как ваша страница ведёт себя в тех или иных случаях.

Алёна Батицкая советует

Скопировано

🛠 <head> является невидимой частью вашей страницы. По факту это блок, предназначенный для технической информации.

Единственное, что торчит наружу — заголовок страницы и фавиконка.

🛠 Есть ещё метатеги, нужные для правильного отображения сниппета вашего сайта в поисковых системах.

Поскольку этот тег невидим для пользователя, то и применять к нему стили не имеет никакого смысла. Вы просто не увидите никакого результата. Не тратьте своё время 🙂

На собеседовании

Скопировано

❓

Почему принято размещать <link> со стилями внутри <head>, а <script> перед закрывающим тегом </body>? Когда можно нарушить это правило?

Скопировано

Это вопрос без ответа. Вы можете помочь! Почитайте о том, как контрибьютить в Доку.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

<caption>

ctrl + alt + ←

→

<meta>

ctrl + alt + →

Что такое теги заголовков HTML? Как они работают для SEO?

Что такое теги заголовков?

 Теги заголовков HTML используются для того, чтобы отличать заголовки (h2) и подзаголовки (h3–h6) страницы от остального контента. Эти теги также известны веб-мастерам как теги заголовков или просто теги заголовков.

Наиболее важным тегом заголовка является тег h2, а наименее важным — тег h6. В кодировании HTML теги заголовков от h2 до h6 образуют нисходящую иерархию. Это означает, что если вы пропустите любой из номеров тегов, структура заголовков будет нарушена, что не идеально для SEO на странице.

Например, если ваш сайт начинается с тега h2, за которым следует тег h4, иерархия будет нарушена, а это означает, что структура заголовка не так оптимизирована для SEO. Однако это не относится к восходящей структуре, которая может без проблем перейти с h5 на h3.

В идеале каждая страница должна иметь тег h2, но не более одного (если только вы не используете HTML5, подробнее об этом ниже).

Что такое теги заголовков HTML в SEO?

 Мы используем H-теги, чтобы лучше понимать структуру текста на странице.
  • Джон Мюллер, Google

Для поисковой оптимизации HTML-теги заголовков служат двум основным целям:

  1. Структурирование страницы для удобства чтения
  2. Релевантность к ключевым словам

    5

    5 1. Сделайте страницу более читабельной

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

    Посмотрите на HTML-теги заголовков вашей страницы как на способ создания плана или наброска вашей статьи, используя основной текст для заполнения подробностей и примеров.

    Фактически, вы можете посмотреть на заголовки HTML в этой статье в качестве примера. Вот заголовки этой статьи:

    Что такое теги заголовков?


    Что такое теги заголовков HTML в SEO?


    1. Сделать страницу более читабельной


    2. Сделайте страницу более релевантной


    Как писать HTML-заголовки для SEO


    Что не следует делать с HTML-заголовками


    Это соответствует традиционному плану этой статьи:

    • Что такое теги заголовков?
    • Что такое теги заголовков HTML в SEO?
    • Сделать страницу более читабельной
    • Сделать страницу более релевантной
    • Как написать HTML-заголовки для SEO

    Что нельзя делать с HTML-заголовками

    2.

    Сделать страницу более релевантной

    Google видит текст используется в тегах заголовка HTML как более ценный или имеющий более высокий приоритет, чем остальной текст на странице. Таким образом, слова, используемые в тегах заголовков, имеют более высокий вес, когда Google пытается выяснить, соответствует ли страница запросу пользователя. На самом деле, тег h2 на странице — одно из самых важных мест для использования ключевого слова.

    Например, если ключевое слово, на которое вы хотите настроить таргетинг, — «SEO на странице», вы должны использовать его в своих тегах h2 и тематически связанных словах в своем плане:

    • SEO на странице: полное руководство
    • Что такое SEO страницы?
    • Что такое факторы ранжирования на странице?
    • Лучшие на странице методы SEO
    • Robots.txt
    • XML Карта сайта
    • Скорость
    • HTML заголовки
    • Ключевые слова на странице0018

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

    Это не случай наполнения ключевыми словами. Благодаря семантической паутине и ключевым словам LSI лучше использовать родственные слова, которые усиливают актуальность, качество и глубину фрагмента контента для запроса пользователя.

    Как писать заголовки HTML для SEO

    То, как вы пишете заголовки и подзаголовки, зависит от того, о каком теге заголовка HTML вы говорите.

    • Разместите теги h2 в верхней части страницы (конечно же).
    • Используйте слова, которые люди будут использовать при поиске того, о чем ваш контент.
    • Если вы нацелены на вопрос, поместите вопрос в тег h2.
    • Если вы пишете практическое руководство, поместите каждый шаг в тег h3.
    • Для статей без инструкций используйте ключевые слова LSI и другие семантически связанные слова в тегах h3-h6. Это помогает усилить актуальность и устранить двусмысленность.

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

    Найдите возможность получить избранные фрагменты для своего сайта.

    Использование заголовков HTML для целей поиска

    Содержимое вашего заголовка играет роль в сопоставлении вашего содержимого с целью искателя, помимо простого ранжирования по ключевым словам.

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

    Используйте заголовки HTML, чтобы нацеливаться на следующие типы запросов:

    • «Что такое»: Поскольку вы нацелены на вопрос, вам нужно использовать его в теге

      . Сохраняйте ответ на вопрос рядом с тегом

      , чтобы Google легче его находил.

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

      , если инструкции являются частью большой статьи, или теги

      , если инструкции являются основной частью контента.

    • Коммерческое назначение: Ранее мы рассмотрели страницы продуктов и категорий. Вы также можете использовать теги

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

     

                               

    Что такое цель поиска?                                  

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

     

    Использование заголовков HTML в HTML5

    В то время как страницы, использующие HTML4 или более ранние версии, должны придерживаться правила 1 тег

    на странице, те, кто использует HTML5, фактически могут использовать несколько тегов заголовков.

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

    .

    Так, например, статья на HTML-странице старой школы будет выглядеть так:

    Как сделать SEO


    Шаг 1: Техническое SEO


    Подробное объяснение.


    Шаг 2: SEO на странице


    Подробное объяснение шага 2.


    Однако при использовании HTML5 эта страница может выглядеть так: это:

    Как сделать SEO



    Шаг 1: Техническое SEO


    Подробное объяснение.




    Шаг 2: SEO на странице


    < p>Подробное объяснение



    Теперь заголовкам разделов можно придать должное значение на странице, но в контексте всей статьи.

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

    Что не следует делать с тегами заголовков

    • Не заполняйте теги заголовков ключевыми словами.
    • Не используйте более одного тега h2 на странице. Обычно страницы имеют один заголовок h2, и включение двух может заставить поисковые системы подумать, что это попытка включить больше ключевых слов для SEO в несколько тегов h2. Контент лучше разделить на две отдельные темы на отдельных страницах со своими тегами h2. Это имеет больше смысла как для читателей, так и для поисковых роботов, однако разрешено использование нескольких тегов h2.
    • Не используйте теги заголовков в качестве скрытого текста. Любой скрытый текст может привести к штрафам для вашего сайта, особенно если скрытая часть является компонентом, влияющим на SEO.
    • Не повторяйте теги заголовков на разных страницах вашего сайта. Хорошей практикой является использование уникальных тегов заголовков на вашем сайте. Избегайте использования идентичного содержимого как для тега h2, так и для метатега заголовка вашей страницы.
    • Не используйте теги заголовков для стилизации текста, а используйте их для представления организованного и структурированного контента на страницах. Используйте таблицы стилей CSS для стилизации.

    Заголовки

    Заголовки Разрешенный контекст: %Body.Content
    Модель содержимого: %text

    HTML определяет шесть уровней заголовков. Элемент заголовка подразумевает все меняется шрифт, разрывы абзаца до и после, а также любой белый пространство, необходимое для отображения заголовка. Элементы заголовка: h2, h3, h4, h5, H5 и H6, где h2 является самым высоким (или самым важным) уровнем и H6 минимум. Например:

      
    Это заголовок верхнего уровня
      Вот текст.
 
    Заголовок второго уровня
      Вот еще немного текста.

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

    Заголовки играют сходную со списками роль в структурировании документов и принято нумеровать заголовки или включать графику, которая действует как маркер в списках. HTML 3.0 распознает это с помощью атрибутов, которые помогают с нумерацией заголовков и позволяют авторам указывать пользовательскую графику.

    Стиль нумерации определяется таблицей стилей, например.

    1. В таблице стилей указывается, нумеруются ли заголовки и какой стиль используется для отображения текущего порядкового номера, например. арабский, верхняя буква, нижняя буква, верхняя буква, нижняя буква или нумерация схема, соответствующая текущему языку.
    2. Наследуется ли родительская нумерация, т.е. «5.1.d», где 5 текущий порядковый номер для заголовков h2, 1 — номер для h3 заголовки и 4 для заголовков h4.

    Атрибуты seqnum и skip можно использовать для переопределить обработку порядковых номеров заголовков по умолчанию и предоставить для непрерывности с нумерованными списками.

    Атрибут dingbat или src может использоваться для укажите изображение в виде маркера, которое будет помещено рядом с заголовком. расположение этой графики контролируется таблицей стилей. графика предназначена только для декоративных целей и молча игнорируется на неграфические пользовательские агенты HTML.

    Перенос слов

    Пользовательские агенты могут свободно переносить строки на пробельные символы, чтобы убедитесь, что строки соответствуют текущему размеру окна. Используйте   сущность для символа неразрывного пробела, когда вы хотите чтобы убедиться, что линия не сломана! В качестве альтернативы используйте NOWRAP атрибут, чтобы отключить перенос слов, и элемент
    , чтобы принудительно разрывы строк там, где это необходимо.

    Netscape включает два тега: . .. и . Первый отключает перенос слов между началом и конец тега NOBR, в то время как WBR для редкого случая, когда вы хотите указать где разорвать линию, если это необходимо. Должен ли HTML 3.0 предоставлять механизм, эквивалентный WBR (либо тег, либо объект)?

    Разрешенные атрибуты

    ID
    Идентификатор SGML, используемый в качестве цели для гипертекста ссылки или для именования определенных элементов в связанных таблицах стилей. Идентификаторы представляют собой токены NAME и должны быть уникальными в рамках текущий документ.
    LANG
    Это одна из сокращений стандартного языка ISO, например «en.uk» для варианта английского языка, на котором говорят в Соединенном Королевстве. Он может использоваться синтаксическими анализаторами для выбора конкретных вариантов языка для кавычки, лигатуры и правила расстановки переносов и т. д. Язык Атрибут состоит из двухбуквенного кода языка из ISO 639., необязательно, за которым следует точка и двухбуквенный код страны из ISO 3166.
    CLASS
    Это разделенный пробелами список токенов SGML NAME, который используется для подкласса имен тегов. Например,

    определяет заголовок уровня 2, который действует как заголовок раздела. Условно, имена классов интерпретируются иерархически, с наиболее общим класс слева и самый конкретный справа, где классы разделены точкой. Атрибут CLASS чаще всего используется для прикрепить к какому-либо элементу другой стиль, но рекомендуется где практические имена классов должны быть выбраны на основе семантику элемента, так как это позволит использовать его в других целях, таких как ограничение поиска по документам путем сопоставления класса элемента имена. Соглашения по выбору имен классов выходят за рамки данной спецификации.

    ВЫРАВНИВАНИЕ
    Заголовки обычно выравниваются по левому краю. ВЫРАВНИВАНИЕ Атрибут может использоваться для явного указания горизонтального выравнивание:
    align=left
    Заголовок выравнивается по левому краю (значок по умолчанию).
    align=center
    Заголовок центрирован.
    align=right
    Заголовок выравнивается по правому краю.
    align=justify
    Строки заголовков выравниваются там, где практично, в противном случае это дает тот же эффект, что и по умолчанию выравнивание = установка по левому краю.

    Например:

     
    Это заголовок по центру
    
Вот немного текста. 
     и это выравнивание по правому краю
заголовок
     Вот еще немного текста.
    CLEAR
    Этот атрибут является общим для всех блочных элементов. Когда текст обтекает рисунок или таблицу на полях, иногда требуется чтобы начать элемент, такой как заголовок, абзац или список, под рисунком а не рядом с ним. Атрибут CLEAR позволяет вам двигаться вниз безусловно:
    clear=left
    двигаться вниз до тех пор, пока левое поле не станет чистым
    clear=right
    двигаться вниз до тех пор, пока правое поле не станет чистым
    очистить=все
    двигаться вниз, пока оба поля не станут чистыми

    В качестве альтернативы вы можете разместить элемент рядом с фигура только до тех пор, пока есть достаточно места. Необходимая минимальная ширина указывается как:

    clear=»40 en»
    двигаться вниз до тех пор, пока не останется не менее 40 единиц en
    clear=»100 пикселей»
    двигаться вниз, пока не будет не менее 100 пикселей бесплатно

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

    SEQNUM
    Порядковый номер связан с каждым уровнем заголовок с верхнего уровня (h2) на нижний уровень (H6). Этот атрибут используется для установки порядкового номера, связанного с уровнем заголовка текущий элемент на заданное число, например. ПОСЛЕДОВАТЕЛЬНОСТЬ=10. Как правило, порядковый номер инициализируется 1 в начале документа и увеличивается после каждого элемента заголовка. Он сбрасывается на 1 любым элемент заголовка более высокого уровня, например. заголовок h2 сбрасывает последовательность числа от h3 до H6. Стиль нумерации заголовков определяется таблица стилей.
    SKIP
    Увеличивает порядковый номер перед рендерингом элемент. Он используется, когда заголовки были исключены из последовательности. Например, SKIP=3 увеличивает порядковый номер после 3 пропущенных элементов.
    DINGBAT
    Задает пиктограмму, которая будет отображаться перед заголовок. Значок указывается как имя сущности. Список стандартных Имена объектов значков для HTML 3.0 приведены в приложении к настоящему документу. Спецификация.
    SRC
    Задает изображение, которое должно отображаться перед заголовком. изображение указывается как URI. Этот атрибут может появляться вместе с атрибут МД.
    MD
    Задает дайджест сообщения или криптографическую контрольную сумму для связанная графика, указанная атрибутом SRC. Он используется, когда вы хотите быть уверены, что связанный объект действительно тот же, что и задуман автором и никак не изменен. Например, MD=»md5:jV2OfH+nnXHU8bnkPAad/mSQlTDZ», который указывает контрольную сумму MD5.

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

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