こんにちは♪kenchicoです(*´ω`*)
わたしは、WordpressのCocoonでブログを書いています♪
ツイッターでブログのお知らせをしたい!
と、ツイッターでブログのトップページのURLを張り付けると、
デフォルト(初期状態)のままになっていました。
![悩むkenchico](https://kenchico.com/wp-content/uploads/2021/07/8bb6f53bb1f8196886f1eb519b94d275.png)
せっかくホーム画像変えたのに、変わってないよ~。
これを自分のトップページ同様の画像にするにはどうしたらいいのか?
調べて出来るようになったので、
CocoonでTwitter上でのホームイメージ画像の変更方法を説明いたします♪
![](https://kenchico.com/wp-content/uploads/2021/07/8bf15e0b31403054fe8391658cc0deed-800x400.gif)
【Cocoon】でTwitterカードを設定する
ツイッターでブログのトップページのURLを張り付けた時に、どのように表示されますか?
自分のブログへのリンク情報を自分の指定した画像付きで表示してみましょう♪
![kenchico](https://kenchico.com/wp-content/uploads/2021/07/cropped-86aeba5d272a041eca2e3fdf92400367.png)
Twitterカードとは
![](https://kenchico.com/wp-content/uploads/2021/07/734df9b508f8138ac00afdc85058c9f4.png)
Twitterカードとは、リンク情報を画像付きにする機能の事です。
画像付きにすることで、見やすく、魅力的なリンク情報になります。
Twitterカードには、ブログの記事や、リンク情報、アイキャッチ画像やタイトル、説明文を表示できます。
WordPressでは、トップページをリンクする(ページのURLを張り付ける)と設定した画像、
記事をリンクすると「アイキャッチ画像」と「記事のタイトル」が表示されるようになります。
Twitterカードの設定は、Cocoon設定のOGPで行います。
OGPとは
Cocoon設定の中に、「OGP」という項目があるのですが、
「OGP」とは一体何でしょう?
「OGP」とは、「Open Graph Protocol」の略で、TwitterなどのSNS上でシェアされた時に、ページのタイトル・URL・概要・画像(サムネイル)を伝えるためのタグ情報です。
![悩むkenchico](https://kenchico.com/wp-content/uploads/2021/07/8bb6f53bb1f8196886f1eb519b94d275.png)
横文字省略が多くて覚えるの大変だな~。
![むすこくん](https://kenchico.com/wp-content/uploads/2021/07/e075db8013d866ec55c419b4e0c881d3.png)
「プロトコル」とは、
「コンピューター同士の通信をする際の手順や規格のこと」なんだって!
![kenchico](https://kenchico.com/wp-content/uploads/2021/07/86aeba5d272a041eca2e3fdf92400367.png)
意味がわかるとちょっと覚えやすいね♪
OGPが設定されていると、SNS上でページのタイトルやURL、画像情報がユーザーの目にとまりやすくなります。
それに伴い、アクセス数の向上が期待できます。
WordPressの管理画面、Cocoon設定でOGPを変更する
WordPress管理画面でCocoon設定をクリックして、中の「OGP」タブをクリックします。
「OGPタグの挿入」にチェックがはいっているか確認してください。
![](https://kenchico.com/wp-content/uploads/2021/07/e41ab95faba5f4f480c1e1dd34452c02-1-800x422.png)
次に、Twitterカードの有効化の「Twitterカードタブの挿入」にチェックが入っているか確認してください。
![](https://kenchico.com/wp-content/uploads/2021/07/528c2e5b3c3f52125e1dc39efb70c365-800x432.png)
画像が大きいものを選ぶ際は、「大きな画像のサマリー」を選択してください。
下の方にスクロールすると、「ホームイメージ」の項目があります。
はじめはデフォルトの表示画像になっています。
![](https://kenchico.com/wp-content/uploads/2021/07/cc95fe05e4a1d1c44acdaed5cf7cf598-1-800x530.png)
画像のアップロードの選択の部分をクリックします。
次の画面で、画像を選択してください。
![](https://kenchico.com/wp-content/uploads/2021/07/80b06729af401dff98e211d96e637825-800x508.png)
画像を選ぶと、右下に「画像の選択」というところがあるのでそこをクリックします。
![](https://kenchico.com/wp-content/uploads/2021/08/rect3177-800x382.png)
すると、ホームイメージが変更出来ています。
![](https://kenchico.com/wp-content/uploads/2021/08/c45c03e5a9c86d5c88419190eac920ec-800x568.png)
画像を確認して、左下の「変更をまとめて保存」をクリックします。
これでcocoon側は完了です。
これだけでは、Twitter上でのホームイメージ画像は変わりません。
次にTwitter側の設定をします。
Twitterの「カード検証ツール」にて確認
Cocoon側での設定が終わりましたら、Twitter側での設定です。
すぐに完了しますよ!
![](https://kenchico.com/wp-content/uploads/2021/08/b4411f5bc5758d0f1bc423f867beeb4a-500x427.png)
ホームイメージ画像の確認
最後に、Twitter公式ディベロッパーのカード検証ツールにアクセスします。
ここで、確認したいページのURLを入力します。
![](https://kenchico.com/wp-content/uploads/2021/07/125215212a5bfc22679a0257916d47d0-800x433.png)
今回私は、ホームイメージを変更したかったので、トップページのURLを入力します。
すると変更した画面になっています。
これで完了です♪
※Twitterへの変更が何分か時間がかかる場合があるようです。
少し時間を置いてから確認してみてください。
(私は、変更になってない!と何度かやり直したので、さらにラグ時間が増えて、時間がかかってしまいました( ̄∇ ̄;)ハハハ)
焦りは禁物ですね♪
![kenchico](https://kenchico.com/wp-content/uploads/2021/07/cropped-86aeba5d272a041eca2e3fdf92400367.png)
cocoonでカラムを2列や3列に設定したい?そんなときにはこちらをご覧ください。
人気ブログランキング
![ブログランキング・にほんブログ村へ](https://b.blogmura.com/88_31.gif)
![PVアクセスランキング にほんブログ村](https://blogparts.blogmura.com/parts_image/user/pv11115976.gif)
![](https://www10.a8.net/0.gif?a8mat=3HC21T+BXUZJM+50+2HQGAP)
コメント