Open Graphの設定
対応可能：Liferay DXP/Portal 7.3以降
Open Graph は、Facebook、Slack、Twitterなど、サイトコンテンツをサポートしているアプリケーションコンテキストで共有する際に、サイトコンテンツのプレビューを標準化するインターネットプロトコルです。 これは、 <meta> タグとしてページヘッダーに構造化データを埋め込むことで、 RDFa と同じように実現します。
デフォルトでは、Open Graph <meta>タグはすべてのLiferay公開ページに埋め込まれていますが、必要に応じてサイトレベルでこの動作を無効にすることができます。 サイト設定では、デフォルトのog:imageプロパティを設定することもできます。 これらの値は、 ページ または表示ページレベルで上書きされない限り、すべてのページに使用されます。
Open Graph <meta> タグは、未認証のユーザーに対してのみページヘッダーに含まれます。 ユーザーがログインしているときは含まれません。
次の手順に従って、サイトにOpen Graphを構成します。
-
サイトメニュー（
）を開き、 ［設定］ → ［Settings］（以前は ［サイト設定］）に移動します。 -
［Open Graph］ 小見出しまで下にスクロールして、展開します。
-
［Enable Open Graph］ 設定をオンまたはオフにし、サイトのOpen Graphを有効または無効にします。
-
（オプション）［Image］ フィールドと ［画像の別の説明］ フィールドを使用して、サイトのページのデフォルトの
og:imageプロパティを設定します。これらの値は、 ページ および表示ページの構成によって上書きされます。
-
デフォルトの
og:image構成をプレビューします。画像の比率は、共有する場所によって変わる可能性があることに注意してください。
-
［Save］ をクリックします。
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." />