バズりやすくなる?wordpressにOGPを設定して記事を拡散しやすくする

スポンサーリンク
Pocket
LINEで送る

OGPを設定して、記事を拡散しやすくしましょう。

OGPとは

OGPとはOpen Graph protocoの略で、Facebookやtwitterでシェアされた時にそのページのタイトル・URL・概要・画像を正しく伝えるためのmeta情報です。

Screenshot_from_2016-07-06 23:54:34

これです。はてばブログなどで記事のURLを貼り付けるとそのページの画像やタイトルが表示されるものです。

OGPを設定することでただのテキストリンクより目立たせることができます。

 

OGPの設定の仕方

<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="article" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="画像のURL" />

必須項目は上記です。とりあえずこちらを入力すれば表示されます。
og:typeは他にもwebsite, blogを指定できます。

WordPressで設定

wordpressで設定すると以下のようになります。

<meta property="og:title" content="<?php wp_title( '', true, 'right' ); ?>" />
<meta property="og:type" content="blog" /> <!--またはwebsite, blog-->
<meta property="og:url" content="<?php echo the_permalink(); ?>" />
<?php
$thumbnail_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($thumbnail_id, 'thumbnail');
?>
<meta property="og:image" content="<?php echo $image_url[0]; ?>" />

これでページごとのアイキャッチ画像とタイトルが表示されます。

設定が完了したら実際にどう表示されるのか気になりますね。
そこでOGP確認ツールSharing Debuggerです。

スポンサーリンク

Sharing Debugger

おっと、エラーがでた
Screenshot_from_2016-07-07 00:02:24

Provided og:image URL, http://notsleeeping.com/wp-content/uploads/2016/07/amazontruck-150×150.jpg was not valid because it did not meet the minimum size constraint of 200px by 200px.

画像が小さいそうです。
解決方法は画像サイズを指定してあげること。

<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />

こちらの2つを追加

これで解決です。

完成形

<meta property="og:title" content="<?php wp_title( '', true, 'right' ); ?>" />
<meta property="og:type" content="blog" /> <!--またはwebsite, blog-->
<meta property="og:url" content="<?php echo the_permalink(); ?>" />
<?php
$thumbnail_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($thumbnail_id, 'thumbnail');
?>
<meta property="og:image" content="<?php echo $image_url[0]; ?>" />
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />

wordpressのOGPの設定はこれで完了です。