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
-

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

関連記事

Google XML Sitemapsを設定してもサイトマップが真っ白になる現象はURLの仕様変更が原因だった

ブログを開設してから1週間くらいが過ぎました。 ブログを作ってからすべきことはたくさんありますが、その中でもサ …

広い高原に立つ木製の分岐看板の写真

WordPressで通常の投稿かカスタム投稿か判断してカテゴリー名を表示する方法

普段使い慣れないカスタム投稿タイプを使ったところ、普通のカスタマイズと勝手が違い四苦八苦しております。 今回は …

cannot-modify-header-information-thumbnail

WordPressで”Cannot modify header information”の警告が出たときの解決方法

WordPressテーマの制作中、管理画面のJetpackメニューの部分に Warning:Cannot mo …

パソコンでブログを閲覧する外国人女性の写真

売り上げ100万円の施策?!WordPressでAmazonアソシエイトをカテゴリーごとに変更

自分のブログ画像をはめ込んだら新鮮(笑) 今回はAmazonアソシエイトを100万円売り上げるための小細工をし …

wordpress-category-tag-change-thumbnail

WordPressのカテゴリー⇔タグを変換して訪問者に親切なブログ作りをしよう

ブログ訪問者はサイドバーなどに設置されたカテゴリーから「Wordpressの記事数が多いから参考になる記事があ …


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

lognote
2017/5/09
コメントありがとうございます。 本当にそうですよね。 通販サイトは、相手の顔が見えない分信頼第一で成り立っているので、Amazonにはマーケットプレイスの管理をしっかりやっていただきたいで...
匿名探偵
2017/5/09
ここ最近のamazonはちょっとヤバいですね。 4,5000円が相場で微小の変動しかしていなかった市場に、今年度に入って急に1000円切った値で断続的に出品するなど、異常な出品者が様々な商品に出没し...
Healer

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