Html head: : элемент метаданных документа — HTML

Leave a Comment / Html / By /

Содержание

🤯 HEAD | HEAD

Простое руководство по HTML-элементам в <head>

Оглавление

  • Рекомендуемый минимум
  • Элементы
  • Мета
  • Ссылки
  • Иконки
  • Социальные сети
    • Facebook Open Graph
    • Twitter Card
    • Twitter Privacy
    • Schema.org
    • JSON-LD
    • Pinterest
    • Facebook Instant Articles
    • OEmbed
    • QQ/Wechat
  • Браузеры / Платформы
    • Apple iOS
    • Google Android
    • Google Chrome
    • Microsoft Internet Explorer
  • Браузеры (китайские)
    • 360 Browser
    • QQ Mobile Browser
    • UC Mobile Browser
  • CSRF
  • Подсказки клиентов
  • Устаревшее
  • Другие ресурсы
  • Связанные проекты
  • Переводы
  • Contributing
    • Contributors
  • Автор
  • Лицензия

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

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

<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">
<link rel="stylesheet" href="/assets/css/print.css" media="print">
<!-- Используется для добавления 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">

<!-- viewport-fit для управления безопасной зоны -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  • contain: вьюпорт должен полностью вмещать веб-контент.
  • cover: веб-контент должен полностью покрывать вьюпорт.
  • auto: значение по умолчанию, работает как contain.

Подробнее в блоке css-live

<!--
 Позволяет контролировать, откуда загружаются ресурсы.
 
 
 Поместите как можно раньше в <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">
<!-- Список ключевых слов -->
<meta name="keywords" content="ваши, теги">
<!-- Краткое описание документа (ограничение до 150 символов) -->
<!-- Это содержимое *может* использоваться в результатах поисковых систем. -->
<meta name="description" content="Описание страницы">.

<!-- Управление поведением поисковых машин при осмотре и индексации сайта -->
<meta name="robots" content="index,follow"><!-- Все поисковые системы -->
<meta name="googlebot" content="index,follow"><!-- Специфика Google -->
<meta name="bingbot" content="index,follow"><!-- Специфика Bing -->
<!-- Как часто посещать сайт роботу-->
<meta content="10 day" name="revisit">
<!-- Дата последнего изменения документа -->
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" />
<!-- Используется как description, но для научных статей-->
<meta name="abstract" content="">
<meta name="topic" content="">
<meta name="summary" content="">
<!-- Для обратной связи -->
<meta name="reply-to" content="email@hotmail.
  com">

Для роботов есть несколько значений:

  • all — нет ограничений на индексирование и показ контента.
  • noindex — не показывать эту страницу в результатах поиска.
  • nofollow
    — не выполнять переход по ссылкам на странице.
  • none — эквивалент noindex, nofollow.
  • noarchive — запрещает показывать ссылку на кеш в результатах поиска.
  • nosnippet — не показывать в результатах поиска текстовый фрагмент или видео.
  • max-snippet: [number] — ограничение на количество символов в текстовом фрагменте
  • max-image-preview: [setting] — определяет максимальный размер изображений, которые могут показываться в результатах поиска для этой страницы.
  • max-video-preview: [number] — задает для фрагмента видео со страницы ограничение по длительности в секундах при показе в результатах поиска.
  • notranslate — не предлагать перевести эту страницу в результатах поиска.
  • noimageindex
    — не индексировать изображения на странице.
  • unavailable_after: [date/time] — запрещает показывать страницу в результатах поиска после даты и времени.
  • noyaca — запрет на использование информации из Яндекс.Каталога для описания в сниппете
  • noodp — запрет на использование описания из dMoz для сниппета;
  • noydir — запрет на использование описания из Yahoo! Directory для сниппета.

значения можно писать через запятую content="max-snippet:-1, max-image-preview:large, max-video-preview:-1". Подробнее в документации 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">
<!-- Подсказывает, что сайт оптимизирован для мобильных устройств-->
<meta name="HandheldFriendly" content="true">
<!-- Указывает автора документа -->
<meta name="author" content="Nikolai Shabalin">
<!-- Принадлежность авторских прав-->
<meta name="copyright" content="Nikolai Shabalin">
<!-- Создатель документа -->
<meta name="creator" content="Nikolai Shabalin">
<!-- Владелец -->
<meta name="owner" content="">
<!-- Перезагружает страницу через указанное количество секунд -->
<meta http-equiv="Refresh" content="20">
<meta http-equiv="Refresh" content="20; URL=page4.
 
 html"> <!-- Перезагружает к указанной странице -->
<!-- Язык документа -->
<meta name="language" content="Russian">

<!-- Соль -->
<meta name="salt" content="21f157b19463e98d0e9723cf486d620a">

Про соль подробнее

<!-- Регистрация доменного имени -->
<meta name="parking" content="имя регистратора">

Подробнее про парковку доменов

<!-- Отключает возможность Скайпа звонить по номерам на странице-->
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

Подробнее про отключение Скайпа

  • 📖 Мета-теги, которые понимает 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">

О human.txt подробнее

