ブログ

Twitterカード画像が表示されない時の5つの策【Cocoon】


✔皆さんの悩み・疑問点

・ブログ投稿記事リンクを
 ツイッターに貼ったけど、
 カードに画像がでてこない。

・WordPressコクーンの
 テーマを使用している。

 

↑こんな悩み・疑問点にお応えします。↑

 

✔本記事の内容

・Twitterカード画像が
 表示されない時の解決策5つ

 

ツイッターにブログ記事を投稿をする時に、「Twitter カード」に画像がちゃんと表示されない時、ありませんか?(下記のような感じ)

 

クリックしたら、記事には飛べるのに、画像だけちゃんと表示されないようです。
そんな時、すぐに画像を表示できるようにしたいですよねー。

 

ぼくも同じ問題が発生して、いろんな方法を試して、半日かけてようやく修正することができました。
でも、半日かけると、すごい疲れるし、ストレスになります。

 

ぼく自身もめちゃくちゃ困ったのことなので、早く解決できるよう解決策をまとめました。

 

同じように困っている方は、ぜひご覧ください。
※今回は、Word Pressの「コクーン」をテーマにしている方を対象にしてます。

 

今回のご紹介の解決策実践後、下記の通り、画像を表示することができました。

 

■Twitterカード画像が表示されない時の5つ策【Cocoon】

 

ブログ記事を投稿をする時に、「Twitter カード」の画像を出すには、次の5つを試してみてください。

 

 

①「Card validator」をブックマーク

②「All in One SEO Pack」
 を導入、設定

③「Cocoon 設定」を調整

④「投稿記事画面」の設定

⑤「Google Search Console」で
 記事のインデックス登録

 

 

①「Card validator」をブックマーク

 

まずは、「Card validator」にログインしましょう。
ブックマークもしておきましょう。

 

ここで、「Twitter カード」がちゃんと表示されるか確認です。

 

今回は、画像が表示されないということで、それを1つ1つ解決していきましょう。

②「All in One SEO Pack」を導入、設定

 

もう入れているかもしれませんが、プラグイン「All in One SEO Pack」を導入。

 

そしたら、下記の要項が入力されているかチェック。

 

①【ソーシャルメディア】を選択

②【ホームページ設定】
「サイト名」「ホームタイトル」
「ホームのディスクリプション」
⇒Twitter カードに表示させたい情報を入れる

③「ホーム画像」
⇒Twitter カードに表示させたい画像を選択

④【画像設定】
「OG:Image ソースを選択」
⇒《アイキャッチ画像》を選択

⑤【Twitter 設定】
「デフォルト Twitter カード」
⇒《要約の大きい画像》を選択

「Twitter サイト」
⇒《Twitter ユーザー名》を入力

「Twitter 投稿者を表示」
⇒《✔》を入力

「Twitter ドメイン」
⇒《自身のブログのドメイン》を入力
※(https://は除く)

 

 

③「Cocoon 設定」を調整

 

次に「Cocoon設定」です。

 

①【OGP】タブの【OGP設定】
「OGPの有効化」
⇒《OGPタグの挿入》に「✔」入れる

 

②【OGP】タブの【OGP設定】
「Twitterカードの有効化」
⇒《Twitterカードタグの挿入》に
「✔」入れる
「Twitterカードタイプ」
⇒《大きな画像のサマリー》を選択

 

 

 

④「投稿記事画面」の設定

 

次に記事の「投稿」画面の設定です。

 

① 記事の投稿画面の右サイドバーにある
「アイキャッチ画像」に、今回の
「Twitter カード」に表示させたい画像を設定。

② 投稿画面の下にある
【All in One SEO Pack】
の「画像」を上記①と同じ画像を選択

③【All in One SEO Pack】の
「Twitter カードタイプ」
⇒《要約の大きい画像》を選択全部終わったら、
投稿画面右上の「更新」をクリック。

 

 

⑤「Google Search Console」で記事のインデックス登録

 

最後に「Google Search Console」
で記事を再度インデックス登録。

 

①「トップの検索バー」に
 今回設定した記事のURLを入力

②「インデックス登録をリクエスト」をクリック。
 数分待って、完了。

 

 

最後に、「Card validator」で、
今回の記事のURLを入力してみましょう。

1回目の表示では、反映されないかもしれないので、
数分間クリックを繰り返すと、

 

ようやく、画像がでるようになりました。

 

■それでも画像が表示されなければ、、

 

それでも、「画像がでない、、」という方は、
下記の方法も試してみてください。

 

【All in One SEO Pack】
〈機能管理〉の
「Robots.txt」
「悪意あるボットのブロッカー」
⇒両方《Deactivate》に。

 

 

 


というわけで、以上です。

 

いろんな手を尽くしても、出ない時のストレスは、ハンパないと思います。
早く全部を犠牲にして、放り出したくなると思います。

 

それでも、解決したときの解放感は、気持ちいいものです。
トライ&エラーを繰り返して、粘り強く取り組むことが、大事です。

 

PVアクセスランキング にほんブログ村

-ブログ
-