トップページ > サイト作成 > CMS > Movable Type で SNS への表示に効果がある OGP タグの挿入方法

Movable Type で SNS への表示に効果がある OGP タグの挿入方法

公開したウェブサイトやブログの内容を一早く見てもらう手段の 1 つに SNS を利用が挙げられるが、効果的に SNS に自サイトの紹介を表示するために Movable Type へ OGP タグを挿入する方法について紹介する。

Movable Type で SNS への表示に効果がある OGP タグの挿入方法

1. OGP タグとは

OGP(Open Graph Protocol)タグとは、ウェブサイトのページやブログの記事を Twitter や Facebook など SNS にシェアする際にページのタイトルや URL を表示することができる HTML タグの 1 つである。

OGP タグにはどの SNS にも共通で利用するものの他、Twitter のユーザー名を表示するなど各 SNS 向けの OGP タグが用意されているため、SNS にシェアされた時にどのように表示させたいかを設計する必要がある。

OGP タグを挿入した様子

上図は OGP タグを入れたページの HTML の様子である。
赤枠で囲っている箇所のように OGP タグと呼ばれているものの実際に HTML に記述する場合は META タグの一種として取り扱う。
例えばページのタイトルを指定する場合は og:title を利用する。

2. OGP タグが SNS に効果がある理由

OGP タグが SNS に効果がある理由としては、ページや記事をシェアした場合に OGP タグを設定していなければシェアした本人が説明や URL をコピー&ペーストして手間がかかるが、OGP タグを用意しておくことで自動的に説明文や URL をシェア用に入力済みの状態にしてシェアしやすくするためである。

また、アイキャッチ用の画像の URL を OGP として用意しておくことでシェア時に画像も一緒に表示されるので目に留まりやすくなる効果も期待できる。
Twitter など各 SNS 向けの OGP タグを利用するとカード型(左側に画像、右側にタイトルが配置)でシェアされ、シェアとして投稿する人のコメントを阻害することなく自サイトへの誘導を図ることができる。

3. Movable Type に OGP タグを挿入する方法

Movable Type に OGP タグを挿入する方法は、テンプレートを利用する。
また、OGP タグの値には各ページのタイトルや説明文を掲載するため、ページごとに動的に値を入れ替える必要があり MT タグも利用する。

OGP タグを入れるためにまず Movable Type の管理画面にログインし、左メニューより「デザイン -> テンプレート」を選択してテンプレートの一覧を表示する。
次に OGP タグは HEAD タグ内に記載しなければならないので、テンプレートの HEAD タグを指定しているものを開く。
Moveble Type の初期状態ではアーカイブテンプレートにある「ウェブページ」や「記事」が該当するため、構築している状況に応じてテンプレートを選択する。

アーカイブテンプレートの HEAD タグがあるテンプレートを開く

HEAD タグが記述されているテンプレートが開けば、下記のように OGP タグを HEAD タグ内に記述して保存する。
テンプレートを保存した後は管理画面の左上にあるボタン「再構築」をクリックしてサイト全体にテンプレートを反映させると OGP タグの挿入が完了となる。

テンプレートに OGP タグを記述する

<meta property="og:type" content="article">
<meta property="og:locale" content="<$mt:BlogLanguage setvar="blog_lang"$><mt:If name="blog_lang" eq="ja">ja_JP<mt:else><$mt:Var name="blog_lang"$></mt:If>">
<meta property="og:title" content="<$mt:PageTitle encode_html="1"$>">
<meta property="og:url" content="<$mt:PagePermalink encode_html="1"$>">
<meta property="og:description" content="<$mt:PageExcerpt remove_html="1" encode_html="1"$>">
<meta property="og:site_name" content="<$mt:BlogName encode_html="1"$>">
<meta property="og:image" content="<mt:Assets type="image" tag="@SITE_ICON" limit="1"><$mt:AssetThumbnailURL width="320" square="1" encode_html="1"$><mt:Else><$mt:SupportDirectoryURL with_domain="1" encode_html="1"$>theme_static/eiger/images/siteicon-sample.png</mt:Assets>">

4. OGP タグ挿入のまとめ

Movable Type に OGP タグを挿入するまとめとしては、HEAD タグの記載があるテンプレートタグに記述して、記述後はウェブサイト全体を再構築することである。

OGP タグ挿入のまとめ

また、OGP タグはページや記事ごとにタイトルと説明文が異なることから、動的に OGP タグに指定する値が変わるように MT タグで情報を取得する必要がある。

関連記事

@webolve をフォローしてください