Reactコンポーネントの構造
各Reactコンポーネントがどのような外観であるべきか、私の考え
421
13 分。
SSM規格は、メタデータのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています。
<title>を設定する。ページの主な内容を簡潔に示し、サイト名や汎用的なテンプレート文で置き換えない。<title>や説明文に、すべてのサイトに共通する文字数上限はない。検索エンジンがタイトルを省略したり、ページ内の別のテキストから検索結果のタイトルやスニペットを生成したりする場合がある。rel="canonical"または適切なHTTPレスポンスの仕組みを使って、優先するCanonical URLを指定する。hreflangで相互に関連付ける。robots.txtは対応するクローラーがアクセスできるURLやリソースを制御するが、それだけでURLを検索結果から確実に除外することはできない。X-Robots-Tagに、検索エンジンが対応するnoindexディレクティブを指定する。クローラーがこのディレクティブを処理するには、ページを取得できる必要がある。robots.txtでブロックされたURLでも、外部リンクなどから検索エンジンに知られたままになる場合がある。ページ内容を取得できないため、noindexが読み取られないこともある。したがって、robots.txtは機密情報を保護する仕組みではない。indexとfollowは通常の既定動作であり、必要がなければ明示しない。ディレクティブの値と対応状況は、対象とする検索エンジンごとに確認する。ページをインデックスから除外するディレクティブの例:
<meta name="robots" content="noindex">クローラーがこのディレクティブを確認できるのは、ページをクロールした場合に限られる。同じURLをrobots.txtでブロックすると、クローラーがnoindexを取得できないことがある。
hreflang値を付けたrel="alternate"で関連付ける。各ページには自分自身と利用可能な他の言語版をすべて記載する。リンクは相互参照とし、リンク先はクロールおよびインデックス登録が可能であること。hreflangには有効な言語コードを指定し、必要に応じて地域コードを追加する。特定の言語版に該当しない利用者向けの既定ページがある場合は、x-defaultを指定できる。lang属性で示す。この属性は支援技術やユーザーエージェントがコンテンツの言語を判定するのに役立つが、hreflangの代わりにはならない。og:localeはOpen Graphのロケールを言語_地域の形式で指定する。たとえば日本語ページではja_JPを使用する。複数のog:locale:alternateで、そのページが利用できる他のロケールを列挙する。og:locale:alternateは翻訳ページのURLを関連付けるものではなく、hreflangの代わりにもならない。代替ロケールの一覧は、実際に利用できる翻訳と一致させる。言語別URLを関連付ける例:
<html lang="ja">
<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には、外部からアクセスできる絶対URLを指定する。画像にはHTTPSを推奨する。認証なしで取得でき、プラットフォームのクローラーがブロックされていないこと。og:urlはページの優先する恒久的なURLと一致させる。og:localeとog:locale:alternateはオブジェクトのロケールを伝えるために使うが、ソーシャルプラットフォームでローカライズ済みプレビューが表示されることを保証しない。twitter:card="summary_large_image"を含むtwitter:*プロパティを設定できる。summary_large_imageは大きな画像を含むカード形式を指定する。最大のリーチやCTR、フィード内での優先表示を保証するものではない。rel="icon"のリンク関係を使ってひとつ以上指定する。対応する形式とサイズは、ブラウザーや表示場所によって異なる。site.webmanifestを読み込む。マニフェストでは、アプリ名、開始URL、表示モード、テーマ、アイコンセットを定義できる。192×192と512×512のセットは一部のインストール環境で互換性のためによく使われるが、すべてのサイトや端末に共通する要件ではない。theme_colorまたは対応するメタデータは、ブラウザーやアプリのUI色に影響する場合がある。対応状況や見た目の変化はプラットフォームごとに異なる。apple-touch-iconとapple-mobile-web-app-capableは、Apple端末でサイトをホーム画面に追加し、独立したウィンドウで起動するシナリオに関係する。これらはプラットフォーム固有の設定であり、その利用環境を対象とする場合に限って使用する。通常のウェブサイトには必須ではない。Articleタイプの内容に対応するJSON-LDの例:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "記事タイトル",
"image": "https://example.com/ja/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="ja">
<head>
<title>ページタイトル</title>
<meta name="description" content="ページ内容を簡潔に説明する文です。">
<link rel="canonical" href="https://example.com/ja/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/ja/article">
<meta property="og:image" content="https://example.com/ja/images/article-share.webp">
<meta property="og:image:alt" content="記事のイラスト">
<meta property="og:locale" content="ja_JP">
<meta property="og:locale:alternate" content="ru_RU">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:locale:alternate" content="de_DE">
<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
13 分。
SST規格は、タブのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています
62
11 分。
SSF-U規格は、フルスクリーン表示のセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています
248
3 分。
SSA規格は、アコーディオンのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を定めています
258
4 分。
ウェブデザインにおける致命的なミスの分析。スライダー、自動再生、重いページがコンバージョン率やGoogleでの検索順位を低下させる理由
232
2 分。
SSP規格は、ページネーションのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています
240
3 分。