いまさらながらOGPの重要性について

ウェブに関わっている方はご存知だとは思いますが。。。

Open Graphic Protocolの頭文字を取ってOGPといいます。

これは、FacebookやTwitterでサイトに訪れたユーザーがSNSNシェアボタンを押したときにタイムラインイン画像を表示するためのものです。

文字だけのシェアより画像があることで圧倒的に差別化でき、自身のサイトをより拡散させやすくなります。

HTML+CSSのフルスクラッチでサイトを制作されている場合はHeader部に必要なタグを書いてFacebookのAPP_IDを取得したりTwitterの場合はURLをを書いて承認のためにクリックして送信するだけで使えるようになります。
すなわち、両者ともSNSのアカウント取得は必須だといえます。

下記が基本のタグになります。

<meta property="fb:app_id" content="FacebookのAPP_ID 15桁">
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="website">
<meta property="og:image" content="画像URL（1200×630）">
<meta name="twitter:site" content="@Twitterのアカウント">
<meta name="twitter:title" content="サイト名 | サイトタイトル">
<meta name="twitter:description" content="サイトのディスクリプション">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:src" content="画像URL（1024×512）>

私の運営しているサイトは WordPressで制作しているので、ogpを設定するのに便利で様々なプラグインが出ています。
がしかし、私は単にプラグインを使ってogp設定はしていません。

それでは、どのようにogpを設定しているのか解説していきます。

ずばり当サイトのOGPタグを例として記載します。

この下記のタグはHeaderにHeader and Footerプラグインを使い埋め込んでいます。
https://ja.wordpress.org/plugins/header-footer/

<!--OGP開始-->
<meta property="fb:app_id" content="FacebookのAPP_ID 15桁">
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="website">
<meta name="twitter:site" content="@Pierre_1965">
<meta name="twitter:title" content="andP Inc. | デザインを愉しむ">
<meta name="twitter:description" content="andP（アンドピー）は,『デザインを愉しむ。』をモットーに,大阪でロゴ,名刺,チラシ,フライヤーなどのグラフィックデザインから印刷までワンストップでご提供します.またテンプレートではない,完全オリジナルデザインでWordPressでWEB構築をやっている会社です.">
<meta name="twitter:card" content="summary_large_image">
<?php
if(is_single() or is_page()){//投稿記事か固定ページ
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:description" content="andP（アンドピー）は,『デザインを愉しむ。』をモットーに,大阪でロゴ,名刺,チラシ,フライヤーなどのグラフィックデザインから印刷までワンストップでご提供します.またテンプレートではない,完全オリジナルデザインでWordPressでWEB構築をやっている会社です.">';echo "n";//抜粋から
endwhile; endif;
echo '<meta property="og:title" content="andP Inc. | デザインを愉しむ">';echo "n";//投稿記事タイトル
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "n";//投稿記事パーマリンク
} else {//投稿記事以外（ホーム、カテゴリーなど）
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "n";//「一般設定」で入力したブログの説明文
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "n";//「一般設定」で入力したブログのタイトル
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "n";//「一般設定」で入力したブログのURL
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["'])(.+?)1.*?>/i';//投稿記事に画像があるか調べる
if (is_single() or is_page()){//投稿記事か固定ページの場合
if (has_post_thumbnail()){//アイキャッチがある場合
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">';echo "n";
echo '<meta name="twitter:image:src" content="'.$image[0].'">';echo "n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//アイキャッチは無いが画像がある場合
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "n";
} else {//画像が1つも無い場合
echo '<meta property="og:image" content="https://andp.jp/wp-content/uploads/2016/03/men-316727_1280.jpg">';echo "n";
echo '<meta name="twitter:image:src" content="https://andp.jp/wp-content/uploads/2017/03/tw_ogp.jpg>';echo "n";
}
} else {//投稿記事や固定ページ以外の場合（ホーム、カテゴリーなど）
echo '<meta property="og:image" content="https://andp.jp/wp-content/uploads/2016/03/men-316727_1280.jpg">';echo "n";
echo '<meta name="twitter:image:src" content="https://andp.jp/wp-content/uploads/2017/03/tw_ogp.jpg>';echo "n";
}
?>
<!--OGP完了-->

何をしているのかというと、そのページが固定ページなのか投稿ページなのかを判断したり、そのページにアイキャッチ画像が設定されているのか否かを判断してどの画像をogpとして反映するかを決めるためのコードになります。

必要なコードを書いた状態で下記の２つを取得設定してください。

①FacebookのAPP_ID取得方法
https://developers.facebook.com/にアクセスしてください。もちろん、ご自身のFacebookアカウントでログインしてからです。

次に右上の「My Apps」にマウスカーソルを乗せるとメニューが出てくるので「Add a New App」をクリックします。
そして、Webサイトをクリック→アプリID作成をクリックし必要内容を記入して、最後に「App Review」をクリックしてIDを公開状態にすれば完了です。

②Twitterカードの設定方法
https://cards-dev.twitter.com/validatorにアクセスしPreview Cardをクリックし、エラーが出ていなければ完了です。