ページ メタデータ
DevSite ページは、サイト上の単一のコンテンツ単位です。ページには、サイトの機能を制御するタイトル、本文、ヘッダー要素、メタデータ属性を指定できます。ユーザーがページの URL にアクセスすると、サイトではコンテンツ ページのプロパティに基づいてウェブページ全体が表示され、ヘッダー、フッター、サイドバーなどの動的要素が追加されます。デフォルトの動作は技術ドキュメントのページ向けに最適化されていますが、マーケティングやランディング ページなどの他の用途向けに構成することもできます。
ページの構造
DevSite ページは、一般的な外観と機能がサイトによって管理されるウェブページです。Google Developers のページに、いくつかの共通エリアが表示されます。（すべてのサイトがすべての機能をサポートしているわけではありません）。図にカーソルを合わせると、ラベルが表示されます。
site header
サイトのロゴ、ログイン ウィジェット、検索ボックス、トップ ナビゲーション。サイト全体で共通。
project bar
プロジェクトまたはプロダクトのタイトル、およびプロジェクト固有のウィジェット（「フィードバック」リンクなど）。この領域は、プロジェクト メタデータによって定義されます。
sidebar
書籍全体の階層ナビゲーション。この領域は、書籍のメタデータによって定義されます。
body
ページのタイトルとコンテンツ。
page footer ("last updated")
ページ固有のウィジェット（「最終更新日」通知など）。プロジェクトのメタデータ属性である CC ライセンス通知を含めることもできます。
site footer
サイトのフッターリンク、言語選択ウィジェット。サイト全体で共通。
HTML ソースファイル
<html devsite>
<head>
<title>Page title</title>
<meta name="project_path" value="/path/to/_project.yaml" />
<meta name="book_path" value="/path/to/_book.yaml" />
</head>
<body>
<p>Body content goes here, implemented as HTML.</p>
</body>
</html>
<html> 要素の devsite 属性は、これを HTML アセットとしてそのままではなく、DevSite ページとしてレンダリングするよう DevSite に伝えます。書式設定や、ヘッダー、フッターのない状態でページが表示される場合は、ファイルの先頭近くに「<html devsite>」があるかどうかを確認します。
<html> 要素、<head> 要素、<body> 要素は必須であり、開始タグと終了タグが必要です。
一般的なページでは、<head> 内に <title> 要素も含める必要があります。ページタイトルをご覧ください。
特定の <meta> タグはページの機能を制御します。ここでは、これらについて説明します。一般的なページには、_project.yaml メタデータ ファイルを参照する "project_path" メタタグと、_book.yaml メタデータ ファイルを参照する "book_path" メタタグがあります。プロジェクトと書籍をご覧ください。通常、DevSite で認識される <meta> タグは、最終的なページに表示されません。
<head> の他の要素と <body> のすべての要素は、最終ページでレンダリングされます。
マークダウン ソースファイル
Project: /path/to/_project.yaml
Book: /path/to/_book.yaml
# Page title
Body content, specified in Markdown, goes here.
一般的なページにはタイトルが必要です（例:# Page title）。ページタイトルをご覧ください。
特定のメタタグでページの機能を制御します。ここでは、これらについて説明します。一般的なページには、_project.yaml メタデータ ファイルを参照する Project: メタタグと、_book.yaml メタデータ ファイルを参照する Book: メタタグがあります。プロジェクトと書籍が表示されます。通常、DevSite で認識されるメタタグは、最終的なページに表示されません。
プロジェクトと書籍
プロジェクトは、_project.yaml という名前のプロジェクト メタデータ ファイルで記述されます。書籍は、_book.yaml という名前の書籍メタデータ ファイルで記述されます。これらのファイルはページとアセット ファイルとともにサイトに公開され、複数の言語に翻訳できます。これらのファイルの構造と属性については、プロジェクト メタデータと書籍メタデータをご覧ください。
ページをプロジェクトに関連付けるには、project_path 属性を指定します。値は、_project.yaml ファイルへのコンテンツ パスです。
HTML
<meta name="project_path" value="/path/to/_project.yaml" />
マークダウン
Project: /path/to/_project.yaml
ページに project_path 属性が指定されていない場合、プロジェクト バーの領域とその機能なしでレンダリングされます。このページはプロジェクトの一部とは見なされません。
ページを書籍に関連付けるには、book_path 属性を指定します。値は、_book.yaml ファイルへのコンテンツ パスです。
HTML
<meta name="book_path" value="/path/to/_book.yaml" />
マークダウン
Book: /path/to/_book.yaml
ページのタイトル
<head>
<title>Page title</title>
...
</head>
または、ページの <body> で page-title クラスを含む <h1> 要素を使用します。
HTML
<h1 class="page-title">Page title</h1>
マークダウン
# Page title
プロジェクトのホームページにはタイトルは必要ありません
HTML
<meta name="no_page_title" value="true" />
マークダウン
no_page_title: true
特別なレイアウトで自動 <h1> を使用する必要がないが、ページにウィンドウ タイトルが必要な場合は、タイトルを保持したまま "hide_page_heading" 属性で見出しを非表示にできます。
HTML
<title>Page title</title>
<meta name="hide_page_heading" value="true" />
マークダウン
hide_page_heading: true
# Page title
ヘッダーの説明
多くの DevSite サイトでは、ヘッダーに説明があります。これは _project.yaml メタデータ ファイルで設定され、DevSite のランディング ページに自動的に表示されます。つまり、_index.yaml テンプレートを使用して作成されたページでは、_project.yaml ファイルで設定されたヘッダーに説明が自動的にレンダリングされます。
この説明は、_index.yaml ファイルのルートで description を設定することでページに対してオーバーライドできます。また、landing_page オブジェクトの header オブジェクト内で hide_description: true を設定して抑制することもできます。
全幅レイアウト
レイアウトをより細かく制御する必要がある場合は、サイトヘッダーとプロジェクト バーの下、サイトのフッターの上にある領域のレイアウトの制御を放棄するよう DevSite に指示できます。そのためには、"full_width" メタデータ属性を "true" に設定します。
HTML
<meta name="full_width" value="true" />
マークダウン
full_width: true
最終更新日
デフォルトでは、full-width ページを除き、ページのフッター領域に「最終更新日」が自動的に表示されます。表示されます。ほとんどの場合、これによりページのコンテンツの鮮度をユーザーにわかりやすく伝えることができます。
この情報は、場合によって混乱を招いたり、プロダクト チームによって機密扱いとされたりする場合があります。ページの最終更新の通知を無効にするには、hide_last_updated 属性を true に設定します。
HTML
<meta name="project_path" value="/time-travel/_project.yaml" />
<meta name="book_path" value="/time-travel/_book.yaml" />
<meta name="hide_last_updated" value="true" />
マークダウン
Project: /time-travel/_project.yaml
Book: /time-travel/_book.yaml
hide_last_updated: true
自動的に計算される「最終更新日」は、refresh_date メタタグを ISO 8601 形式の日付に設定して、日付を指定します。
HTML
<meta name="project_path" value="/time-travel/_project.yaml" />
<meta name="book_path" value="/time-travel/_book.yaml" />
<meta name="refresh_date" value="2017-03-27" />
マークダウン
Project: /time-travel/_project.yaml
Book: /time-travel/_book.yaml
refresh_date: 2017-03-27
ページの説明
ページの説明とは、ページの内容についてテキストで要約したものです。ページの説明を設定するには、<meta name="description" content="DESCRIPTION" /> 要素を指定します。説明テキストは value ではなく content という名前の属性に入ります。これはウェブ標準の属性と一致します。
HTML
<meta name="description" content="It was the best of times, it was the blurst of times..." />
マークダウン
description: It was the best of times, it was the blurst of times...
ページの説明を設定すると、<meta> タグが最終ページに追加されます
イメージパス
image_path は、ソーシャル メディアや DevSite 機能（recommendations、dynamic content など）でこのページを表す画像のパスです。設定すると、この画像がページの OpenGraph 画像として使用され、プロジェクトの social media 設定と tenant site's ブランディング設定がオーバーライドされます。
HTML
<meta name="image_path" value="/site-assets/developers_64dp.png" />
マークダウン
image_path: /site-assets/developers_64dp.png
キーワード
keywords フィールドは、ページを説明する文字列のカンマ区切りリストで、サイト内検索や Dynamic Content などの検索機能と検出機能で使用されます。
keywords フィールドでは、ディメンションの関連付けのないフラット キーワード（gettingstarted など）と、ドキュメントと、プログラミング言語、プロダクト、イベントなどの実世界のエンティティ（product:ComputeEngine、language:Python3 など）との関係を表すためにディメンションの名前空間を使用する構造化キーワードがサポートされます。両方のタイプの keywords を任意のキーワード フィールドに追加できます。
フォーマット要件に準拠していないキーワードをステージングすると、使用しているツール（通常は DevSite コマンドライン ツールまたは DevSite コンテンツ パブリッシャー）の出力に、キーワードの正しいフォーマット バージョンを示す警告が表示されます。
HTML
<meta name="keywords" value="spacetime,timetravel,product:Delorean" />
マークダウン
keywords: spacetime, timetravel, product:Delorean