Анатомия React компонента
Моё видение того, как должен выглядеть React компонент
421
7 мин.
Стандарт SSM определяет требования к семантике, доступности и логике работы метаданных.
<title>. Он кратко описывает основное содержание и не подменяется названием сайта или общим шаблонным текстом.<title> и описания не устанавливается универсальное ограничение по числу символов. Поисковая система может обрезать заголовок или сформировать ссылку и фрагмент результата на основе других частей страницы.rel="canonical" либо подходящий механизм на уровне HTTP-ответа.hreflang.robots.txt управляет доступом совместимых роботов к URL и ресурсам, но сам по себе не является надёжным способом исключить URL из поисковой выдачи.noindex в метаданных страницы или HTTP-заголовке X-Robots-Tag. Для обработки директивы робот должен иметь возможность получить страницу.robots.txt, может остаться известным поисковой системе по внешним ссылкам, хотя её содержимое не будет доступно роботу. Поэтому robots.txt не используется как средство конфиденциальности.index и follow обычно являются поведением по умолчанию; указывать их без необходимости не требуется. Значения директив и их поддержка проверяются для целевых поисковых систем.Пример директивы для исключения страницы из индекса:
<meta name="robots" content="noindex">Эта директива доступна роботу только при обходе страницы. Если одновременно закрыть URL в robots.txt, робот может не получить noindex.
rel="alternate" с корректным hreflang. Каждая версия перечисляет себя и остальные доступные варианты; набор ссылок должен быть взаимным, а целевые страницы — доступны для обхода и индексирования.hreflang указываются допустимые коды языка и, при необходимости, региона. x-default можно использовать для страницы по умолчанию, если она предусмотрена для пользователей, которым не соответствует отдельная языковая версия.lang. Он помогает вспомогательным технологиям и пользовательским агентам определить язык содержимого, но не заменяет hreflang.og:locale задаёт локаль Open Graph в формате язык_РЕГИОН, например ru_RU. Повторяющиеся og:locale:alternate перечисляют другие локали, в которых доступна страница.og:locale:alternate не связывает URL переводов и не заменяет hreflang. Список альтернативных локалей должен соответствовать реально доступным переводам.Пример связки языковых URL:
<html lang="ru">
<head>
<link rel="alternate" hreflang="ru" href="https://example.com/ru/article">
<link rel="alternate" hreflang="en" href="https://example.com/en/article">
<link rel="alternate" hreflang="de" href="https://example.com/de/article">
<link rel="alternate" hreflang="ja" href="https://example.com/ja/article">
<link rel="alternate" hreflang="x-default" href="https://example.com/article">
</head>
</html>Тот же полный набор взаимных ссылок размещается на каждой языковой версии с соответствующим значением lang.
og:title, og:type, og:image и og:url — основные свойства протокола.og:description кратко описывает конкретную страницу. Для изображения рекомендуется указывать og:image:alt; это описание содержания изображения, а не подпись к публикации.og:url задаются абсолютными адресами, доступными извне. Для изображения предпочтителен HTTPS; ресурс должен отвечать без авторизации и не блокироваться для роботов платформы.og:url согласуется с предпочтительным постоянным адресом страницы.og:locale и og:locale:alternate помогают передать локаль объекта, но не гарантируют, что социальная платформа покажет локализованное превью.twitter:*, в том числе twitter:card="summary_large_image", если такой формат предусмотрен для целевого типа публикации.summary_large_image задаёт вариант карточки с крупным изображением; это не гарантия максимального охвата, CTR или приоритета в ленте.rel="icon". Поддерживаемый формат и размер зависят от браузера и места отображения.site.webmanifest подключается, если сайту нужна конфигурация веб-приложения. Манифест может задавать имя, стартовый URL, режим отображения, тему и набор иконок.192×192 и 512×512 часто используется для совместимости с некоторыми средами установки, но не является универсальным требованием для каждого сайта или устройства.theme_color в манифесте или соответствующий метатег может влиять на оформление элементов браузера или приложения. Поддержка и визуальный эффект различаются между платформами.apple-touch-icon и apple-mobile-web-app-capable относятся к сценариям добавления сайта на экран «Домой» и запуска в отдельном окне на устройствах Apple. Эти настройки являются платформенными и применяются только при целевой поддержке такого сценария; их наличие не обязательно для обычного сайта.Пример JSON-LD для содержимого, соответствующего типу Article:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Название статьи",
"image": "https://example.com/ru/images/article.webp",
"datePublished": "2026-09-26",
"dateModified": "2026-09-26"
}
</script>Поля примера заполняются фактическими данными страницы. Для другого типа содержимого используются соответствующие тип и свойства; необязательные поля не следует заполнять фиктивными значениями.
<title> и описания фактическому содержимому каждой индексируемой страницы.robots.txt, noindex, перенаправлениями и canonical.og:url.lang, все hreflang-ссылки, взаимность связей и доступность каждой версии.Пример показывает итоговый фрагмент документа. Метаданные могут формироваться CMS, шаблоном, серверным рендерингом, генератором статического сайта или другим инструментом; требования относятся к полученному документу и ответу, а не к API конкретной платформы.
<html lang="ru">
<head>
<title>Название страницы</title>
<meta name="description" content="Краткое описание содержимого страницы.">
<link rel="canonical" href="https://example.com/ru/article">
<link rel="alternate" hreflang="ru" href="https://example.com/ru/article">
<link rel="alternate" hreflang="en" href="https://example.com/en/article">
<link rel="alternate" hreflang="de" href="https://example.com/de/article">
<link rel="alternate" hreflang="ja" href="https://example.com/ja/article">
<link rel="alternate" hreflang="x-default" href="https://example.com/article">
<meta property="og:title" content="Название страницы">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/ru/article">
<meta property="og:image" content="https://example.com/ru/images/article-share.webp">
<meta property="og:image:alt" content="Иллюстрация к статье">
<meta property="og:locale" content="ru_RU">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:locale:alternate" content="de_DE">
<meta property="og:locale:alternate" content="ja_JP">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">
</head>
</html>Похожие категории:
Моё видение того, как должен выглядеть React компонент
421
7 мин.
Стандарт SST-A определяет требования к семантике, доступности и логике работы табов
62
6 мин.
Стандарт SSF-U определяет требования к семантике, доступности и логике работы фуллскрина
248
2 мин.
Стандарт SSA определяет требования к семантике, доступности и логике работы аккордеона
258
2 мин.
Разбор критических ошибок веб-дизайна. Почему слайдеры, автоплей и тяжёлые страницы снижают конверсию и позиции в Google и Yandex
232
1 мин.
Стандарт SSP определяет требования к семантике, доступности и логике работы пагинации
240
1 мин.