みなさんこんにちは!おさかなです!
今回は「OGP確認」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・OGP画像の見え方・表示を確認したい方
・OGP画像シミュレーターを探している方
・SNSシェア時の表示を確認したい方
「OGP確認」って何?
「OGP確認」とは、(株)ラッコが運営する、OGP表示シミュレーターのことです。TwitterやLINEなどでサイトを共有した場合の、OGP画像の見え方・表示をチェックできます!(良いね👍)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/cb3bc7aaa482345b36b57bb74f929184.png)
OGPとは?
「Open Graph Protocol」の略。
「WEB制作.com」より引用
FacebookやTwitterなどのSNSでwebページやブログの記事がシェアされた時、またLINEなどのメッセージ機能でページのURLを送信した時に、そのページのタイトル、URL、概要、画像を表示させる仕組みのことです。
OGP画像とは、かんたんにまとめると「SNSで共有したときに出てくる画像」のことです!(なるほど!)
![](https://osakanav.com/wp-content/uploads/2022/05/webdesignclip-top-160x90.png)
実際に使ってみよう!
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck.png)
URLからチェック
URLからチェックする時は「入力ボックス」にサイトURLを入れればOKです!
こちらは、既にサイトがある方向け
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-box.png)
複数サイトをまとめてチェックしたい場合は、右下の「複数確認」を押せばOK!(おー!)
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-many.png)
1URLごとに「改行」して、区別します。
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-2.png)
(こんな感じ✨)
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-hukusuu.png)
入力が完了したら、「確定する」ボタンを押します。(ポチっと)
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-btn.png)
![](https://osakanav.com/wp-content/uploads/2019/12/19-12-05-13-53-05-126_deco-160x90.jpg)
画像からチェック
まだサイトのOGP画像を設定していない方は、「画像をアップして確認」することも可能です!
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-img.png)
画像選択は、ドラック&ドロップまたはクリックで出来ます。(よいしょ!)
推奨画像サイズは「横1200×縦630(比率1:0.525)」
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-imgclick.png)
ちなみに任意で「タイトル・ページ説明」の設定も可能です!(おお!)
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-text.png)
設定が完了したら、「タイトル、説明を反映する」ボタンをクリックします!(はい!)
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-btn1-1.png)
(こまめに水分補給💧)
表示チェック!
それでは「表示結果」を見ていきましょう!(おー!)
まずは「Facebook」で共有された場合。
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-facebook.png)
こちらは「Twitter」です!(良い感じ♪)
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-twitter.png)
こちらは「はてなブックマーク」
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-hatena.png)
最近では「LINE」で共有した場合も、OGP画像が表示されるようになりましたね〜✨
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-line.png)
画像チェックの場合はこんな感じ!
設定した「説明文」もきちんと反映されています。
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-text-kekka.png)
ちなみに説明文が空欄の場合でも、「ダミーテキスト」が入ります。(さすが👏)
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-kekka.png)
(このサムネイルシリーズお気に入り🌸)
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-img1.png)
複数同時にチェックした場合は、連続で表示されます。
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-3.png)
ちなみに、OGP画像が設定されていない場合は、赤字でお知らせしてくれます!(助かる〜)
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-no.png)
ツールのOGPは、ラッコくんでした!(かわいい🐟)
是非みなさんもSNSで共有された場合の、OGP表示をチェックしてみてください〜✨
![](https://osakanav.com/wp-content/uploads/2022/07/ogpcheck-rakko.png)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
O オー
G グッド
P プレジデント
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
誰のことだよ。笑
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2022/04/favicon-g-top-160x90.png)