当オフィスのホームページもようやく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等に情報を伝える点、また、グラフィカルな情報であるという点で異なりますが）。
１．OGPの宣言
ウェブサイトをOGP対応とするためには、まずは宣言が必要です。宣言は<html>タグに記述するようです。以下、宣言の記述方法です（この宣言はそのままコピペでOK）。
<html prefix="og: https://ogp.me/ns#">２．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