<!-- Ссылается на заявление об авторском праве, применимое к контексту ссылки -->
<link rel="license" href="copyright.html">
<!-- Дает ссылку на место в вашем документе, который может быть на другом языке -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<!-- Предоставляет информацию об авторе или другом человеке. 
Используется для RelMeAuth, распределённой формы проверки личности. Смотри https://microformats.org/wiki/RelMeAuth, чтобы узнать больше -->
<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="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, когда вы ссылаетесь на него в вашем документе. Дополнительная информация на https://webmention.net -->
<link rel="webmention" href="https://example.com/webmention">
<!-- Позволяет размещать сообщения на вашем собственном домене с помощью клиента Micropub. Более подробная информация на https://indieweb.org/Micropub  -->
<link rel="micropub" href="https://example.com/micropub">
<!-- Позволяет использовать ваш сайт с [социальным ридером](https://indieweb.org/social_reader) на базе Microsub. Более подробная информация на https://indieweb.org/Microsub -->
<link rel="microsub" href="https://example.com/microsub">
<!-- Позволяет использовать ваш сайт с IndieAuth, для проверки личности с помощью вашего доменного имени.  Подробнее на https://indieauth.net -->
<link rel="token_endpoint" href="https://example.com/token">
<link rel="authorization_endpoint" href="https://example.com/auth">
<!-- 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 rel="modulepreload" href="super-critical-stuff. js"> <!-- Предзагрузка модулей -->
  • 📖 Link Relations
  • 📖 Предзагрузка модулей

⬆ вернуться к началу.

Иконки

<!-- Для IE 10 и ниже -->
<link rel="icon" href="favicon.ico"><!-- 32×32 -->

<link rel="icon" href="favicon.ico"> — необязательно указывать в <head>. Любой сервер ищет favicon.ico, но для этого favicon.ico обязательно нужно положить в корень проекта. От .ico лучше не отказываться, так как могут перестать работать иконки, например в RSS-читалках. В .ico поддерживается прозрачность. На данный момент в Хром есть баг. Если в проекте подключены ICO и SVG версии, то всё равно предпочтение отдаётся ICO.

<link rel="icon" href=" icon.svg" type="image/svg+xml">

Преимущество SVG-фавиконки в том, что, помимо того, что он векторный, он может подстраиваться под тёмную тему с помощью ` @media (prefers-color-scheme: dark)`. Поддержка векторных фавиконок.

<!-- IOS 8+ -->
<link rel="apple-touch-icon" href="apple-touch-icon.png"><!-- 180×180 -->

Используется для отображения ярлыка на домашнем экране IPhone и IPad.

Выше указаны три версии для фавиконки фавиконки, но можно добавить ещё 2, чтобы учесть большинство современных браузеров. Чтобы не увеличивать HTML другие фавиконки добавляют в веб-манифест

<link rel="manifest" href="/manifest.webmanifest">

manifest.webmanifest

{
  "icons": [
    { "src": "192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "12.png", "type": "image/png", "sizes": "512x512" }
  ]
}
  • 📖 Все о фавиконах (и сенсорных иконках)
  • 📖 Создание прикрепленных иконок вкладок
  • 📖 Favicon Cheat Sheet
  • 📖 Иконки и цвета браузера
  • 📖 Как создать Favicon в 2021 году: шесть файлов, которые подходят большинству потребностей

⬆ вернуться к началу.

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

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

JSON-LD

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

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "author": {
      "@type": "Person",
      "name": "Your Name"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Your Organization"
    },
    "headline": "Article Headline",
    "image": "https://example.com/image.jpg",
    "datePublished": "2020-02-05T08:00:00+08:00",
    "dateModified": "2020-03-05T09:20:00+08:00"
  }
</script>
  • Спецификация
  • Официальный сайт
  • Документация от Google

⬆ вернуться к началу.

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">

⬆ вернуться к началу.

CSRF

<!-- Токен для идентификации формы -->
<meta name="csrf-token" content="токен">
<meta name="csrf-param" content="csrf_token">

Подробнее про CSRF-атаки

⬆ вернуться к началу.

Подсказки клиентов

<!-- Включает подсказки клиентов -->
<meta http-equiv="Accept-CH" content="DPR">
<meta http-equiv="Accept-CH" content="DPR, Width">

Подробнее про подсказки клиентов

⬆ вернуться к началу.

Устаревшее

Значок прикрепленной вкладки Safari

В macOS 10.11 в появились закреплённые закладки, но стандартные не подошли. Поэтому создали новый тип фавиконки. Далее эти значки использовались в тач-баре Макбуков.

Для таких значков есть ряд требований:

  • только SVG
  • 100% чёрный вектор
  • с помощью color менять цвет
  • SVG должен быть однослойным
  • viewBox должен быть равен "0 0 16 16"
  • фон должен быть прозрачным
<link rel="mask-icon" href="/path/to/icon. svg" color="blue">

Проблемой было то, что такие значки, хоть они и SVG, никак не менялись для тёмной темы. А прозрачный фон становился контрастным, но вы это не могли контролировать.

Сейчас для тач-бара и закрепленной вкладки хорошо подходят:

  • Apple touch иконки <link rel="apple-touch-icon" href="/custom_icon.png">
  • Фавиконка <link rel="icon" href="favicon.png">
  • Монограмма. Если никаких иконок нет, то значок создаётся из первой буквы заголовка страницы или имени домана верхнего уровня

Начиная с Safari 12 отдельный вариант иконок стал не нужен.

Значок плитки Windows

<meta name="msapplication-TileColor" content="#efefef">

Браузер Edge раньше поддерживал такой формат значков для меню “Пуск”. Для последних версий Windows это больше не требуется

Отображение документа в нужном режиме для IE

В зависимости от переданного значения content заставляет различные версии IE отображать документ в том или ином режиме.

<meta http-equiv="X-UA-Compatible" content="IE=5">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Но начиная с IE11 режимы документов устарели. Режим Edge стал предпочтительным.

shortcut для фавиконок
<link rel="shortcut icon" href="/favicon.ico">

shortcut — использовался исключительно IE.

Почему не стоит использовать shortcut

Яндекс табло

<link rel="yandex-tableau-widget" href="/manifest. json" />

manifest.jons

{
"version": "1.0",
"api_version": 1,
"layout":
	{
	"logo": "https://webliberty.ru/wp-content/themes/lime/images/manifest.png",
	"color": "#e9ffd0",
	"show_title": false
	}
}

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

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

Поддержка прекращена

<!-- 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">

⬆ вернуться к началу.

Первый и последний документы в серии документов

  • Поддержка прекращена
  • Отсутствует в спецификации
  • Обсуждение
<!-- Первый и последний документы в серии документов, соответственно -->
<link rel="first" href="https://example.com/article/">
<link rel="last" href="https://example.com/article/?page=42">

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

  • 📖 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

⬆ вернуться к началу.

🌐 Переводы

  • 🇮🇩 Индонезийский
  • 🇧🇷 Бразильский португальский
  • 🇨🇳 Китайский (упрощенный)
  • 🇩🇪 Немецкий
  • 🇮🇹 Итальянский
  • 🇯🇵 Японский
  • 🇰🇷 Корейский
  • 🇪🇸 Испанский
  • 🇹🇷 Турецкий

⬆ вернуться к началу.

🤝 Contributing

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

🌟 Contributors

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

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

Josh Buchea

  • GitHub: @joshbuchea
  • Twitter: @joshbuchea

💛 Поддержка

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

  • 💛 Sponsor me on GitHub
  • ⭐️ Star this project on GitHub
  • 🐙 Следуйте за Джошем на GitHub
  • 🐦 Следуйте за Джошем в Twitter

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

— Josh

📝 Лицензия

⬆ вернуться к началу.

html — Правильная последовательность подключения файлов в head

Вопрос задан

Изменён 8 месяцев назад

Просмотрен 299 раз

Я не уверен, что подключил файлы в HTML5(head) в правильном порядке.

meta name='viewport' content='width=device-width, initial-scale=1' должен идти до подключения основных стилей или после? meta charset="utf-8" должен быть в самом начале head?

Пожалуйста, проверьте на правильность всю мою последовательность подключения файлов =)

P.S Знаю, что комменты через // не работают в Html5, сделал так для удобного чтения.

