Lognote

ネット集客に強い整体院サイトを制作

ogp-twitter-card-matome-thumbnail

WordPressのSEO対策で必ず設定するべきOGPとTwitter Cardコードまとめ

公開日:2017-03-21
最終更新日:

WordPressでブログを運営するうえで、まず初めにやってもらいたいSEO対策の一つとしてOGP設定というものがあります。

一見難しく感じるOGP設定ですが、今回はコピペだけでOGPが設定できるコードを紹介しますのでぜひ利用してみてください。

OGPとTwitter Cardを設定しよう

そもそもOGPとは何か

今このページをご覧になっている方の中には、「OGPっていまいちわからないけど、とりあえずしとけっていわれてるから検索してみた」という方もいらっしゃるかもしれませんので少し説明をします。

OGPとは、Open Graph Protocolの略で、Facebookやmixi、Google+などのSNS上でWebページの内容を伝えるために定められたプロトコルです。OGPを設定しておくと、URLが共有された際に、設定された画像やタイトル・説明文が表示されるようになり、ユーザーに対して、フィード上あるいはウォール上でWebページの内容を伝えることができます。

OGPとは – UIDEAL | ナイル株式会社

プロトコルなど専門用語があって難しく感じますが、簡単にいうと記事を拡散されやすくするためのWeb上の仕組みのことです。

例えば、Facebookを例に説明します。

ogp-twitter-card-matome-01

写真の出ている記事リンクがOGP設定されたもの、文字だけの記事リンクが設定されていないものです。目に触れたときのインパクトが全然違いますよね。記事のタイトル、説明文、ブログURLまで表示してくれています。

さらに、いいねボタンをクリックされた投稿がその人の友達のニュースフィードにも表示されるようになるので、たくさんの人の目に触れる機会が増えアクセスアップにつながります。

コピペ用OGPコード

PHP

<meta property="fb:app_id" content="アプリID" />
<?php
if (is_front_page()){
echo '<meta property="og:type" content="blog" />';echo "\n";
} else {
echo '<meta property="og:type" content="article" />';echo "\n";
}
?>
<meta property="og:url" content="<?php echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; ?>" />
<?php
if (is_singular() && ! is_archive() && ! is_front_page() && ! is_home()){
     if(have_posts()): while(have_posts()): the_post();
          echo '<meta property="og:title" content="'.the_title("", "", false).'" />';echo "\n";
          echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'" />';echo "\n";
     endwhile; endif;
} else {
     echo '<meta property="og:title" content="'; bloginfo('name'); echo'" />';echo "\n";
     echo '<meta property="og:description" content="'; bloginfo('description'); echo '" />';echo "\n";
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';
if (has_post_thumbnail() && ! is_archive() && ! is_front_page() && ! is_home()){
     $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";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && ! is_archive() && ! is_front_page() && ! is_home()) {
     echo '<meta property="og:image" content="'.$imgurl[2].'" />';echo "\n";
} else {
     echo '<meta property="og:image" content="メディアURL" />';echo "\n";
}
?>

header.phpのhead内に上記コードをコピペしてください。

ハイライトされている行は、各自で記入が必要な部分です。

アプリIDの取得方法

ogp-twitter-card-matome-02

①一行目のアプリIDを取得するには、まず開発者向けFacebookにアクセスし、右上の新しいアプリを追加ボタンをクリックします。

②表示名、メールアドレス、カテゴリを入力します。

表示名はブログ名、カテゴリは何となくそれっぽいものでOKです。

ogp-twitter-card-matome-03

③アプリを作成したらIDがわかるようになるので、その数字をそのまま入力します。

32行目のメディアURLはアップロードした画像のURLを記入してください。ここの画像はサムネイルが設定されていない場合に表示される画像となります。

以上の設定が終わったら、下記リンクから一度デバッグをおこない、デバッガーで表示確認をしてください。

ogp-twitter-card-matome-04

しっかり設定がされていればこのように表示されます。

Twitter Cardも設定しよう

OGP設定が終わったら、Twitter Cardも一緒に設定しましょう。Twitter CardとはTwitterにリンク付きでつぶやいたとき、そのサイトの画像を表示させるための設定です。

OGPがFacebookならTwitter CardがTwitterといった感じで捉えてもよろしいかと思います。

Twitter Cardを設定した場合

このようにブログのサムネイルを大きく表示して目立たせることができます。

コピペ用Twitter Cardコード

PHP

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@TwitterID">
<?php if(is_home()): ?>
<meta name="twitter:title" content="<?php bloginfo('name'); ?>">
<meta name="twitter:description" content="<?php bloginfo('description'); ?>">
<meta name="twitter:image:src" content="メディアURL">
<?php elseif(is_page()): ?>
<meta name="twitter:title" content="<?php the_title(); ?>">
<meta name="twitter:description" content="<?php bloginfo('description'); ?>">
<meta name="twitter:image:src" content="メディアURL">
<?php else: ?>
<meta name="twitter:title" content="<?php the_title(); ?>">
<meta name="twitter:description" content="<?php echo mb_substr(str_replace(array("rn", "r", "n"), '', strip_tags($post-> post_content)), 0, 100).'...'; ?>">
<?php endif; ?>
<?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'large'); ?>    
<?php if(is_single() && has_post_thumbnail() ): ?>
<meta name="twitter:image:src" content="<?php echo $image_url[0] ?>">
<?php elseif(!is_home() && !is_page() ): ?>
<meta name="twitter:image:src" content="メディアURL">
<?php endif; ?>

こちらのコードをhead内のOGPコードの下にコピペしてください。

2行目にはTwitterIDが入ります。@を含めて記入してください。

3ヵ所のメディアURLは上からトップページ用、固定ページ用、どのページにも当てはまらない場合の3種類です。

Twitter Cardの設定が終わったら、こちらのサイトからちゃんと表示されるかテストをおこなってください。

ogp-twitter-card-matome-05

無事設定がされている場合は緑色のログが表示され、執筆したブログをシェアすれば自動で画像が表示されるようになります。

以上、「WordPressのSEO対策で必ず設定するべきOGPとTwitter Cardコードまとめ」という記事をお届けしました。

-WordPress
-

この記事のタイトルとURLをコピーする

オススメ商品はこちら!

WordPressのSEO対策で必ず設定するべきOGPとTwitter Cardコードまとめ
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

another-ad-category-thumbnail

カテゴリーごとに自動で入れ替わるAmazon商品ランキングをWordPressの記事下に設置する

ブログで収益を受け取る方法の一つとして、Amazonアソシエイトの紹介料をいただくというのがあります。 Ama …

views-display-thumbnail

WordPressで記事ごとに閲覧回数を表示する方法

「自分のブログもそこそこ読まれるようになってきたなー」 そんなとき、どれくらい読まれているのか訪問者に見せたく …

xserver-morisawa-thumbnail

超美麗!無料で日本語のWebフォントが使えるエックスサーバーの新機能が凄すぎた!

エックスサーバーに日本語Webフォントのモリサワを無料で導入できる新機能が追加されました。モリサワと...

instagram-bug-cause-tw-autolink-thumbnail

WordPressでInstagramの埋め込みが表示されない原因はこれだった!

Instagramの埋め込みが表示されないバグが発生しました。原因はfunctions.phpに記述した「Twitterの自動...

CSSでオリジナルのFeedly購読ボタンを作成する方法

皆さんはブログにFeedlyボタンは設置していますか?リピーターを増やすには必須のサービスですが、公式...

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい