OGP (Open Graph Protocol) Pluginの導入

SNSのリッチリザルトに利用されるOGP (Open Graph Protocol)を動的に生成するPluginを導入しました。

The Open Graph protocol
OGP (Open Graph Protocol)はFacebookが開発・提供したMeta Dataの規格です
SNSのサーバーが読み取る当該ページのタイトルやURLなどのページ情報をセットします
ページ内に[og:]で始まる特定の属性を指定したmeta要素(OGP)を配置するとと、SNSのサーバー側でBlogcardなどのリッチリザルト(リッチスニペット)を提供してくれます
- 例えばXでしたら次のように
Schema.orgはあらゆる情報を構造化する規格ですが、対してOGPはSNSにおける情報共有に特化しているのが特徴です

当サイトでは、Phoca Open Graph Pluginを導入することとしました
PHOCAではOGPに関するPluginを2種提供しています
- Phoca Open Graph Plugin | PHOCA
  - Article用のOGPを自動生成します
- Phoca Open Graph System Plugin | PHOCA
  - Article以外のページでOGPを自動生成します

Joomla! Extensions Directory又はPHOCAからPackageファイルをダウンロードします
- Phoca Open Graph | Joomla! Extensions Directory
- Phoca Open Graph Plugin | PHOCA
System > Manage > Extensionsをクリック
Install Extensionsボタンをクリック
Upload Package File tab > Upload & Install Joomla! Extensionsのファイルドロップエリア内にPackageファイルをドロップします
インストール完了を確認します
同ページ内のPlugin Managerのリンクをクリックします
Phoca Open Graph Pluginを有効化します

ArticleのタイトルやURL等はPluginが記事の設定から自動的に取得するため、特に指定する必要はありません
当サーバーでは、デフォルト設定以外に変更したのはIntro Text As Descriptionのみです
- Articleの先頭テキストをog:descriptionに指定します
- 当サイトのArticleでは先頭を短い一段落とし、以降をRead moreで区切るようルール化していますので、先頭の段落のみがog:descriptionに指定されることとなります

og:title: Basic Metadata
記事のタイトルがセットされます
og:type: Basic Metadata
デフォルト値はArticleです。
og:image: Basic Metadata
記事内の画像のURLがセットされます
呼び出される画像の優先順位はSetting of images in open graph | PHOCAに説明があります
当サイトの記事ではIntro ImageのURLがセットされています
og:url: Basic Metadata
記事のURLがセットされます
og:site_name: サイトの名称がセットされます
Global Configuration > Site tab > Site blk > Site Nameから呼び出します
og:description: サイトの説明がセットされます
Articleオプションで指定がない場合、Global Configlation >Site tab > Metadata blk > Site Meta Descriptionから呼び出します
当サイトでは前述のIntro Text As Descriptionの設定により、Articleの先頭段落が読み込まれます

Joomla!