ブログ

AFFINGER5(アフィンガー)でピンタレストのリッチピンを設定する方法を紹介!

2020年7月9日

WordPressの有料テーマ「AFFINGERアフィンガー 5」を使用している人で、Pinterestピンタレストのリッチピンの設定で悩んでいる人をよく見かけます。

  • head要素にOGPタグを記入したけどうまく反映しない
  • OGPタグを入れたらピンの表示がおかしくなった
  • AFFINGER5でリッチピンを設定する方法がわからない

そんな悩みを抱えている人は多いと思います。特にアフィンガーを使用しているブログ初心者の人からすれば、リッチピンの導入はハードルが高いです。

この記事のポイント

  • OGPについて簡単に解説
  • OGPが設定されているか調べる方法
  • リッチピン(記事ピン)を設定するOGPのコード紹介

今回はアフィンガーを使用している人へ、ピンタレストのリッチピンを導入する方法を紹介していきます。

もし他のテーマを使用している人の中で、リッチピンがうまく設定できない人も参考にしてみてください。

OGPとは

まずはOGPの設定について簡単な解説をしていきます。

OGPとは

OGPはSNSに自分の記事がシェアされた際に、Webページの情報を正確に読み込ませるHTML要素のことをいいます。

OGPが設定済みであれば、下記のような情報が各ページに記載されています。

 OGP
<meta property="og:type" content="ページの種類" />
<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="記事の概要" />

赤文字で表示された部分が読み込ませているWebページの情報です。

上記のコードをそのままhead要素にコピペしただけでは、SNSへの情報が上書きされてしまいます。

リッチピンの設定|失敗例

失敗例

リッチピンの検証ツールで、申請できたけど上記の画像のような表示になってしまった人も多いのではないでしょうか?

各記事のタイトル・各記事の概要をしっかり読み込ませるには、各ページに合わせたOGPを設定する必要があります

OGP設定済みかどうか確認する

まず自身の利用しているテーマがOGP設定済みのテーマかどうか調べることが重要です。OGPの重複は何かしらのトラブルを招く恐れがあります。

Chromeから各ページのソースを調べることができるので、OGPが設定されているかどうかチェックしておきましょう。

OGPが設定済みか調べる方法

step
1
記事ページで右クリック

まずは自身のWebサイトの記事ページを開いて「右クリック」→「ページのソースを表示」をクリック。

 

step
2
ソース内の単語を検索

下記のショートカットを打ち込むと、ブラウザー上部に検索欄が表示されます。

Mac:command+F

Win:Ctrl+F

検索欄に「og:」と打ち込んで検索。

OGPが設定済みか調べる方法

検索した単語がピックアップされます。「meta property="og:~」が表示されていれば、OGPが設定されています。

基本的には上記のようなコードがある場合、ご自身でOGPを設定する必要はありません

リッチピンの種類と設定に必要なOGP

リッチピンは、ピンタレストのビジネスアカウントで利用できるピンの一つ

ウェブサイト上にあるメタデータを読み込んで、タイトルや記事概要をピンに自動的に読み込ませるピンのこと言います。

リッチピンの種類

  1. 記事ピン
  2. レシピピン
  3. プロダクトピン

以上の3種類が現在日本で設定できるリッチピンです。

リッチピンについて詳しく知りたいという人は、Pinterest Japan 公式ブログよりチェックしてみてください。

記事ピンに必要なOGP設定

今回紹介する、記事ピン(Article Pins)について解説していきます。

記事ピンの設定には、5つのOGPが設定できます

記事ピンで設定できるOGP
og:type記事ページ|article
トップページ|blog
必須
og:title記事のタイトル必須
og:description記事の概要必須
og:site_nameサイト名任意
og:urlサイトURL任意

上記の5つの中で「og:type」「og:title」「og:description」を設定しなければ、記事ピンとして反映されません。

アフィンガーで正確なリッチピンを設定する方法

アフィンガーではTwitterとFacebookのOGPは設定されているものの、その他OGPタグは見当たりませんでした。

プラグインを使用してOGPの設定も検討しましたが、テーマとの相性が悪かったり知らず知らずにOGPが重複してしまうことがよくあります。

OGPの重複については、うれしデザインさんの記事がとても参考になるので一読しておきましょう!

この記事では、functions.phpにOGP設定のコードを記載して設定することにしました。

functions.phpをいじる際は、必ずバックアップを取ってからfunctions.phpを変更するようにしてください。

バックアッププラグイン 「BackWPup」を利用して、バックアップを取っておくようにしましょう。

BackWPUpで確実にWordPressのバックアップを取る方法|バズ部

functions.phpに各ページのOGP設定をする

アフィンガーから正確なリッチピンを設定する方法を紹介していきます。

設定する前のチェックポイント

  • ピンタレストのビジネスアカウントを取得
  • 自分のWebサイトがOGP設定済みか検索した
  • バックアップを取った
  • できる限り子テーマを利用してカスタマイズ

下記のコードを追加すればOGPの設定はできますが、必ずバックアップを取ってから作業してください。

functions.phpにOGP設定コード追加をする

今回、サルワカさんのプラグインを使わずにOGPを設定する方法のコードを参考に設定しています。

