SNSとの連携 – OGP(Open Graph Protocol)を設定しよう

当オフィスのホームページもようやくOGP(Open Graph Protocol)対応へと改修いたしました。

一応、投稿ページにはシェアボタンを設置していたのですが、シェアボタンが正常に動いていないことに気づきまして、ついでに、OGP設定も行った次第です。しかし、SNSと連携するなら、ホームページのOGPはとても便利な機能だと実感しました。

〇OGP(Open Graph Protocol)とは何か?

まず、OGP(Open Graph Protocol)とは何かといいますと、FacebookやTwitter等のSNSでシェアした際に、OGPに対応しているホームページですと、そのシェアしたページのタイトルやイメージ画像、メタディスクリプション等が、カード形式で表示される機能です。

〇OGP対応サイトにする事のメリット

まず、SNSにシェアされやすくなります。

良い記事がある。じぁあシェアしよう!と思っても、シェアする側からすると説明文を記載したり、リンクを張ったり、画像を張ったりと、シェアするにも手間がかかり、面倒くさいもの。

しかしそれが、OGP対応サイトであれば、SNSユーザーは、URLアドレスを入力するだけで、その記事のグラフィカルな情報を自身のSNSに埋め込む事ができるんです。

他にも、自分が投稿した記事を自身のSNSと連携する際にも便利です。

これまでは例えばTwitterへブログを投稿しようと思ったら、Twitterにアクセスして、リンク張って、文章書いて、とかなり面倒でありまして、それによりTwitterアカウントは持っていましたものの、ほぼ稼働していない状態でした。

それが、OGP対応したことにより、当オフィスのTwitterにブログ記事を一気にツイートできました。

〇OGP対応のサイトにするには – OGP設定

OGPに対応したホームページにするには、ホームページのヘッダー部分に決まった書式でコードを記述する必要があります。

ホームページのタイトルや内容を検索エンジンに伝える為にヘッダーにメタ情報を記述したりしますが似たようなものです(OGP設定はTwitterやFacebook等に情報を伝える点、また、グラフィカルな情報であるという点で異なりますが)。

1.OGPの宣言

ウェブサイトをOGP対応とするためには、まずは宣言が必要です。宣言は<html>タグに記述するようです。以下、宣言の記述方法です(この宣言はそのままコピペでOK)。

<html prefix="og: https://ogp.me/ns#">

2.Open Graphマークアップ

フェイスブックやTwitter等のSNSに渡したい情報を<head> ~ </head>内にメタタグを使いメタデータとしてマークアップします。

SNSに渡せる情報(プロパティ)は決まっており、以下のとおりです。

og:url ⇒ ページの正規URを指定します。SNSにカード表示させたい投稿ページのURL等を指定します。以下、マークアップ例。

<meta property="og:url" content="https://www.office-tomo.net">

og:title ⇒ 記事のタイトル。以下、マークアップ例。

<meta property="og:title" content="<?php bloginfo( 'name' ); ?>">
 //トップページの場合

og:description ⇒ コンテンツの簡単な説明。2~4文が一般的です。Facebook上では、投稿のタイトルの下に表示されます。以下、マークアップ例。

<meta property="og:description" content="<?php bloginfo( 'description' ); ?>">
 //トップページの場合

og:image ⇒ コンテンツがFacebookでシェアされたときに表示される画像のURL。以下、マークアップ例。

<meta property="og:image" content="<?php the_post_thumbnail_url('large'); ?>">
 //投稿ページで、アイキャッチ画像を指定する場合

og:type ⇒ コンテンツのメディアのタイプ。

<meta property="og:type" content="website"> //トップページの場合、一般的に「website」を指定するようです。

<meta property="og:type" content="article">
 //投稿ページ等の記事の場合、「article」を指定。

og:locale ⇒ リソースのロケール。デフォルトはen_USです。

<meta property="og:locale" content="ja_JP"> //日本語のみのページであればja_JPを指定します。

基本的なOpen Graphマークアップの仕方は以上のとおりです。

〇有料テーマだとOGPに対応しているテーマが殆ど

OGPマークアップ方法を説明しましたが、実際には、有料テーマや一部無料テーマにはOGP設定機能を持つテーマが多いので、このようなテーマを使用すればOGPマークアップを自分で行う必要はなく、管理メニューで簡単に可能です。

・TCDテーマの場合

TCDテーマOGP設定方法
TCDテーマオプション内にOGP設定メニューがある

【TCDテーマ】

・リキッドプレステーマの場合

リキッドプレスOGP設定方法
管理メニュー「カスタマイズ」内の「SEO」メニューを開く
リキッドプレスOGP設定方法
「「「「「OGP、TwitterCards」メニュー

・Vektor「ライトニング」無料版の場合

ライトニング無料版の場合、テーマ単体ではOGPには対応しておりませんが、高機能無料プラグイン「All in one Ex-Unit」をインストールすることで、プラグインでのOGP設定が可能です。

vektorテーマOGP設定方法
プラグイン「All in one Ex-Unit」SNSメニュー
Vektor WordPress Solutions
Lightning Proの紹介サイト

是非、シェアやツイートをお願い致します。

【参考リンク】

・Facebook開発者向けOGPの解説(公式:ウェブ管理者向けシェア機能ガイド)

https://developers.facebook.com/docs/sharing/webmasters#markup

・Twitterカード利用開始ガイド(公式サイト)

https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です