サイト向け Open Graph の設定

Liferay DXP/ポータル 7.3 以上

Open Graph は、Facebook、Slack、Twitter など、それをサポートするアプリケーション コンテキストで共有されるサイト コンテンツのプレビューを標準化するインターネット プロトコルです。 これは、 RDFaと同様に、ページ ヘッダーに構造化データを <meta> タグとして埋め込むことによって実現されます。

デフォルトでは、Open Graph <meta> タグはすべての公開 Liferay ページに埋め込まれますが、必要に応じてサイト レベルでこの動作を無効にすることができます。 サイト設定では、デフォルトの og:image プロパティを設定することもできます。 これらの値は、 ページ または 表示ページ レベルで上書きされない限り、すべてのページに使用されます。

サイトにOpen Graphを設定するには、

1. サイト メニュー () を開き、 構成 → 設定 (以前は サイト設定) に移動します。

2. ［Open Graph］小見出しまで下にスクロールして、展開します。

3. サイトの Open Graph を有効/無効にするには、 Open Graph を有効にする 設定をオン/オフにします。

   

4. (オプション) 画像 および 画像の代替テキストの説明 フィールドを使用して、サイトのページのデフォルトの og:image プロパティを設定します。

   これらの値は、 ページ および 表示ページ 構成によって上書きされます。

   

5. デフォルトのog:image構成をプレビューします。

   画像の比率は、共有する場所によって変わる可能性があることに注意してください。

   

6. [保存]をクリックします。

og:imageプロパティの分析

画像を選択すると、DXP は選択した画像の表示方法を決定する構造化プロパティを自動的に追加します。 画像フィールドは、次の <meta> タグを定義します。

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />

画像の代替テキストの説明 フィールドにテキストを入力すると、選択した画像に対してスクリーン リーダーによって読み取られるデフォルトのテキストが決定されます。

Open Graph画像のローカライズされた別の説明を作成するには、［言語フラグ］ボタンをクリックして、設定する言語を選択します。 ここで入力された値によって、デフォルトのog:image:altタグが定義されます。

<meta property="og:image:alt" content="This is an example." />

関連トピック

• 検索エンジンを最適化
• サイト設定UIリファレンス
• ページ設定UIリファレンス