こんにちはゆんです。
・OGPとは何か知りたい
・Twitterで綺麗にブログ画像を載せたい
・OGPの設定方法を知りたい
それではどうぞ！
OGP画像とは？
OGP画像とは、SNSでブログを紹介するときの下図のような画像のことです。
ブログのトップページをTwitterで紹介したい場合、なるべく綺麗に収まるほうがいいですよね。
設定方法や確認方法をまとめておりますのでご一読ください。
OGP画像についてもう少し詳しい説明をしますが、すぐ設定を知りたい方は飛ばしてください。
OGP：Open Graph Protocol
Webページにそのページについての情報（メタ情報）をコンピュータで自動処理できる形で記述するためのデータ形式の一つ。
（引用：IT用語辞典 e-Words）
色々調べてみたので要約すると、Googleなどの検索ツールで画像やURLを読み込めるようにするための記述方式、らしいです。
何か分かるような分からんような感じですね。
インターネットで画像とかの情報を表示させるコード、くらいに覚えておきましょう。
個別記事のURLをTwitterへ貼り付ける場合はそれぞれの記事のアイキャッチ画像が表示されます。
アイキャッチ画像も下記と同様のサイズにすればTwitterでも綺麗に表示されます。
しかしその場合、投稿記事に表示されるアイキャッチ画像そのもののサイズも変更されるのでご注意ください。
そのため、この記事ではトップページのOGP画像の設定方法のみをご紹介します。
Twitter向けにOGP画像を作成しよう！
まずは表示させたいロゴや画像を準備します。
jpgやpngのものなら何でもOKです。
サイズはおよそ「600×600」に収まるように設定しましょう。
私も同じくらいのサイズで綺麗に表示させることができました。
これが実際に表示されているものです。
この画像を使ってWordpressの設定を行います。
WordPressにOGP画像を設定する方法
JINテーマでの手順をご紹介します。
他のテーマでも同様の項目で変更可能ですが、項目名が少し異なると思います。
SNS設定やOGPという項目を探してください。
↓
「カスタマイズ」をクリック
↓
「SNS設定（OGP）」をクリック
↓
画像変更
Twitterで画像が適切に表示されるか確認する方法
Twitterを開いてツイートの画面でブログURLを貼り付けても前のデータの画像が表示されてしまうことが多いです。
そのため本当に設定できているのか分からない場合が多いです。
そんなときは下記のCard Validatorで確認しましょう。
ズレていたり収まってない場合はサイズを微調整しながら保存して再度上記のCard Validatorで確認、を繰り返してください。
これでうまく表示されていれば、あとはTwitterでツイートする際にブログトップページのURLを貼るだけです！
あとがき
以上がOGP画像の設定と確認方法です。
ブログでお困りの方はこちらの記事もご覧ください。
ではまた！
にほんブログ村