<head>
  <script defer type="text/javascript" src="jquery-3.6.0.min.js">
  </script> // Библиотека Jquery
  <script defer type="text/javascript" src="java.js">
  </script> // Язык javascript
  <link type="text/css" rel="stylesheet" href="css/normalize. css"> // Обнулятор Нормалайз
  <link type="text/css" rel="stylesheet" href="css/fonts.css"> // Шрифты
  <link type="text/css" rel="stylesheet" href="css/style.css"> // Основные стили сайта
  <link type="text/css" rel="stylesheet" href="css/media.css"> // Медиа запросы
  <meta charset="utf-8"> // Кодировка символов
  <meta name='viewport' content='width=device-width, initial-scale=1' /> // Нужно для медиа запросов
  <meta content='true' name='HandheldFriendly' />
  <meta content='width' name='MobileOptimized' />
  <meta content='yes' name='apple-mobile-web-app-capable' />
</head>
  • html
  • инспекция-кода

7

  1. Тег <title> вообще отсутствует, это и стандарту не соответствует, и для пользователя так себе, ведь в заголовке вкладки вместо осмысленного текста он увидит просто тест ссылки, а учитывая ширину вкладки, только домен.

  2. Раньше была рекомендация ставить meta charset как можно раньше: по идее браузер встретив этот meta-тег выбрасывает всё, что распарсил до этого, и начинает сначала — ну и чем меньше он выбросит, тем быстрее получится. Возможно, это сейчас неактуально (тем более, большинство серверов умеют выставлять нужную кодировку сразу в http-заголовках), но я не вижу причин не следовать этой рекомендации.

  3. Остальные meta-теги можно располагать в любом порядке.

  4. А вот атрибуты name и content у мета-тегов я бы чисто из соображений читаемости кода поставил в другом порядке: сначала content, а потом name. Хотя браузеру всё равно.

  5. Порядок подключения стилей между собой имеет значение, поскольку при одинаковом приоритете побеждает селектор, написанный позже. В целом твой порядок вроде бы правильный, но меня смущает отдельный файл для media-запросов — я бы располагал их в коде рядом с остальными стилями, а не выносил отдельно.

  6. У скриптов есть атрибут defer, который позволит браузеру продолжить парсить страницу не дожидаясь получения и выполнения скриптов — это хорошо. В таком варианте скрипты выполнятся в заданном порядке после завершения обработки страницы. Очевидно, что async делать нельзя, поскольку второй скрипт наверняка зависит от первого.

  7. Тем не менее, я не стал бы скрипты ставить первыми. Традиционно есть рекомендация ставить вообще в конец body и все стандартные сборщики фреймвёрков так поступают. Хотя defer не мешает парсить страницу, думаю, для этого всё ещё есть интересная причина. Браузер, встречая при парсинге страницы новый ресурс, сразу посылает за ним запрос (иногда даже при предварительном парсинге, когда точно неизвестно, понадобится ли он вообще). В случае скриптов в начале на сервер отправятся запросы за скриптами, а количество соединений с одним доменом при http 1 ограничено 6. Http 2 позволяет батчить запросы и выставлять им приоритеты, так что у defer-скриптов будет приоритет ниже, но большинство серверов эти приоритеты полностью игнорирует. Так что стоит подвинуть скрипты после стилей.

  8. Что касается выбора между концом head и концом body: на странице могут встречаться другие ресурсы — например, картинки. В случае с концом body они будут запрошены до скриптов, что имеет смысл. У теб вообще jquery, так что более-менее адекватную страницу пользователь может увидеть и без скриптов. А у фреймвёрков может быть SSR, благодаря которому тоже можно отправлять уже отрендеренную страницу. Так что я считаю рекомендацию помещать скрипты в конец body актуальной до сих пор.

7

Ваш ответ

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Создание HTML-сайта: Работа с тегом head.

Создание первой html-страницы.

Здравствуйте, уважаемые друзья, блога sdelaemblog. Сегодня продолжим изучение html-кода. И наконец-таки приступим к созданию HTML-страниц сайта. Сегодня еще немного технической информации и в следующих статьях приступим непосредственно к созданию сайта. В прошлой статье, о структуре HTML-кода, мы говорили об обязательных тегах, которые должны быть использованы в html-документе. И один из таких тегов, был тег head, который отвечает за «техническую» часть html-документа. Как мы помним, содержимое данного тега не выводится на страницу, за исключением тега title, который назначает заголовок страницы. И его можно увидеть, например, во вкладке браузера.

Сегодня мы попробуем разобраться, что нужно писать между тегами head и для чего? И в завершении, чтобы не было совсем скучно, выведем какую-нибудь информацию в «теле» документа.

Итак, для начала обзаведемся всем нужным. Что нам сегодня понадобится? Для начала необходимо подготовить папку, то есть создать ее в любом месте на компьютере. И назвать ее так, чтобы нам было понятно, что содержит данная папка. Я, например, назову папку html-site и расположу ее на рабочем столе. Чтобы не потерять. 🙂

И второе, что нам понадобится, для создания, это текстовый редактор. Можно использовать стандартный блокнот, он для этого подойдет, но я предпочитаю, и вам рекомендую использовать текстовый редактор NotePad++. В нем работать будет гораздо удобнее и проще. Тем более, если вы новичок.

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

Открываем папку, которую только что создали. И в ней создаем новый текстовый документ. Назвать его можно, как угодно. Только использовать в названии лучше латиницу, а не кириллицу. Назовем его, например, main. Что будет означать, что это у нас главная страница.

Теперь открываем файл в текстовом редакторе. На данный момент это пустой файл в формате txt. Давайте исправим это недоразумение.

Для начала возвращаемся к истокам. И в первой строке документа указываем необходимый DOCTYPE. Затем, прописываем все обязательные теги, о которых мы говорили в статье о структуре html-документа. У меня в итоге получился такой код:

<!DOCTYPE html>
<html>
 <head>
 <title>Заголовок документа</title>
 </head>
 <body>
 </body>
</html>

У вас DOCTYPE может быть другим, в зависимости от выбранного.

Теперь, чтобы было удобней. Необходимо поменять синтакис документа, при использовании NotePad. Для этого, в верхнем меню выбираем «Файл», затем «Сохранить как», и в появившемся окне, в графе «Тип файла», необходимо выбрать «Hyper Text Markup Language file». И нажать на кнопку «Сохранить». После чего, наш документ становится файлом формата html.

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

Итак, обратим внимание на теги head. На данном этапе, между тегами указан только заголовок страницы и ничего более. Но, что же нужно написать еще между данными тегами. И самое главное зачем? Давайте разбираться.

Для начала, предлагаю изменить заголовок документа. Для этого, пишем нужное словосочетание между тегами title. Например, я напишу: «Главная страница HTML-сайта».

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