※今回作成したコードはサルワカさんより許可を得て掲載しています。

参考記事
【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法
【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法

WordPressでOGPタグとtwitterカードをまとめて設定する方法を紹介します。プラグインは不要。functions.phpにコードを貼り付けるだけでOKです。

続きを見る

step
1
ダッシュボードのテーマエディターを開く

functions.phpの内容を変更するため、「ワードプレス|ダッシュボード」→「外観」→「テーマエディター」を開きます。

 

step
2
functions.phpを選択

有効化しているテーマのfunctions.phpに追記していきます。

 

step
3
OGP設定のコードを入力

functions.phpの最下部に以下のコードを追加すれば、リッチピンに対応するOGPの設定は完了です。

 functions.php
//OGP
function my_meta_ogp() {
if( is_front_page() || is_home() || is_singular() ){
global $post;
$ogp_title = '';
$ogp_descr = '';
$insert = '';
 
if( is_singular() ) { //記事&固定ページ
setup_postdata($post);
$ogp_title = $post->post_title;
$ogp_descr = get_post_meta(get_the_ID(), 'st_description', true);
wp_reset_postdata();
} elseif ( is_front_page() || is_home() ) { //トップページ
$ogp_title = get_bloginfo('name');
$ogp_descr = get_bloginfo('description');
}
 
//og:type
$ogp_type = ( is_front_page() || is_home() ) ? 'website' : 'article';
 
//出力するOGPタグをまとめる
$insert .= '<meta property="og:title" content="'.esc_attr($ogp_title).'" />' . "\n";
$insert .= '<meta property="og:description" content="'.esc_attr($ogp_descr).'" />' . "\n";
$insert .= '<meta property="og:type" content="'.$ogp_type.'" />' . "\n";
$insert .= '<meta property="og:locale" content="ja_JP" />' . "\n";
 
echo $insert;
}
} //END my_meta_ogp
 
add_action('wp_head','my_meta_ogp');//headにOGPを出力

もし上記のコードをOGP設定がされていない他テーマで使用する場合は、カスタムフィールドの値を確認してください。

カスタムフィールドのクラス名を確認

 functions.php
$ogp_descr = get_post_meta(get_the_ID(), 'st_description', true);

以上の赤字部分は、アフィンガーのエディター下部にあるカスタムフィールドを読み込むようにしています

st_description部分にはメタディスクリプション部分の文面が自動で挿入されるので、各自カスタムフィールドに記載されているクラス名をコピペしてください。(アフィンガーを使用している人はそのままで大丈夫です。)

カスタムフィールドのクラス名が問題なければ、「ファイルを更新」でfunctions.phpの変更が完了です。

カスタムフィールドが見つからない場合は、エディター上部にある「表示オプション」→「カスタムフィールド」にチェックを入れてください。

他SNSの表示がおかしくないか確認する

念のため、FacebookとTwitterカードの表示がおかしくないか確認しておきましょう。

OGPコードを設定したらリッチピンの検証ツールでテストする

functions.phpに紹介したコードを追加したら、ピンタレストの検証ツールを利用してリッチピンの申請をします。

検証したい記事ページのURLを記入して「Vaildate」をクリック。

リッチピンに必要なOGPが設定できていれば上記の画像のように表示されます

下にスクロールすると記事のタイトルや記事の概要が表示されるので、正しく読み込まれていれば無事にリッチピンの設定は完了です。

検証ツールでエラーが出る場合

紹介しているコードを追加しても検証ツールでエラーが表示される場合は、記事ページのURLで検証してみてください。

記事ページのOGP設定だけでもリッチピンの設定はできるので、トップページのog:typeを「website」に設定してあります。

 html
//og:type
$ogp_type = ( is_front_page() || is_home() ) ? 'website' : 'article';

本当にどうしてもトップページも設定したい場合は、上記のコード部分の「website」を「blog」に変更してください。

内容に間違いがなければ「Fetch New Scrape Information」をクリックして、24時間以内に記事ピンとして反映されます。

もし24時間経っても反映されない場合は、ピンタレストのお問い合わせフォームから問い合わせてみてください。

Pinterest|お問い合わせ

リッチピンを設定してPinterestを楽しみましょう!

アフィンガーからリッチピン(記事ピン)を設定する方法を紹介しました。

OGP設定のチェックシート 

  • 自身のサイトを開いてソースページを開く
  • ソース内の「og:」で検索
  • 「meta property="og:~」の記載がない場合、OGPの設定をする
  • 「BackWPup」などでバックアップをとる
  • functions.phpの最下層にOGP設定コードを追加
  • リッチピンの検証ツールでテストと反映

以上が作業手順になります。

functions.phpを初めて変更する人にとっては少し不安かもしれませんが、丁寧に手順通りに作業すれば意外と簡単です。

ぜひアフィンガーを利用している人の中で、ピンタレストのリッチピンがうまく設定できないと悩んでいる人は参考にしてみてください。

  • この記事を書いた人

鳴神 優

ガジェットを中心に世界中の良いモノ善きコトを発信しています。 〝誰かのため〟に情報マガジン『USEFUL TIME』で記事を執筆中。

-ブログ
-,

© 2020 USEFUL TIME