コピペで出来る!SNSで見やすくするためにWordPressのOGPの設定しよう

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

 

OGPとはFacebookやtwitterでシェアされた時にそのページのタイトル・URL・概要・画像を正しく伝えるためのmeta情報です。OGPの設定しなければただのURLのリンクが表示されるためクリック率が上がらないことも。

正しくOGPを設定し画像付きでリンクを目立たせましょう。

 

Screenshot_from_2016-07-06 23:54:34

設定後はこんな感じです。

 

スポンサーリンク

OGPの設定の仕方

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

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

 

WordPressの場合はこれをコピペ!

wordpressのOGPは以下で設定できます。

 

<meta property="og:title" content="<?php wp_title( '', true, 'right' ); ?>" />
<meta property="og:description" content="<?php wp_title( '', true, 'right' ); ?>" />
<meta property="og:type" content="website" />
<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, 'mideum');
?>
<meta property="og:image" content="<?php echo $image_url[0]; ?>" />
<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />

 

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

 

OGPが正しく設定できてるか確認しましょう

Sharing Debuggerで確認してみます

 

スポンサーリンク

Sharing Debuggerの使い方

中央にあるフォームに確かめたいページのURLを入力しデバッグを押します。

 

こんな感じでエラーが出てなければ正しく設定できています。

 

スポンサーリンク

よくある間違い

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.

 

このエラーは画像が小さいと表示されます。

画像サイズを200x200pxにしましょう。