<!DOCTYPE html>
<html>
 <head>
 <title>Главная страница HTML-сайта</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta name="description" content="Описание" />
 <meta name="keywords" content="Ключевые слова" />
 <meta name = "robots" content = "index,follow" />
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 </head>
 <body>
 </body>
</html>

Итак, теперь по порядку:

  1.  Тег title — уже знаем, что это и зачем.
  2.  <meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ /> — Это мета тег, который определяет тип документа и его кодировку, для браузера. В данной строке указано, что используется тип документа — HTML. И его кодировка — UTF-8, что означает, что браузер должен распознать символы, как 8-битный Юникод. Также, кодировка может быть другой — windows-1251. Данные кодировки используются для вывода знаков в виде кириллицы. Если данная строка не указана, то браузер попытается сам определить кодировку, что иногда может привести к неправильному отображению символов, например, в виде различных непонятных знаков (кракозябр). В данном случае выбрана кодировка Юникод, так как она более универсальна и удобна.
  3.  description — Мета тег description, предназначен, для описания страниц. Данное описание также не присутствует в видимой части страницы и необходимо, для поисковых систем. Которые в свою очередь могут его использовать, для формирования сниппета поисковой выдачи. Также, актуален в сфере SEO. Данный тег необязателен и используется по желанию.
  4.  keywords — Также предназначен, для поисковых систем. Используется, для указания ключевых слов на странице. И конечно же, используется SEO-мастерами, в продвижении сайта. Тег, как и предыдущий необязателен. Но использования данных двух тегов, может напрямую повлиять на занимаемые позиции в поисковой выдаче сайтом.
  5.  robots — Еще один мета тег, с которым стоит познакомиться, но использовать также необязательно. Данный тег предназначен, для поисковых роботов. Указывает, какие страницы индексировать, а какие нет. Кроме того, указывает, как относиться к ссылкам расположенным на странице. Данный тег имеет четыре значения:
  6. index,follow — означает, что страница должна быть проиндексирована, а также следует перейти по всем ссылкам на странице.
  7. noindex,follow — указывает поисковому роботу, что страницу не нужно индексировать, но при этом следует перейти по всем ссылкам.
  8. index,nofollow — индексировать страницу, но по ссылкам не переходить.
  9. noindex,nofollow — не индексировать страницу и не переходить по ссылкам.
  10.  <link rel=»stylesheet» href=»style.css» type=»text/css» media=»screen» /> — Данная строка говорит браузеру о том, что есть документ описания стилей CSS, адрес которого указан в атрибуте href. Кроме того, указан атрибут, определяющий, на каком устройстве должны быть применены стили данного файла. В данном случае указано, что документ предназначен, для отображения на мониторах компьютеров. Если не указан, принимается по умолчанию. Для использования одинаковых стилей на всех устройствах, можно указать вместо media=»screen» — media=»all».

Теперь, я надеюсь, мы поняли, что желательно указывать между тегами head и зачем?

Создание первой html-страницы.

Сейчас, если мы скопируем данный код и вставим в наш html-документ. Сохраним его и откроем в веб-браузере — будет отображена пустая страница. И чтобы увидеть уже хоть какой-то результат на этом этапе, я предлагаю, написать между тегами body что-нибудь. Что не имеет никакого значения. Для вывода текста воспользуемся одним из тегов заголовка. Например, первого уровня. Таким образом, код между тегами body должен выглядеть так:

<h2>Какой-то текст</h2>

После того, как текст написан, сохраняем документ. И открываем его в браузере. И на этом этапе мы сразу можем столкнуться с проблемой. Вместо текста отображаются какие-то символы, например, вопросительные знаки. Почему же так получилось? Все очень просто. Мы просто не преобразовали наш документ в необходимую кодировку. Возвращаемся в текстовый редактор. В верхнем меню выбираем «Кодировки» и в выпавшем списке выбираем пункт «Преобразовать в UTF-8». После чего, сохраняем файл и обновляем страницу. Если все сделано правильно, текст должен стать читаемым.

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

Для этого в NotePad нажимаем «Файл» и выбираем «Новый» Или же просто нажимаем сочетание клавиш Ctrl+N. После чего прописываем стили CSS. Для примера сделаем фон, покрасим текст заголовка и расположим его посередине страницы и на этом закончим. После указания стилей, не забываем преобразовать документ в UTF-8. Выбираем «Сохранить как», называем документ style и сохраняем в формате CSS.

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

body{
background: #5b84ee;
}
h2{
color: #ffffff;
text-align: center;
}

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

Итак, что мы имеем? А имеем мы заполненную техническую часть документа, что находится между тегами head. А также первую html-страницу, созданную самостоятельно. Да, в ней нет ничего особенного, но первый шаг к созданию HTML-сайта сделан. А в следующий раз мы продолжим, и приступим к созданию главной страницы сайта. Подписывайтесь, чтобы не пропустить.

У меня на этом все. Надеюсь, данная маленькая :mrgreen: статья, поможет вам разобраться, что писать между тегами head, а что нет. И конечно же, надеюсь, что у вас получилось создать первую html-страницу. Если же нет, попробуйте еще раз и все получится.

Удачи!

#HTML & CSS

Расскажи друзьям:Поделись ссылкой:

HTML Теги заголовков Лучшие практики. HTML-элементы являются важной частью… | Асад | HTML-элементы Startup

являются важной частью внутреннего SEO. Алгоритмы Google учитывают элементы заголовков HTML вместе с контентом, чтобы понять структуру, тему и цель вашего контента. В этой статье делается попытка объяснить мифы, основы и лучшие практики использования тегов заголовков (h2-H6).

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

Теги заголовков имеют нисходящую иерархию от h2 до h6

HTML определяет шесть уровней для заголовков.

h2 используется для определения самого важного заголовка. h6 используется для определения наименее важных заголовков.

ЦИТАТА: «В HTML есть шесть уровней заголовков, где h2 — самый важный, а H6 — наименее». W3C

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

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

Прямой: Google использует заголовки, чтобы понять и осмыслить наш контент. Если будет размещена хорошая структура, это поможет Google сопоставить ваш контент с поисковыми фразами, введенными в поисковую систему Google его посетителями. Помогая Google, вы помогаете себе, занимаете место в Google.

Non-Direct : HTML-элементы заголовков создают впечатления для ваших пользователей. Заголовки знакомят посетителей с вашим контентом. Заголовки помогают посетителям найти то, что они ищут (беглый просмотр). Заголовки помогают посетителям оставаться на вашей странице (лучший показатель отказов). Хорошо пояснительные и честные заголовки формируют хороший пользовательский опыт. Поскольку Google переходит на пользовательский интерфейс, это может повысить рейтинг вашей страницы.

