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

ogp-twitter-card-matome-thumbnail

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

[php highlight=”1,32″]
<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";
}
?>
[/php]

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

[php highlight=”2,6,10,19″]
<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; ?>
[/php]

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

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

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

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

ogp-twitter-card-matome-05

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

コメントを残す

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

承認制のため反映にお時間をいただきます。