ブログ運営

TwitterのOGP画像を綺麗に設定&確認する方法

 

こんにちはゆんです。

 

今回はOGP画像の設定方法についてまとめています。

 

こんな方におすすめの記事です

・OGPとは何か知りたい
・Twitterで綺麗にブログ画像を載せたい
・OGPの設定方法を知りたい

 

それではどうぞ!

 

OGP画像とは?

 

OGP画像とは、SNSでブログを紹介するときの下図のような画像のことです。

 

OGP Twitter 確認

 

ブログのトップページをTwitterで紹介したい場合、なるべく綺麗に収まるほうがいいですよね。

 

設定方法や確認方法をまとめておりますのでご一読ください。

 

OGP画像についてもう少し詳しい説明をしますが、すぐ設定を知りたい方は飛ばしてください。

 

OGP:Open Graph Protocol

Webページにそのページについての情報(メタ情報)をコンピュータで自動処理できる形で記述するためのデータ形式の一つ。

(引用:IT用語辞典 e-Words

 

こんな風に書かれてもプログラミング未経験の私にはよく分かりません。

 

色々調べてみたので要約すると、Googleなどの検索ツールで画像やURLを読み込めるようにするための記述方式、らしいです。

 

何か分かるような分からんような感じですね。

 

インターネットで画像とかの情報を表示させるコード、くらいに覚えておきましょう。

 

個別記事のURLをTwitterへ貼り付ける場合はそれぞれの記事のアイキャッチ画像が表示されます。

アイキャッチ画像も下記と同様のサイズにすればTwitterでも綺麗に表示されます。

しかしその場合、投稿記事に表示されるアイキャッチ画像そのもののサイズも変更されるのでご注意ください。

そのため、この記事ではトップページのOGP画像の設定方法のみをご紹介します。

 

Twitter向けにOGP画像を作成しよう!

 

まずは表示させたいロゴや画像を準備します。

 

jpgやpngのものなら何でもOKです。

 

サイズはおよそ「600×600」に収まるように設定しましょう。

 

OGP WordPress 設定

 

私も同じくらいのサイズで綺麗に表示させることができました。

 

これが実際に表示されているものです。

 

OGP Twitter 設定

 

うまく収まりました

 

この画像を使ってWordpressの設定を行います。

 

WordPressにOGP画像を設定する方法

 

JINテーマでの手順をご紹介します。

 

他のテーマでも同様の項目で変更可能ですが、項目名が少し異なると思います。

 

SNS設定やOGPという項目を探してください。

 

手順

ブログのトップページを開く

「カスタマイズ」をクリック

「SNS設定(OGP)」をクリック

画像変更

 

OGP WordPress 設定

 

Twitterで画像が適切に表示されるか確認する方法

 

Twitterを開いてツイートの画面でブログURLを貼り付けても前のデータの画像が表示されてしまうことが多いです。

 

そのため本当に設定できているのか分からない場合が多いです。

 

そんなときは下記のCard Validatorで確認しましょう。

 

手順

URLを開く

Card URLに確認したいURLを貼り付ける

Preview cardをクリック

右側に表示された画像を確認

 

OGP Twitter 確認

 

ズレていたり収まってない場合はサイズを微調整しながら保存して再度上記のCard Validatorで確認、を繰り返してください。

 

これでうまく表示されていれば、あとはTwitterでツイートする際にブログトップページのURLを貼るだけです!

 

あとがき

 

以上がOGP画像の設定と確認方法です。

 

ブログでお困りの方はこちらの記事もご覧ください。

 

有用性の低いコンテンツ対策!13回目でアドセンス合格した方法のアイキャッチ画像
有用性の低いコンテンツ対策!13回目でアドセンス合格した方法Google AdSenseに合格するまでに要した時間と行った全ての対策をまとめました。13回目の申請で合格になるまで、どんな対策に効果があるのか無いのか確認すべく、少しずつ修正を繰り返しました。なかなかアドセンス合格できない方がいらっしゃったらぜひ参考にしてください。...

 

pagespeed insights モバイルだけ遅い
PageSpeed Insightsのモバイルだけ遅い!対処法13選(17→73にアップ)今回はサイトの表示スピードが遅い場合の対処法をまとめています。ブログの表示速度を上げたい方、PageSpeed Insightsの数値がレッドゾーンの方、色々試したけど表示速度が改善しない方にとっておすすめの記事です。...

 

htaaccessのエラー対応
htaccess編集でWordPress404エラー!対処方法をご紹介今回はブログのサーバーに保存されている.htaccessというファイルを誤って編集してしまい、WordPressで404エラーが発生した時の対処法をまとめています。...

 

ではまた!

ABOUT ME
当ブログ管理者 ゆん
◇家族構成:奥さん、息子、わんこ ◇20代で関西から東海へ転職 ◇製造業の設計/営業/購買/現場監督などを経験 ◇20代製造業の転職ならお任せください ◇パパ目線の育児についても投稿しています