ウィジェット: 最適化案

<devsite-recommendations> カスタム要素を使用すると、読者におすすめのコンテンツを提示できます。レコメンデーションの生成をシステムに任せたり、ユーザー自身で明示的にレコメンデーションを提供したりできます。また、ドキュメントの既存のレコメンデーション セクションを折り返すことで、一貫した表示、クリックスルーの統計情報、充実したユーザー インターフェース（説明や画像を含む）を実現できます。

用途

このウィジェットを使用するには、<devsite-recommendations> 要素を作成します。おすすめコンテンツを明示的に提示する場合は、要素内にいくつかのリンクを追加します。現時点では、要素が空の場合にシステムが生成した推奨事項が提供されますが、今後の作業では、明示的な推奨事項が提供されたときに生成された推奨事項をテストしたり、アルゴリズムへの入力として使用したりできるようになります。

推奨事項を明示的に指定する場合は、要素内にマークアップを指定します。要素が接続されたときに検出された <a> タグはすべて、href 属性が抽出され、レコメンデーションに使用されます。

3 つ以上の推奨を提供する場合は、ランダムに選択されます。ただし、おすすめの順序は入力の順序と同じであるため、優先度の高い推奨事項は常に左端に表示されます。

生成された結果に特定のおすすめが表示されないようにするには、<link rel="disallow" href="/path"> のコレクションを使用して空の <devsite-recommendations> 要素を作成します。rel=disallow 属性と href 属性が指定された <link> タグはすべて自動的に検出され、生成された最適化案から削除されます。

特定のページの推奨事項のみが必要な場合は、query フィールドで Nomenclature タグを使用して結果をフィルタリングできます。構文は k:category:value です。例: k:language:typescriptタグのリストをカンマ区切りのリスト（k:language:typescript,k:language:swift）で指定することで、いずれかのタグを含むページを含めることができます。

以下のセクションでは、マークアップ、通常の条件下ではどのようにレンダリングされるか、マシンや単純なユーザー エージェントにレンダリングする方法について説明します。

マークアップ

<devsite-recommendations>
<p>Note: link text is displayed when JavaScript is off</p>
<ul>
  <li><a href="/maps/documentation">Maps docs</a></li>
  <li><a href="/analytics">Analytics</a></li>
  <li><a href="/machine-learning/crash-course">MLCC</a></li>
</ul>
</devsite-recommendations>

結果

シンプルなユーザー エージェント

注: JavaScript がオフになっている場合はリンクテキストが表示されます

禁止を含む例

マークアップ

<devsite-recommendations>
  <link rel="disallow" href="/maps/documentation">
  <link rel="disallow" href="/analytics">
  <link rel="disallow" href="/machine-learning/crash-course">
</devsite-recommendations>

結果

結果は推奨事項によって異なる可能性があるため、出力はレコメンデーション モデルからの出力と同じように表示されます。

既存のコンテンツをラップする

この要素を使用すると、ページ上の既存のマークアップが段階的に拡張されるため、既存のリンクを <devsite-recommendations> でラップしてアップグレードできます。

新しいリンクには、データ収集やテストのダッシュボードなど、レコメンデーション プラットフォームのすべての機能とポリシーが適用されますが、コンテンツも説明や画像を含む豊富なメタデータに置き換えられます。また、一部のリンク（アクセス制御されたページ、メタデータのないページなど）が除外されることもあります。

マークアップ

<devsite-recommendations>
<h2>Example communities</h2>
<p>Note: All markup here will be replaced with the recommendation UI.</p>
<p>
  For more information on Google Developers, check out our <a href="/community/experts">GDEs</a>. If
  you are looking to form a community, take a look at <a href="/community/gdg">GDGs</a>. Lastly, if
  you're currently studying, don't miss our <a href="/community/dsc">DSCs</a>.
</p>
</devsite-recommendations>

結果

コミュニティの例

注: ここでのマークアップはすべて、おすすめの UI に置き換えられます。

Google Developers について詳しくは、GDE をご覧ください。条件 コミュニティを形成したい場合は、GDG をご覧ください。最後に DSC をご覧ください。

マークダウン ファイルでの使用方法

マークダウン（.md）ファイルでは、カスタム要素が <section> や <div> などの標準の HTML 要素でラップされていることを確認します。

混合コンテンツ

## Markdown section

* Markdown list
* [Markdown link](/foo)

## HTML section

<div>
<devsite-recommendations>
  <p>Note: link text is displayed when JavaScript is off</p>
  <h2>Sample heading</h2>
  <a href="/recommended">Recommended</a>
</devsite-recommendations>
</div>

マークダウン セクション

HTML セクション

注: JavaScript がオフになっている場合はリンクテキストが表示されます

見出しの例

推奨

純粋なマークダウン

<pre><devsite-recommendations>
## Sample heading

* Note: link text is displayed when JavaScript is off
* [Maps documentation](/maps/documentation)

</devsite-recommendations><pre>

結果

見出しの例

で確認できます。

システム属性

現時点では、サポートされている属性はシステムの動作を制御するためのみで、通常のユーザーには必要としません。

yield（省略可） 指定されている場合、その要素はページ内の収益につながらない他の推奨要素に優先します。これは通常、サイト自体がページにおすすめを自動的に配置するために使用されますが、他のインスタンスが存在しない場合にのみ表示するために使用されます。

命名法によるフィルタリング

マークアップ

<devsite-recommendations query="k:language:typescript">
</devsite-recommendations>

結果