Заголовки важны.

  • Используйте их по мере необходимости.
  • Проведите полное исследование и используйте правильные ключевые слова.
  • Не делайте, не делайте, не делайте «заполнение ключевыми словами» . По состоянию на 2018 год это пустая трата времени.
  • Держите их релевантными вашему контенту.
  • по возможности делайте их естественными.

ЦИТАТА: «Качественные веб-сайты предоставляют четкую и достоверную информацию для своих целей. Веб-сайты YMYL требуют высокой степени доверия и нуждаются в удовлетворительной информации веб-сайта». Джон Мюллер, Google

С помощью View HTML Source Code: С помощью браузера Google Chrome щелкните правой кнопкой мыши HTML-страницу и выберите «View Page Source» (для IE — View Source).

В открывшемся окне используйте CTRL + F и введите тег заголовка HTML, вы ищете «h2» — «h6».

С помощью проверки элемента HTML: Используя браузер Google Chrome, щелкните элемент правой кнопкой мыши и выберите «Проверить». Откроется боковая панель, и вы сможете просматривать как HTML, так и CSS для этого элемента.

с использованием инструментов:

На рынке есть много инструментов, но наиболее заметны очень продуктивный инструмент Title Tag Preview , который я часто использую, чтобы проверить, как мои заголовки Title будут отображаться в результатах поиска Google: Инструмент

Website Auditor обеспечивает углубленный аудит сайта, анализ и оптимизацию на странице всего за одно приложение.

Чтобы проверить заголовки, откройте проект WebSite Auditor или создайте новый, перейдите в раздел «Анализ контента» > «Аудит страницы» > «Оптимизация контента» и проанализируйте раздел «Заголовок».

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

Этот инструмент особенно полезен, когда вы хотите проанализировать появление ключевых слов в:

  • Заголовки HTML (h2 — H6)
  • Заголовок HTML
  • Общее содержание

ЦИТАТА «Иерархия заголовков работает в Интернете так же, как и в печати. Веб-пользователи, как правило, спешат, поэтому они ищут заголовки, чтобы увидеть, не хотят ли они остановиться, и не торопятся, чтобы прочитать всю веб-страницу. Интернет-пользователи также бегло просматривают информацию в поисках того, что они конкретно ищут. Наличие иерархии заголовков поможет им найти то, что они ищут». Иерархия заголовков | webpagemistakes.ca

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

Чтение: Заголовки HTML | Mozilla

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

 Типы 
 и правильное использование тегов заголовков для SEO 
 
 
 Типы тегов заголовков 
 
 
Вот текст
 
 
Вот текст
 
 
 
Правильное использование заголовков
 
 
В целях SEO
 
 
Вот текст
 
 
Вот текст
 
 
 
Для пользователей
 
 
Вот текст
 
 
 < h5>Для пользователей 
 
Вот текст
 
 
 
 Резюме 
 
 
Вот текст

«Правильно структурированные данные на ваших страницах также позволяют использовать на вашей странице множество специальных функций в результатах поиска, в том числе звезды отзывов, красиво оформленные результаты и многое другое» Google | Руководство для начинающих по поисковой оптимизации (SEO)

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

  • Используйте теги заголовков для разделов и подразделов, а не Bold если возможно
  • Используйте тег заголовка h2 тег только один раз в качестве вашего контента
  • Используйте тег __ h3__ для выделения подразделов для h2 Тег заголовка
  • Используйте тег h4 для выделения подраздела h3 Тег заголовка
  • Сохраняйте элементы и иерархию естественными.

Если вы хотите изучить теги заголовков HTML, прочтите: Теги HTML от h2 до H6

ЦИТАТА: «Вы можете использовать их все или вообще ничего. Вы можете использовать столько, сколько хотите. Вам не нужно использовать все шесть HTML-элементов для структурирования страниц. Google ОСОБЕННО привык к неработающему HTML в Интернете». Шон Андерсон | Hobo-web

ЦИТАТА: «Да, я бы не беспокоился об этом, мы очень хорошо обрабатываем h2s и h3s, но не делайте всю страницу h2 или h3» Мэтт Каттс, Google

Вы должны использовать столько, сколько необходимо. Магического числа не существует.

Если у вас есть страница с небольшим содержанием (а небольшое содержание не обязательно означает что-то плохое), вам, вероятно, понадобится несколько. Если у вас есть страница с 2000 словами или более, лучше использовать несколько правильных тегов заголовков HTML, чтобы помочь вашим читателям найти то, что они ищут.

Вам не нужно использовать все HTML-теги заголовков для структурирования содержимого. Заголовок с h2 на h4 может сослужить вам хорошую службу. Я редко использую h5.

ЦИТАТА: «Вы можете использовать любое количество тегов заголовков h2 на одной веб-странице»: Джон Мюллер, Google

9000 Однозначного ответа на этот вопрос нет. Официальных руководств от Google или какой-либо поисковой системы нет.

Заголовки влияют на алгоритмы, когда они пытаются понять ваш контент. Но заголовки — это только один из более чем 200 факторов, которые использует Google. Переполнение заголовков ключевыми словами, а затем отсутствие какой-либо ценности в контенте, скорее всего, приведет к тому, что ваш контент будет занижен.

Самый простой и правильный способ сделать это — сохранить естественность. Если у вашего контента есть цель, вы будете знать, о чем он. Постарайтесь быть честным об этом.

Одна вещь, которую вы должны сделать, с точки зрения SEO, — это исследование правильных «поисковых» терминов с помощью инструментов анализа ключевых слов, чтобы увидеть, какие термины лучше всего описывают ваш контент, но и запрашиваются в Google.

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

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

Но у этого вопроса есть еще одно измерение.

Пользовательский опыт

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

Кроме того, помните, что потребность в заголовках HTML зависит от контента

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

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

Я всегда использую тег заголовка h2 для своего контента. Когда я делю свой контент на разделы и подразделы, я использую h3 и h4 соответственно.

Используйте только один тег h2 для своего контента, но вы можете использовать столько тегов h3 и h4, сколько необходимо. Но сосредоточьтесь на поддержании баланса заголовков. Используйте только то, что необходимо для удобства пользователей. Никогда не переусердствуйте, чтобы алгоритмы вас не пометили.

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

нужен хотя бы один HTML-заголовок h2. Заголовок представляет собой введение для вашей веб-страницы. Веб-страница без введения, как книга без названия.

Отсутствие выделения содержимого заголовком h2 может привести к тому, что посетители уйдут, не получив от него полной пользы. Всегда используйте заголовок h2 для своей веб-страницы.

