Anatomy of a React component
My vision for how every React component should look
421
8 min.
The SSM standard defines requirements for the semantics, accessibility, and logic of metadata.
<title>. It briefly describes the main content and is not replaced by the site name or generic template text.<title> or the description. A search engine may truncate the title or generate the result title and snippet from other parts of the page.rel="canonical" or an appropriate HTTP response mechanism.hreflang.robots.txt controls access to URLs and resources for compatible crawlers, but it is not, by itself, a reliable way to exclude a URL from search results.noindex directive in page metadata or the X-Robots-Tag HTTP header. A crawler must be able to fetch the page to process the directive.robots.txt may remain known to a search engine through external links even when the crawler cannot access its content. Therefore, robots.txt is not a confidentiality mechanism.index and follow are generally the default behavior; they do not need to be specified without a reason. Directive values and support must be checked for the target search engines.Example directive for excluding a page from an index:
<meta name="robots" content="noindex">The crawler can read this directive only when it crawls the page. If the URL is also blocked in robots.txt, the crawler may not receive the noindex directive.
rel="alternate" and valid hreflang values. Each version must list itself and the other available versions; the set of links must be reciprocal, and target pages must be crawlable and indexable.hreflang, adding a region when necessary. x-default may be used for a default page intended for users who do not match a specific language version.lang attribute. It helps assistive technologies and user agents identify the content language, but does not replace hreflang.og:locale sets the Open Graph locale in language_TERRITORY format, such as en_US. Repeated og:locale:alternate properties list the other locales in which the page is available.og:locale:alternate does not connect translated URLs and does not replace hreflang. The alternate locale list must match the translations that are actually available.Example language URL mapping:
<html lang="en">
<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>The same complete set of reciprocal links appears on every language version, with the corresponding lang value.
og:title, og:type, og:image, and og:url — the protocol's core properties.og:description briefly describes the specific page. og:image:alt is recommended for an image; it describes the image content rather than providing a post caption.og:url must be absolute addresses that are publicly accessible. HTTPS is preferred for images; the resource must load without authentication and must not be blocked from platform crawlers.og:url must agree with the page's preferred permanent address.og:locale and og:locale:alternate provide locale information for the object, but do not guarantee that a social platform will display a localized preview.twitter:* properties, including twitter:card="summary_large_image", when that format is supported for the target post type.summary_large_image selects a card layout with a large image; it does not guarantee maximum reach, CTR, or priority in a feed.rel="icon" link relation. Supported formats and sizes depend on the browser and display context.site.webmanifest when the site needs web app configuration. A manifest can define the app name, start URL, display mode, theme, and icon set.192×192 and 512×512 set is commonly used for compatibility with some installation environments, but is not a universal requirement for every site or device.theme_color in a manifest or the corresponding metadata element may affect browser or app interface colors. Support and visual effects vary across platforms.apple-touch-icon and apple-mobile-web-app-capable relate to adding a site to the Home Screen and launching it in a separate window on Apple devices. These are platform-specific settings, intended only when that scenario is supported; they are not required for an ordinary website.Example JSON-LD for content that matches the Article type:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Article title",
"image": "https://example.com/en/images/article.webp",
"datePublished": "2026-09-26",
"dateModified": "2026-09-26"
}
</script>Populate the example fields with the page's actual data. Use the appropriate type and properties for other content; optional fields must not be filled with fictitious values.
<title> and description that match its actual content.robots.txt, noindex, redirects, and canonical URLs.og:url.lang, all hreflang links, reciprocal mappings, and the accessibility of every version.This example shows the final document fragment. Metadata may be generated by a CMS, template, server rendering, static site generator, or another tool; the requirements apply to the resulting document and response, not to a platform-specific API.
<html lang="en">
<head>
<title>Page title</title>
<meta name="description" content="A concise description of the page content.">
<link rel="canonical" href="https://example.com/en/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="Page title">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/en/article">
<meta property="og:image" content="https://example.com/en/images/article-share.webp">
<meta property="og:image:alt" content="Illustration for the article">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="ru_RU">
<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>My vision for how every React component should look
421
8 min.
The SST standard defines requirements for the semantics, accessibility, and logic of tabs
62
7 min.
The SSF-U standard defines requirements for the semantics, accessibility, and logic of fullscreen
248
2 min.
The SSA standard defines requirements for the semantics, accessibility, and logic of accordion
258
2 min.
An Analysis of Critical Web Design Mistakes. Why Sliders, Autoplay, and Slow-Loading Pages Reduce Conversion Rates and Rankings on Google
232
2 min.
The SSP standard defines requirements for the semantics, accessibility, and logic of pagination
240
1 min.