サイト向けOpen Graphの設定

Liferay DXP/Portal 7.3以降

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

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

注

カスタム <meta> タグは、認証されていないユーザーのページ ヘッダーにのみ含まれます。 ユーザーがログインしている場合は、それらは含まれません。

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

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

2. Pages カテゴリの下にある Open Graph を選択します。

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

   

4. （オプション） Image と Image Alt Description フィールドを使用して、サイトのページのデフォルトの og:image プロパティを設定します。

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

   

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

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

   

6. ［保存］をクリックします。

og:imageプロパティの分析

画像を選択すると、DXPは選択した画像の表示方法を決定する構造化プロパティを自動的に追加します。 Image フィールドは、次の <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リファレンス