Кроме того, если вы не включите HTML-тег заголовка h2 на свою веб-страницу, вы предоставите Google возможность просмотреть ваш контент и создать его самостоятельно, используя другие элементы HTML, такие как метатег Description, или даже из самого контента. Это не идеальный подход.

Один тег h2 — это все, что вам нужно, и все, что вы должны использовать. Больше не нужно и сбивает с толку.

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

Вот как следует использовать теги заголовков. То, где вы размещаете этот заголовок, никак не влияет на SEO.

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

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

 
 Типы и правильное использование тегов заголовков для SEO 
 Подзаголовок 1 
 
 
Вот текст
 
 
Вот текст
 
 
Для удобства пользователей
 
 
 Подзаголовок 2 
 
 
Вот текст
 
 
 Подзаголовок 3 
 
 
Вот немного текст
 
 
 Подзаголовок 4 
 
 
Вот текст
 
 
 Подзаголовок 5 
 
 
Вот текст
 
 
 Подзаголовок 6 
 
 
Вот текст
 
 
 Резюме 
< h3>

ЦИТАТА: «Мы делаем небольшое повышение, если видим четкий заголовок на странице, потому что мы понимаем, что эта страница явно посвящена этой теме, но я бы не сказал, что это то, что вам абсолютно необходимо на каждой странице. чтобы отображаться в поиске на многих страницах, вообще не используйте заголовки H, они просто размечают контент с помощью CSS» Джон Мюллер, Google

Не совсем так. Вы можете иметь другой URL-адрес и написать совершенно другой заголовок h2 в качестве заголовка. Google не беспокоит, если они разные.

Алгоритмы Google отлично разбираются в названии. На самом деле, ваш тег Title h2 имеет большую ценность, если вы сравниваете с ним свой URL.

Я видел страницы, которые абсолютно хорошо ранжируются в поисковой выдаче и имеют совершенно другой тег заголовка h2, чем их URL.

Одна из причин, по которой релевантность заголовка h2 с URL-адресом не является необходимой, заключается в том, что для поддержания вашего контента в актуальном состоянии вам необходимо поддерживать актуальность вашего контента в соответствии со временем. Название является частью контента, и вам, возможно, потребуется обновить и его. С другой стороны, URL-адреса

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

Подробнее о том, как сохранить позиции в Google с помощью 301 редиректа

Рассмотрим пример: у вас есть веб-страница, занимающая высокие позиции в поисковой выдаче в течение нескольких лет с советами по SEO, например,

«10 SEO-ошибок, которых следует избегать в 2017 году».

Ваше исследование темы является исключительным, и каждый год вы добавляете или обновляете свою страницу. Большинство ваших советов вечнозелены. Возможно, вам нужно добавить или обновить еще несколько в 2018 году.

Какой подход лучше? Написать новую статью, которая на 90% копирует старую статью, бороться и надеяться, что она займет место в Google?

Или обновить и попросить Google получить ваш контент и оставаться на вершине результатов поиска?

На любой веб-странице тег заголовка представляет собой вступление к следующему фрагменту содержимого. Я делаю вещи простыми. Это помогает и моим читателям, и поисковым системам. Помогайте им часто, они вернут вам хороший трафик.

  • Убедитесь, что вы используете заголовок h2
  • Всегда размещайте заголовки по их уровню.
  • Сохранить наиболее важные заголовки на уровне 1
  • Используйте заголовки с равным или выше, чтобы начать новый раздел.
  • Используйте заголовки более низкого уровня, чтобы начать новый подраздел.
  • Не пропускайте уровни заголовков, так как это может привести к путанице.
  • Всегда планируйте структуру заголовков перед созданием страницы.

Я всегда использую элементы заголовка h2 и трачу на них довольно много времени. Кроме того, я всегда использую только один элемент h2 на странице.

Я использую элементы h3 столько раз, сколько необходимо для разделов.

Я достигаю уровня h4 только для всех подразделов, которые у меня есть в контенте.

h2,h3,h4 у меня работают просто отлично.

  • Нет проверенного правила для длины тегов заголовков
  • Нет проверенного правила для оптимального количества тегов заголовков
  • Всегда находите правильные компромиссные ключевые слова и честные заголовки контента
  • Релевантность критически важна элементы заголовков и содержимое, следующее за
  • Используйте варианты для элементов заголовков. Не набивайте заголовки одними и теми же ключевыми словами.
  • При обновлении содержимого рассмотрите возможность обновления заголовка h2 и любых других тегов заголовка, h3, h4.
  • Ни в коем случае не форсируйте события. Держите это естественно. Удобочитаемость имеет решающее значение для Высококачественного контента.
  • Если содержимое не допускает иерархии, не применяйте ее принудительно. Можно и без этого хорошо.
  • Хорошо изучите ключевые слова. Постарайтесь найти популярные фразы, которые лучше всего описывают ваш контент, но используйте их с умом.
  • Всегда используйте тег заголовка h2 (Title) , если только у вас нет веской причины этого не делать. Используйте его только один раз и, если возможно, в самом начале контента.
  • По возможности не используйте BOLD . Используйте элементы заголовка для всех заголовков.
  • Всегда правильно упорядочивайте элементы заголовков.
  • Не путайте читателей и поисковые системы, пропуская уровни.
  • Используйте стили (CSS), чтобы перезаписать поведение по умолчанию для элементов заголовков, но всегда сохраняйте порядок и уровень.

Как использовать заголовки на вашем сайте • Yoast

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

Содержание
  • Зачем использовать заголовки?
    • Используйте заголовки, чтобы показать структуру текста
    • Используйте заголовки, чтобы улучшить доступность
    • Используйте заголовки, чтобы улучшить SEO
  • Как эффективно использовать заголовки
  • Структурирование ваших заголовков проверить в Yoast SEO делать?
  • Как получить зеленый сигнал светофора для распределения подзаголовков
  • Пример структуры заголовка
  • Добавление заголовков
    • Как добавить заголовок в WordPress
    • Как добавить заголовок в Shopify в оценке заголовков 
    • Как добавить ключевую фразу в подзаголовки
  • Заголовки в темах
  • Проверьте заголовки вашего блога

Вы получили красный или оранжевый светофор для распределения подзаголовков в Yoast SEO? Научитесь лучше их распределять. Или Yoast SEO дал вам отзыв о том, как вы используете свою ключевую фразу в подзаголовках? Узнайте, как это улучшить.

Зачем использовать заголовки?

Использование заголовков для отображения структуры текста

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

Читатели любят сканировать содержимое, чтобы понять, о чем текст, и решить, какие разделы текста они собираются читать. Заголовки помогают им в этом. Сканирование текста становится значительно сложнее для ваших читателей, когда он не содержит заголовков. Еще хуже, когда вы добавляете длинные отрезки текста после заголовка. Вы не хотите отпугивать людей печально известной стеной текста.

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

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

