STINGER PLUS+でFacebook OGPに任意の画像を設定する

FacebookのOGPを設定したとき、開発者向けツールのシェアリングデバッガーでどのように表示されるか確認しますよね。

「STINGER PLUS+」を使っていると「画像が小さすぎます」というエラーが出ることがあります。このエラーであればOGP画像が「NO IMAGE」と書かれた小さな正方形のサムネイルになるだけで、シェア自体の挙動には問題ありません。

しかしエラーがあるのは気持ち悪いし、サイトロゴが入った任意の大きな画像で表示したいと思うのは私だけではないはず。

そこで今回は上のような表示を最終目標に設定します。ちなみにアイキャッチがない投稿のOGP画像も同じものになります。

デフォルトではどうなっているか

まず、私がこのエラーに遭ったのは以下のような環境です。

親テーマは「STINGER PLUS+」
ヘッダー画像は使用しない
サイトロゴはテーマカスタマイザーではなく子テーマのheader.phpで<img>出力

文字が潰れてますがエラーメッセージは以下。

Provided og:image URL, http://（中略）/no-img.png was not valid because it did not meet the minimum size constraint of 200px by 200px.

要約すると「設定されている no-img.png が縦横200px以上の基準を満たしていなかったため、OGP画像にできませんでした」という意味。

当時、当ブログのトップページではこの基準を満たすのがフッターのプロフィール画像だけだったので、自動的にOGP画像として表示されることになります。

エラーを修正する手順

表示させる画像を作成する

エラーメッセージの最小サイズは縦横200pxですが、Facebookが推奨しているサイズは最小サイズが600x315px、最適サイズは1200x630px以上です。いずれにせよクリッピングを防ぐため1.91:1の比率がベターです。

子テーマ内にimagesディレクトリを作り、作成した画像はその中にアップロードします。ファイル名は私の場合、親テーマに準拠しno-img.pngとしています。

子テーマの st-ogp.php を修正する

親テーマのst-ogp.phpを子テーマのディレクトリにコピーし、そちらを編集します。

if (is_single() or is_page()){//投稿記事か固定ページ
    if (has_post_thumbnail()){//アイキャッチがある場合
        $image_id = get_post_thumbnail_id();
        $image = wp_get_attachment_image_src($image_id, 'full');
        echo '';echo "\n";
    } elseif( preg_match( '//i', $post->post_content, $imgurl ) && !is_archive()) {//アイキャッチ以外の画像がある場合
        echo '';echo "\n";
    } else {//画像が1つも無い場合
        echo '';echo "\n";
    }
} else { //ホーム・カテゴリーページなど
    if( get_header_image( ) ){
        echo '';echo "\n";
    } else {
        echo '';echo "\n";
    }
}

9, 15行目が修正した部分。

元は親テーマのパスを出力する関数get_template_directory_uriになっているので、ここを子テーマのパスを出力するget_stylesheet_directory_uriに変更しています。

関数リファレンス/get stylesheet directory uri – WordPress Codex 日本語版

また、no-img.png以外のファイル名にした場合や、images以外のディレクトリ名にした場合は適宜修正してください。

スマホからガラケーに戻る人が多いなんて一時期いろいろなところで見ましたが、私の周囲じゃそんな人はいませんしアナリティクスを見てもモバイルでの閲覧が多いです。画像の訴求力は文字の比ではないので、ぜひ活用していきたいですね。