Kanamii

伝えたい想いを自分らしく・・・

kanamii-1081-1

スポンサーリンク

STINGERカスタマイズ

【WordPress】STINGER PLUS+ 「Twitterカード」導入方法とサムネイルが正常に表示されない原因と対処法は?

2016/10/27

最近は、Twitterでの更新情報に「Twitterカード」を導入しているサイトが増えて、タイムラインが華やかになりましたね。

私が使用している無料WordPressテーマ「STINGER PLUS+」は、OGP設定とセットでTwitterカード導入に必要なコードが組み込まれているので、びっくりするほど簡単にカードを表示することができます。

ありがたい限りです。

ここでは、STINGER PLUS+ にTwitterカードを導入する方法(申請方法)を、2種類のカードを例にご紹介します。

あとですね・・。

ページ後半では、私の友人が遭遇した、Twitterカードにサムネイルが正常に取得されない問題。
この方↓が表示されてしまう原因についてもご説明します。

大きく表示すると・・「怖っ!」

default-user-image

原因を調べたいのに、この方のことをなんと検索したらいいのか迷いました。
「プロフィールのデフォルトの人?」「デフォルトの影の人?」「ゆきだるまっぽい人」とか・・?(笑)

スポンサーリンク

Twitterカードの申請方法

STINGER PLUS+ または、OGP設定とTwitterカードに対応しているテーマをお使いの場合は、テーマファイルへのメタタグの設置等、難しい手順は必要ありません。

以下、2種類のTwitterカードでの申請方法を説明していきます。

Summary Cardを表示させる場合

あらかじめテーマファイルに組み込まれているコードは、こちらの「Summary Card」ですので、申請方法はとても簡単です。

kanamii-1081-2

  1. テーマでのOGP設定とTwitterアカウント設定を行い、Twitterにログイン後、Card Validator|Twitter Developersにアクセスします。
    • 【STINGERでのOGP設定】
      「fb:admins」:Facebookの個人アカウントページ→プロフィール画像をクリック→アドレスバーに表示される「&type」の直前の15桁の数字
    • 「Twitterアカウント」:@で始まるユーザー名
  2. 「Card URL」に、ご自身のサイトのお好きな記事ページURLを入力して「Preview card」をクリック
  3. Twitterカードのプレビューが表示され、「Preview card」ボタンの下に、「(ご自身のサイトのドメイン) is whitelisted for summary card」、日本語訳の場合は「(ご自身のサイトのドメイン)はsummaryカードのホワイトリストに登録されています」というメッセージが表示されますので、これで完了です。

※OGP設定については、下記ページで詳しく説明しています。

OGP設定とは?OGP設定の重要性と設定方法 - ゼロからのWordPress入門【10】

Summary Card with Large Imageを表示させる場合

当ブログは、こちらの「Summary Card with Large Image」を使っています。
画像が大きめでFacebookの投稿表示に似ていますね。

kanamii-1081-3

全てのテーマファイルの編集は「子テーマ」で行うことをおすすめします。
親テーマを編集される際には必ずバックアップをとり、テーマの取り扱いには十分ご注意ください。
▶子テーマについて
  1. WordPressダッシュボード→外観→テーマ→テーマの編集→「st-ogp.php」を開きます。
  2. パソコンの「Ctrl」キー+「F」で表示される検索欄に<meta name="twitter:card" content="summary">と入力してマークされる部分を下記のように修正します。

  3. その後の手順は、先に説明した「Summary Card」と同じです。

※Twitterでの過去の投稿への反映には時間がかかりますが、上記の作業を他のページのURLでも行うことでキャッシュがクリアされ、設定がすぐに反映されます。確認の際にはF5キーにてTwitterを再読み込みしてみてください。

Twitterカードが表示されない・タイムラグがある・エラーが出る場合は?

STINGER PLUS+ でOGP設定を行った場合、記事文頭に画像を挿入するとエラーになる場合があります。
アイキャッチ画像を記事文頭に移動する方法も含めて、下記ページで詳しく説明しています。

Twitterカードが表示されない・タイムラグがある・修正後もエラーが出る場合の確認ポイントと対処法

Twitterカードのサムネイルにデフォルトユーザーイメージが表示される原因は?

さて。あの方の問題です。(画像は怖いので出しません。)

私の場合、知識が薄いのでパッと見て「あれだね!」とか全然わからないので、「Twitterカード 画像 サムネイル」+「取得されない」+「プロフィールのデフォルトの人」「デフォルトの影の人」「ゆきだるまっぽい人」など(笑)、思いつくキーワードで情報を得られなかった場合は、とりあえずページ上で右クリック→「ページのソースを表示」で確認してみる習慣があります。

そして・・・

「わかりましたよ!奥さんっ!」

パソコンの「Ctrl」キー+「F」で表示される検索欄に、wp-content/plugins/all-in-one-seo-pack/images/default-user-image.pngをコピーペーストしてみてください。
該当箇所があれば、WordPressプラグイン「All in One SEO Pack」が原因です。
あの方の名前は「デフォルトユーザーイメージさん」だということもわかりました。

対処方法は2通りです。

All in One SEO Packを停止する

あの方の出現は、「STINGER PLUS+」の他「Simplicity」をお使いのサイトにも見受けられました。
どちらのテーマも標準でOGP設定の機能がついていますので、特にこだわりがなければプラグインは停止してもよさそうです。

その場合は、お使いのテーマの、OGP設定、Googleアナリティクスコードの設置、Googleサーチコンソール認証用タグの入力(アナリティクスコードでサイト所有権確認済みの場合STINGERでは不要)、トップページのtitleタグ・メタディスクリプション・メタキーワードの設定等を忘れずに行うようにしてください。

SEO設定については、下記ページで詳しく説明しています。

SEO設定とは?トップページと投稿記事ページでのSEO設定方法 - ゼロからのWordPress入門【11】

All in One SEO Packの設定を見直す

プラグインを使ってより細かい設定を行いたい方は、重複を避けるためテーマ側でのOGP設定を停止して、All in One SEO Packの設定を見直してみてください。
WordPressダッシュボード→All in One SEO→「機能管理」をクリック。
下記の「ソーシャルメディア」の項目をクリック。

kanamii-1081-4

機能管理の上に追加される「ソーシャルメディア」をクリック。
Select OG:Image Sourceを「アイキャッチ画像」に変更するとOK・・かと思います。
その他の設定項目については、経験がありませんので割愛させていただきます。

kanamii-1081-5

・・今までこんな設定画面開いたことなかった・・

まとめ

いつの時代からか、All in One SEO PackでOGP設定などができるようになったんですね。
・・最初っからだったりして?!

なにはともあれ、勉強の機会を与えてくれた友人に感謝です。

また、STINGER PLUS+ とのご縁があったお陰で、難しそうで自分には無理だと思っていたTwitterカードが、驚くほど簡単に導入できたことをとても嬉しく思います。

以上、Twitterカードの申請方法とサムネイルが正常に取得されずに「あの方」が出現してしまう原因と対処法でした。

最後までお付き合い下さりありがとうございます。

▶STINGER PLUS+ カスタマイズ全記事一覧へ

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGERカスタマイズ