当オフィスのホームページもようやく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テーマ】
・リキッドプレステーマの場合



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


是非、シェアやツイートをお願い致します。
【参考リンク】
・Facebook開発者向けOGPの解説(公式:ウェブ管理者向けシェア機能ガイド)
https://developers.facebook.com/docs/sharing/webmasters#markup
・Twitterカード利用開始ガイド(公式サイト)
https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started
“SNSとの連携 – OGP(Open Graph Protocol)を設定しよう” への2件の返信