【OGP画像】の見え方・表示をチェックしよう!

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「OGP確認」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・OGP画像の見え方・表示を確認したい方
・OGP画像シミュレーターを探している方
・SNSシェア時の表示を確認したい方

「OGP確認」って何?

OGP確認」とは、(株)ラッコが運営する、OGP表示シミュレーターのことです。TwitterやLINEなどでサイトを共有した場合の、OGP画像の見え方・表示をチェックできます!(良いね👍)

https://rakko.tools/tools/9/

OGPとは?

「Open Graph Protocol」の略。
FacebookやTwitterなどのSNSでwebページやブログの記事がシェアされた時、またLINEなどのメッセージ機能でページのURLを送信した時に、そのページのタイトル、URL、概要、画像を表示させる仕組みのことです。

「WEB制作.com」より引用

OGP画像とは、かんたんにまとめると「SNSで共有したときに出てくる画像」のことです!(なるほど!)

【LPデザイン】まとめサイト【Web Design Clip】とは?
みなさんこんにちは!おさかなです!今回は「Web Design Clip」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・ランディングページを作成したい方・LPデザインの見本を探している方...

実際に使ってみよう!

それでは早速サイトにアクセスしましょう!

URLからチェック

URLからチェックする時は「入力ボックス」にサイトURLを入れればOKです!
こちらは、既にサイトがある方向け

複数サイトをまとめてチェックしたい場合は、右下の「複数確認」を押せばOK!(おー!)

1URLごとに「改行」して、区別します。

(こんな感じ✨)

入力が完了したら、「確定する」ボタンを押します。(ポチっと)

Web制作に関わるすべての人へ!おすすめのツール【CSS Peeper】
みなさんこんにちは!おさかなです! 今回は「CSS Peeper」について、書いていこうと思います! それでは、レッツゴー!!!!! 想定読者 ・Web制作に携わるデザイナー、エンジニアの方 ・配色などの、Webサイトの情...

画像からチェック

まだサイトのOGP画像を設定していない方は、「画像をアップして確認」することも可能です!

画像選択は、ドラック&ドロップまたはクリックで出来ます。(よいしょ!)
推奨画像サイズは「横1200×縦630(比率1:0.525)

ちなみに任意で「タイトル・ページ説明」の設定も可能です!(おお!)

設定が完了したら、「タイトル、説明を反映する」ボタンをクリックします!(はい!)

(こまめに水分補給💧)

表示チェック!

それでは「表示結果」を見ていきましょう!(おー!)
まずは「Facebook」で共有された場合。

こちらは「Twitter」です!(良い感じ♪)

こちらは「はてなブックマーク

最近では「LINE」で共有した場合も、OGP画像が表示されるようになりましたね〜✨

画像チェックの場合はこんな感じ!
設定した「説明文」もきちんと反映されています。

ちなみに説明文が空欄の場合でも、「ダミーテキスト」が入ります。(さすが👏)

(このサムネイルシリーズお気に入り🌸)

複数同時にチェックした場合は、連続で表示されます。

ちなみに、OGP画像が設定されていない場合は、赤字でお知らせしてくれます!(助かる〜)

ツールのOGPは、ラッコくんでした!(かわいい🐟)
是非みなさんもSNSで共有された場合の、OGP表示をチェックしてみてください〜✨

Amazon.co.jp: いちばんよくわかるWebデザインの基本きちんと入門[第2版] レイアウト/配色/写真/タイポグラフィ/最新テクニック eBook : 伊藤 庄平, 益子 貴寛, 宮田 優希, 伊藤 由暁, 久保 知己: 本
Amazon.co.jp: いちばんよくわかるWebデザインの基本きちんと入門[第2版] レイアウト/配色/写真/タイポグラフィ/最新テクニック eBook : 伊藤 庄平, 益子 貴寛, 宮田 優希, 伊藤 由暁, 久保 知己: 本
おさかな
おさかな

O オー
G グッド
P プレジデント

ナビまる
ナビまる

誰のことだよ。笑

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

【無料】ファビコン作成・生成ツール【favicon generator】とは?
みなさんこんにちは!おさかなです!今回は「favicon generator」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・ファビコンの作り方を知りたい方・ファビコン画像が必要な方・We...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。引っ越し以外の理由で3回も転校したのに、結局中卒。
現在はマイペースに「プログラム」書いたり、「作曲」したり「文章」書いたり色々してます。
SAOのユウキが好きです!

おさかなをフォローする

この記事は役に立ちましたか?

タイトルとURLをコピーしました