スポンサーリンク

STINGER・AFFINGERカスタマイズ

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

投稿日:2016年6月18日 更新日:



こちらのページ内でご紹介しているTwitterカード導入方法は、AFFINGER4でも応用できます。

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

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

ありがたい限りです。

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

あとですね・・。

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

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

default-user-image

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

スポンサーリンク

Twitterカードの申請方法

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

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

Summary Cardを表示させる場合

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

kanamii-1081-2

  1. テーマでのOGP設定とTwitterアカウント設定を行い、Twitterにログイン後、Card Validator|Twitter Developersにアクセスします。
    • 【STINGER PLUS・AFFINGER4 管理画面でのOGP設定】
      「fb:admins」:Facebookの個人アカウントページ→プロフィール画像をクリック→アドレスバーに表示される「&type」の直前の15桁の数字
      (AFFINGER4でAMP用の「Facebook App ID」を入力している場合は必要ありません。)
    • 「Twitterアカウント」:@で始まるユーザー名
  2. 「Card URL」に、ご自身のサイトのお好きな記事ページURLを入力して「Preview card」をクリック
  3. Twitterカードのプレビューが正常に表示されることを確認して完了です。

※OGP設定については、下記ページで詳しく説明しています。
特にAFFINGER4をお使いの方でOGP未設定の方はご一読ください。

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

Googleサイトとの連携が完了したら、次は『OGP設定』へと進みます。 OGP設定とは、テーマファイルの<head>内にOGP(Open Graph Protocol)で記述したメタ情報 ...

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

当ブログは、こちらの「Summary Card with Large Image」を使っています。
画像が大きめでFacebookの投稿表示に似ていますね。
AFFINGER4 は、デフォルトの状態でこちらのコードが組み込まれています。
逆にサムネイルが小さな「Summary Card」に変更されたい場合は、以下のカスタマイズを応用されてください。

kanamii-1081-3

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

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

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

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

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

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

こちらの記事内容とカスタマイズは、AFFINGER4でも応用できます。 OGP設定をしっかり行っているはずなのにTwitterカードが表示されない。 しばらく時間を置かないと表示されない。 問題点が見 ...

さらに、AFFINGER4のトップページのみTwitterカードが表示されない場合の対処法を追加更新しました。

4,397view
【AFFINGER4】トップページのTwitterカードに画像が表示されない場合の対処法

AFFINGER5「WING」をお使いの場合は、WordPressダッシュボード→AFFINGER5管理→SNS→OGP設定→「投稿・固定ページ以外のアイキャッチ画像(トップページ含む)」にて設定可能 ...

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

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

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

そして・・・

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

パソコンの「Ctrl」キー+「F」で表示される検索欄に、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】

OGP設定が完了したら、いよいよ設定関係の締めくくりとなる『SEO設定』へと進みます。 SEO設定とは、トップページと各投稿記事それぞれに、サイトやページ内容を検索エンジンに伝える下記のメタ情報の設定 ...

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カードの申請方法とサムネイルが正常に取得されずに「あの方」が出現してしまう原因と対処法でした。

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

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

Twitter で

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

スポンサーリンク

-STINGER・AFFINGERカスタマイズ

Copyright© Kanamii , 2024 All Rights Reserved Powered by AFFINGER5.