OGP（Open Graph Protocol）はX（Twitter）やFacebook、LINEをいったSNSでリンク共有されるときに表示される記事の画像やタイトル、記事抜粋などをカスタマイズするためのものです。
SEO最適化がなされているWordPressのテーマ等を使用しているのであれば、OGPの設定などは管理画面等で行なうことができたりもします。
そして、もしOGPの設定ができないテーマでもAll in one SEO Packなどのプラグインを使うことで設定ができるようになります。
ただ、このSEO系のプラグインはOGPの設定のみで使うとかであれば便利かもしれませんが、多機能が故にサイトの表示速度が遅くなってしまったり、SEOの最適化がなされているテーマで使うとタグが重複してしまったりとソース的にもあまり美しくない状況になったりします。
SEOの効果はあるのかもしれませんが、狙ったキーワードを含めたコンテンツをどう作るかという点が一番のカギなわけなので妄信的に使用するのもどうかなと個人的には思っています。
話が逸れてしまいましたが、本題のプラグインなしでのOGP設定について解説します。
OGPの使用をタグで宣言する
OGPの設定するにあたり、まず<head>タグにprefix属性を指定します。
<head prefix="og:http://ogp.me/ns#">OGPに関して検索してみると、Facebook独自のプレフィックスも同時に宣言している例もあったのですが、Facebook公式のドキュメントを見ても必須であるといった記述が見当たらなかったので、上記の指定方法で問題ないかと思われます。
OGP設定する際に使用するmetaタグ
続いて、OGP設定する際に使用する<meta>タグです。一般的なサイトやブログであれば以下の内容でいいのではと思います。
<meta property="og:title" content="記事タイトル" />
<meta property="og:type" content="websiteまたはarticle" />
<meta property="og:image" content="アイキャッチ画像url" />
<meta property="og:url" content="ページurl" />
<meta property="og:description" content="ページの要約・抜粋" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="jp_JP" />
<meta name="twitter:card" content="OGPカードタイプ" />
<meta name="twitter:site" content="@ユーザー名" />
<meta property="fb:app_id" content="'FacebookアプリのID" />上から4つ（title・type・image・url）がベーシックというか必須のメタデータとなります。
他のdescription・site_name・localeはオプションのメタデータとなり、それ以外はTwitterまたはFacebook独自のメタデータとなっています。
wordpressでmetaタグを設定
今度は、wordpressで<meta>タグの設定をするためにheader.phpとfunctions.phpのファイルを変更・追記していきます。
まずはheader.phpファイルです。
header.phpファイルを開くと、ほとんどの場合<head>タグが書かれていると思われます。そのheadタグを以下のソースに書き換えます。
<?php
if(is_front_page() || is_home() || is_singular()){
$head_tag = '<head prefix="og:http://ogp.me/ns#">'."\n";
}else{
$head_tag = '<head>'."\n";
}
echo $head_tag;
?>次にfunctions.phpファイルです。以下のソースをご自身に合った内容に変更してファイルに追記してください。
function ogp_tag_insert(){
if(is_front_page() || is_home() || is_singular()){
//固定ページも含めたい場合は以下のように書き換えてください
//if(is_front_page() || is_home() || is_singular() || is_page()){
$tw_card = 'summary';
$tw_site = ''; //@ユーザー名（Twitter（X）のユーザー名）
$fb_app_id = ''; //FacebookのApp IDがなければそのままでOK
$ogp_name = get_bloginfo('name');
if(is_front_page() || is_home()){
$ogp_ttl = get_bloginfo('name');
$ogp_desc = get_bloginfo('description');
$ogp_url = home_url();
$ogp_type = 'website';
$ogp_img = 'ここに使用したい画像のurl';
}elseif(is_singular()){
// 固定ページも含める場合は以下のように書き換えてください
// }elseif(is_singular() || is_page()){
$post_data = get_queried_object();
$post_id = $post_data->ID;
$ogp_ttl = $post_data->post_title;
$ogp_type = 'article';
$ogp_url = get_permalink($post_id);
$excerpt = $post_data->post_content;
$excerpt = strip_shortcodes($excerpt);
$excerpt = wp_strip_all_tags($excerpt);
$excerpt = str_replace(array("\r\n","\r","\n"," "),'', $excerpt);
$ogp_desc = mb_substr($excerpt,0,110);
if(has_post_thumbnail($post_id)){
$ogp_img = get_the_post_thumbnail_url($post_id,'full');
}else{
$ogp_img = 'ここに使用したい画像のurl';
}
}
$ogp_tag = <<<EOF
<meta property="og:title" content="{$ogp_ttl}" />
<meta property="og:type" content="{$ogp_type}" />
<meta property="og:image" content="{$ogp_img}" />
<meta property="og:url" content="{$ogp_url}" />
<meta property="og:description" content="{$ogp_desc}" />
<meta property="og:site_name" content="{$ogp_name}" />
<meta property="og:locale" content="jp_JP" />
<meta name="twitter:card" content="{$tw_card}" />
EOF
;
if(!empty($tw_site)){
$ogp_tag .= '<meta name="twitter:site" content="'.$tw_site.'" />'."\n";
}
if(!empty($fb_app_id)){
$ogp_tag .= '<meta property="fb:app_id" content="'.$fb_app_id.'" />'."\n";
}
echo $ogp_tag;
}
}
add_action('wp_head','ogp_tag_insert');ちなみに、わたしはX（Twitter）のアカウントは持っていますが、wordpressのカスタマイズに関することなどは一切ポストしていないアカウントですので、上記ソース内の$tw_site = ‘@ユーザー名’;の部分は以下のようにしています。
$tw_site = '';また、以下の部分ですが…
$ogp_img = 'ここに使用したい画像のurl';わたしの場合は、アイキャッチ画像が登録されていない場合に使用する画像（no-thumb.png）を子テーマ内にimgという名前のフォルダに入れているので、その画像を使用しています。
$ogp_img = get_stylesheet_directory_uri().'/img/no-thumb.png';それと画像サイズに関してですが、1200px × 630pxのサイズがいいようです。それぞれのSNSによって推奨されているサイズが異なるのですが、SNSで汎用的に使えるということで1200px × 630pxサイズを用意しておくといいかもしれません。
わたしは面倒なんでそこまでやっていませんけど…
ひとまず、これで必要最低限のOGP設定ができるかと思います。