Подробнее: Почему структура текста важна для SEO »

Используйте заголовки для улучшения доступности

Структура заголовков также важна для доступности. Особенно для тех, кто не умеет читать с экрана. Поскольку заголовки написаны в формате HTML, программа чтения с экрана может понять структуру статьи и прочитать ее вслух. Читая или слушая заголовки в статье, люди с нарушениями зрения могут решить, читать статью или нет. Кроме того, средства чтения с экрана предлагают ярлыки для перехода от одного заголовка к другому, поэтому они также используются для навигации.

Не забывайте, что во многих случаях то, что хорошо для доступности, хорошо и для SEO!

Продолжайте читать: Создание доступного контента: 4 проверки, которые вы можете выполнить с Yoast SEO и редактором блоков Внесение незначительных изменений в отдельные заголовки, скорее всего, не улучшит вашу работу. Тем не менее, есть косвенных выгоды . Использование заголовков создает тексты более высокого качества, которые легче читать. Чем лучше текст, тем лучше для пользователей, что лучше для вашего SEO.

Если посетители не могут быстро найти то, что ищут, они, вероятно, покинут ваш сайт и будут искать другой ответ на свой вопрос. Вот почему структура текста и использование заголовков также влияют на SEO. Поисковые системы улавливают людей, уходящих с вашего сайта. Когда у вас высокий показатель отказов, поисковые системы могут сделать вывод, что ваша страница не дает пользователям того, что они ищут. Следовательно, вы можете получить более низкие оценки.

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

Как эффективно использовать заголовки

Итак, как лучше всего использовать заголовки? Мы можем посоветовать вам две вещи: вы должны хорошо структурировать заголовки и использовать в них свою ключевую фразу. Yoast SEO может помочь вам в обоих случаях. Анализ читабельности проверяет, как вы распределяете заголовки. И в SEO-анализе он проверяет, использовали ли вы свою ключевую фразу. Итак, давайте рассмотрим важность этих двух аспектов и посмотрим, как вы можете использовать Yoast SEO для написания отличных заголовков.

Структурирование заголовков

ПРИМЕЧАНИЕ. Существует два разных набора «правил», когда речь заходит об использовании тегов заголовков HTML; «классический» подход (из стандарта HTML4) и «современный» подход (из стандарта HTML5). Мы сосредоточимся на классическом подходе, так как современный подход сопряжен с некоторыми проблемами юзабилити и SEO (подробнее об этом можно прочитать здесь).

Когда вы редактируете статью в WordPress или Shopify, вы обычно видите разные «уровни» заголовков в текстовом редакторе — от « Заголовок 1 ‘до ‘ Заголовок 6 ’. Они бывают разных размеров; двигаясь от большего к меньшему. Незаметно они преобразуются в HTML-тегов заголовков ; от

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

Вот почему, когда мы говорим о том, как правильно структурировать заголовки и контент, мы говорим о тегах h2 , тегах h3 и так далее. Мы имеем в виду лежащий в основе HTML-код, чтобы различать уровни заголовков.

Как структурировать заголовки

Ваш h2 — это не то же самое, что заголовок вашей страницы. Для получения дополнительной информации вы можете прочитать о разнице между h2 и SEO-заголовком.

Во-первых, вы можете использовать только один заголовок h2 на каждой странице. Заголовок h2 должен быть названием/названием страницы или поста. На этой странице это « Как использовать заголовки на вашем сайте ». Вы можете думать о своем h2, как если бы вы думали о названии книги. Например, на категория , ваш h2 будет названием этой категории. Или, на странице продукта , это должно быть название продукта.

Затем, когда вы пишете свой контент, вы можете использовать подзаголовки h3 и h4 для представления различных разделов — например, раздела « Как улучшить распределение ваших заголовков », который вы сейчас читаете, который находится внутри « Структурирование заголовков ”раздел. Думайте о подзаголовках h3 как о главах книги. Эти отдельные разделы также могут использовать более конкретные заголовки (теги h4, затем теги h5 и т. д.) для представления подразделов. Большая часть контента редко становится достаточно «глубокой», чтобы использовать теги h5 и выше, если только вы не пишете 9.0032 действительно длинные, или действительно техническое содержание.

Что делает проверка распределения подзаголовков в Yoast SEO?

Проверка распределения подзаголовков позволяет оценить, достаточно ли вы использовали подзаголовков в тексте. Большинству текстов, содержащих более 300 слов, нужны подзаголовки, чтобы читатели могли просматривать текст. Итак, эта проверка уведомит вас, если ваш текст длиннее 300 слов и не содержит подзаголовков. Он также сообщит вам, если текстовый раздел, следующий за подзаголовком, слишком длинный — например, более 300 слов — и предложит добавить подзаголовки, чтобы улучшить читаемость этой части текста.

У нас также есть видео, в котором больше рассказывается о проверке распределения подзаголовков и ключевой фразе в проверке подзаголовков в Yoast SEO:

Как получить зеленый сигнал светофора для распределения подзаголовков

Итак, что делать, если вы получили оранжевый или красный сигнал светофора в плагине Yoast SEO для распределения подзаголовков? Ну, во-первых — и это совершенно очевидно — не забывайте использовать подзаголовки! Вы должны попытаться создать подзаголовок для каждой отдельной темы в вашем тексте. Это может быть для каждого абзаца, но также и для пары абзацев, обсуждающих одну и ту же тему.

Мы рекомендуем размещать заголовок над каждым длинным абзацем или над группой абзацев, образующих тематическую единицу. Текст после подзаголовка обычно не должен превышать 250-350 слов.

Перейти на Премиум и

получить бесплатный доступ к нашим курсам SEO!

Узнайте, как писать отличный контент для SEO и откройте множество функций с Yoast SEO Premium:

Получите Yoast SEO Premium »Всего 99 евро  евро в год (без НДС)

Пример структуры заголовка

Допустим, у нас есть запись в блоге о балетках . Мы выбрали «балетки» в качестве основного ключевого слова и написали статью обо всех причинах, по которым нам нравятся балетки. Без заголовков есть риск, что мы напишем действительно длинную бессвязную статью, которую трудно понять. Но если мы логически структурируем информацию, используя заголовки, мы не только облегчим чтение, но и поможем сфокусировать собственное письмо.

Вот как может выглядеть структура этого поста:

  • h2: Балетки — это круто
    • h3: Почему мы считаем, что балетки — это круто
      • h4: Они бывают не только розовыми!
      • h4: Вы можете использовать их не только для танцев
      • h4: Они могут быть дешевле, чем вы думаете
    • h3: Где купить балетки?
      • h4: 10 лучших веб-сайтов, посвященных балетному инвентарю
      • h4: Наши любимые местные танцевальные магазины

