こんにちは、mickです。
今日は、OGPメタ要素についての記事です。
WordPressでは、次の場合に簡単にOGPメタ要素を入れることができます。
- SEO機能のプラグイン All in One SEO や Yoast SEO を使う
- SEO機能をもつテーマを使う(例えば、Cocoon)
ここでは、コーディングしてどんな環境でもOGPメタ要素を入れる方法を紹介しています。
環境に依存しないため、汎用性が高いです。
さらに、WordPressのWebサイトが軽くなることが期待できます。
自分の場合、All in One SEOから卒業したをきっかけに、OGPメタ要素のコーディングに行き着きました。
やってみたら、面白かったです。
最後には、自分の設定が反映されているかのチェックツールも紹介しています。
安心してください。
では早速中身にはいっていきます。
OGPメタ要素について確認から
OGPメタ要素について確認しておこうと思います。
OGPはSNS投稿を最適化したSEO機能
OGPは、適切に設定するとFacebookやTwitterなどのSNSに記事を投稿したりシェアしたとき、よしなに表示してくれる機能です。
例えば、次の情報をよしなに表示してくれます。
- ページのタイトル
- 概要
- 画像(サムネイル)
OGPを設定しておくと記事次第で、ときにかっこよく、ときにかわいくブログの記事を紹介してくれます。
結果としてユーザーの目を引くので、クリック率アップが狙えます。
このことから、SEO機能としてOGPは扱われています。
ところでOGPを調べると、いつもゴチャゴチャした印象があると思いませんか。
なので、ひと言でまとめておきました。
OGPは、ブログの記事をSNS上で良くみせる仕組み
です。
厳密には、違うんですがOGPを使う側からするとこれで十分だと思います。
WordPressでOGPを扱う3つの方法
WordPressでOGPを扱うには3つあります。
- プラグインを使う
- OGP機能の入ったテーマを使う
- コーディングする
WordPressでOGPを扱う場合、プラグインを使うのが一番簡単。
SEO機能の中にOGPが入っているので、All in One SEO や Yoast SEO を使っているならOGP機能が入っています。
また、WordPressテーマそのものにSEO機能がある場合もあります。
例えば、CocoonやLuxeritasなど有名な無料テーマを使っていればOGP機能が入っています。
最後は、コーディングするやり方。
Webで調べるとだいたい、functions.phpを編集するパターンが多いですね。
コーディングでOGPを設定する(コピペOK)
では本題。次をfunctions.phpに書けばOGP機能(OGPメタ要素)がWebサイトのヘッダに付きます。
// ogp settings
function get_my_ogp() {
// 最新の投稿、固定ページ(フロントページか投稿ページか)、固定ページ(投稿)
if( is_front_page() || is_home() || is_singular() ){
global $post; // 記事情報格納変数(グローバル変数)
$ogp_title = ''; // OGP用タイトル変数
$ogp_description = ''; // OGP用概要変数
$ogp_url = ''; // OGP用URL変数
$ogp_thumb = ''; // OGP用サムネイル変数
$ogp_img_alt = ''; // OGP用サムネイルのALTタグ変数
$add_tag_data = ''; // OGP用出力タグ変数
// OGPのタイプを記事(投稿)とそれ以外で分ける
$ogp_type = ( is_single() ) ? 'article' : 'website' ;
// Webサイト名
$ogp_site_name = get_bloginfo('name');
// ロケール
$ogp_locale = 'ja_JP';
// OGPサムネイルの設定(アイキャッチ画像を取得する)
if ( is_singular() && has_post_thumbnail() ) {
//アイキャッチ IDを取得して画像の「URL,横幅,高さ」を取得
//画像サイズは full(アップロードしたときのサイズ)
$thumb_arrary = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
// 記事に設定しているアイキャッチを取得する [0]url, [1]width, [2]height
$ogp_thumb = $ps_thumb[0];
} else {
// それ以外のページの場合
$ogp_thumb = '代替画像のURL';
}
// 最新の投稿、固定ページ(フロントページか投稿ページか)の判定が先
if ( is_front_page() || is_home() ) {
// ブログタイトル
$ogp_title = get_bloginfo('name');
// ブログ概要
$ogp_description = get_bloginfo('description');
// ブログURL
$ogp_url = home_url();
} elseif(is_singular() ) {
//記事or固定ページの場合
// グローバル変数のpostに記事情報をセットする
setup_postdata($post);
// 記事タイトル
$ogp_title = $post->post_title;
// 記事概要(100文字でカット)
$ogp_description = mb_substr(get_the_excerpt(), 0, 100);
// 記事URL
$ogp_url = get_permalink();
// postに入った情報をリセットする
wp_reset_postdata();
}
// サムネイルのaltタグは、タイトルと同じにしてある
$ogp_img_alt = $ogp_title;
// Facebook用OGPの設定
$isFb = false; //出力するOGPタグのスイッチング
if($isFb){
$add_tag_data .= '<meta property="fb:app_id" content="【app_id(例:012345670123089)】">' . "\n";
$add_tag_data .= '<meta property="fb:admins" content="【admins(例:893948719192737)】">' . "\n";
}
// Twitter用OGPの設定
// ブログの場合は、summary または summary_large_image
$add_tag_data .= '<meta name="twitter:card" content="summary_large_image" />' . "\n";
$isTw = false; // 出力するOGPタグのスイッチング
if ($isTw) {
$add_tag_data .= '<meta name="twitter:site" content="【TwitterID(例:@oneuro)】" />' . "\n";
$add_tag_data .= '<meta name="twitter:creator" content="【TwitterID(例:@mick)】" />' . "\n";
// OGP互換なので、twitter:title, twitter:description, twitter:image、はOGPにまかせる
}
// OGP全体の設定
$add_tag_data .= '<meta property="og:url" content="'.esc_url($ogp_url).'" />' . "\n";
$add_tag_data .= '<meta property="og:title" content="'.esc_attr($ogp_title).'" />' . "\n";
$add_tag_data .= '<meta property="og:description" content="'.esc_attr($ogp_description).'" />' . "\n";
$add_tag_data .= '<meta property="og:image" content="'.esc_url($ogp_thumb).'" />' . "\n";
$add_tag_data .= '<meta property="og:image:alt" content="'.esc_attr($ogp_img_alt).'" />' . "\n";
$add_tag_data .= '<meta property="og:type" content="'.$ogp_type.'" />' . "\n";
$add_tag_data .= '<meta property="og:site_name" content="'.$ogp_site_name.'" />' . "\n";
$add_tag_data .= '<meta property="og:locale" content="'.$ogp_locale.'" />' . "\n";
// 上記で設定したタグを出力する
echo $add_tag_data;
}
}
add_action('wp_head','get_my_ogp'); //headにOGPを出力
これは、直接functions.phpを編集するよりも、プラグインの Code Snippets を使うとコーディング初心者でもWordPressを壊さないので安心です。
Code Snippets の使い方は、次の記事で書きました。
いくつか補足
上のソースコードでは、Facebook用の部分とTwitter用の部分をスイッチングしています。
(あまりほめられた書き方ではありませんが)
FacebookやTwitterとWebサイトを連携しているときにだけ、設定しておけばOK。
このままでもSNSでの表示は変わりません。
またTwitterでは、専用のメタ要素が用意されています。
でも、OGPと互換があるため、共通する部分はOGPを設定していればOK。
ということで3つ(twitter:title, twitter:description, twitter:image)は、省略しています。
動作確認は ラッコツールズさんで
動作確認は、ラッコツールズさんのOGP確認がオススメ。
FacebookやTwitterだけでなく、LINEでの動作も確認できます。
使い方は、簡単。
調べたいURLを入力して「確認する」ボタンをクリックするだけ。シンプル。
参考にしたWebページ
今回のコーディングでは、次のWebページを参考にさせてもらいました。
ありがとうございました。
⇒ SEO対策のSEO Pack > SEO最新用語集 > OGP (Open Graph Protocol)
⇒ テンプレートタグ/get the post thumbnail
⇒ is_home()とis_front_page()の条件分岐タグの違い
⇒ WordPressでOGPタイプを記事とそれ以外で分けたい
まとめ。
プラグインなしでOGPメタ要素をヘッダーに挿入する方法としてコーディングするやり方を紹介しました。
プログラミングの練習やAll in One SEOなどプラグインから卒業したい人は、ぜひ挑戦してみて欲しいと思います。
記事を読んでくれて嬉しいです。
今日もありがとうございました。
初稿 2021/02/15