Посмотрите, как мы создали логическую структуру, используя теги h3 для планирования разделов и теги h4 для освещения определенных тем? Мы сделали то же самое в посте, который вы сейчас читаете!

Это хороший пример того, как должны быть структурированы ваши заголовки в статье среднего размера. Для более короткой статьи следует использовать меньшее количество (или более общие, высокоуровневые) заголовки. Если вы хотите углубиться в детали, ничто не мешает вам использовать теги h5 для создания разделов даже «более низкого уровня».

Добавление заголовков

Но подождите, хорошо знать, как их структурировать, но как на самом деле добавлять заголовки? Мы объясним, как это сделать в двух самых популярных CMS: WordPress и Shopify!

Как добавить заголовок в WordPress

Если вы используете WordPress, есть несколько способов сделать это:

Через редактор
Самый простой способ добавить заголовки — через редактор. Если вы используете новый редактор блоков, вы можете нажать кнопку + и выбрать «Заголовок». Затем вы можете выбрать, какой заголовок (h3, h4 и т. д.) вы хотите добавить.

Если вы все еще используете классический редактор в WordPress, это тоже просто. Убедитесь, что вы находитесь на визуальной вкладке редактора и выберите «Заголовок 2» или другой заголовок в раскрывающемся меню.

Использование HTML
Также можно добавлять заголовки с помощью HTML. В классическом редакторе вам нужно будет убедиться, что вы находитесь на вкладке текста (или непосредственно в коде), и использовать теги заголовков

,

,

и т.

д., чтобы указать каждый тип заголовка. . Завершайте каждый заголовок закрывающим тегом, например. Вот так:

В редакторе блоков вы также можете переключаться между визуальным редактором или редактировать как HTML. Для этого нажмите на три вертикальные точки на панели инструментов блока. Затем выберите параметр «Редактировать как HTML». Вот так:

Как добавить заголовок в Shopify

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

Выделите текст и выберите заголовок в Shopify

Если вы предпочитаете работать в HTML, вы можете выбрать знак кода в правом верхнем углу редактора и создать заголовки в HTML, как описано в инструкции для WordPress выше.

Нажмите знак кода, чтобы переключиться на HTML в редакторе Shopify

Использование вашей ключевой фразы в подзаголовках 

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

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

Yoast SEO может помочь вам с оценкой ключевой фразы в заголовках 

После того, как вы вставите свою ключевую фразу в Yoast SEO, ключевая фраза в оценке подзаголовков проверит, достаточно ли вы ее использовали. В Yoast SEO вы получите зеленый сигнал светофора, если будете использовать ключевую фразу в 30–75% подзаголовков. Имейте в виду, что мы будем проверять только ваши подзаголовки h3 и h4. Если у вас есть Yoast SEO Premium или вы используете приложение Yoast SEO для Shopify, вы можете даже проверить использование синонимов.

Как добавить свою ключевую фразу в подзаголовки

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

  1. Обсуждается ли в моем тексте тема, описанная в ключевой фразе? Если нет, следует ли выбрать другую ключевую фразу?
  2. Точно ли мои текущие подзаголовки описывают то, что я обсуждаю под ними?
  3. Какие абзацы наиболее тесно связаны с темой и ключевой фразой?
  4. На какие вопросы отвечают эти абзацы относительно темы и ключевой фразы?

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

Заголовки в темах

Большинство тем используют заголовки как часть своего HTML-кода, но некоторые не следуют рекомендациям. Почти все темы автоматически используют название вашей статьи в теге h2. Это полезно, потому что это означает, что вам не нужно повторять название поста внутри вашего контента.

К сожалению, некоторые темы используют теги неправильно — они используют теги в нелогичном порядке (например, h5, затем h3) или беспорядочно используют теги в боковых панелях, верхних и нижних колонтитулах. Это может вызвать проблемы с доступностью, так как порядок заголовков может не иметь смысла. Пользователи, поисковые системы и вспомогательные технологии обычно смотрят на вся страница , а не только область содержимого.

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

Проверьте заголовки своего блога

Грамотное использование заголовков полезно для ваших пользователей. Это увеличивает вероятность того, что люди действительно прочитают вашу статью, улучшает доступность и может даже способствовать SEO. Так что добавьте их в свою копию — просто убедитесь, что вы используете их правильно!

В левом верхнем углу экрана редактирования контента в редакторе блоков WordPress есть удобная кнопка «Подробности». Это показывает схему страницы, которую вы редактируете. Если вы хорошо структурировали свой контент, он должен выглядеть примерно так!

Если вы используете Shopify или классический редактор в WordPress, вы можете протестировать опубликованную статью с помощью W3 Validator.

Подробнее: WordPress SEO: исчерпывающее руководство по повышению рейтинга вашего сайта WordPress »

Джоно Алдерсон

Джоно — наш руководитель отдела SEO. Он цифровой стратег, маркетолог и разработчик полного стека. Он занимается техническим SEO, новыми технологиями и стратегией бренда.

Далее!

Полное руководство по дифференциации этих тегов

В языке программирования HTML есть два важных тега, а именно и

, но вопрос в том, понимаете ли вы различия HTML head и header ? Они имеют разные функции и оба критически важны для успеха вашего веб-сайта .

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

Содержание

  • Заголовок HTML
  • Заголовок HTML
  • Различия между заголовком и заголовком в HTML Устаревшие браузеры
    • 1. Добавление правила с помощью каскадных таблиц стилей (CSS)
    • 2. HTML5Shiv
  • Советы и рекомендации по использованию тега
    • . Наиболее часто используемый тег в элементе HTML — < название>. Например,
    • . Используйте тег для вставки метаданных на веб-сайт.
    • – Действительные элементы тега
    • – Тег может использоваться для размещения значков на веб-странице. Например,
    • – Используйте тег для оптимизации веб-страниц для социальных сетей
  • Заключение

HTML Head

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

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

<голова>

Заголовок

Или

Заголовок

Заголовок HTML

Тег

определяет заголовок веб-страницы или раздела на странице. Он содержит информацию о заголовке веб-страницы или заголовке раздела. Обычно тег
содержит заголовок в формате от h2 до h6. Однако HTML для заголовка имеет и другие важные функции, такие как обертка таких разделов, как оглавление, логотипы или форма поиска.

Будучи относительно новой записью, тег заголовка в HTML требует наличия начального тега <> и конечного тега . Веб-разработчики должны учитывать, что возможно вставлять несколько тегов

в один документ . Однако существуют некоторые правила синтаксиса, которые необходимо соблюдать в ходе этого процесса. Во-первых, тег
не может быть вставлен в элемент
,