OGP
Open Graph Protocol
SNSでシェアしたときに良い感じに画像とか文言とかを表示するやつ
website
確認するツール
OGP確認 ラッコツールズ🔧
見た目をチェックするやつ
TDK Meta Checker
https://saruwakakun.com/it/seo/eyecatch
画像サイズチェッカー
Localhost OGPチェッカー
FacebookとTwitterの表示を確認できるやつ
動かないので消した
https://ogimage.tsmallfield.com/
サービスごと
FacebookのOGP
TwitterのOGP
TwitterとFacbookで異なる画像を表示するとかはできる #??
https://gotohayato.com/content/500/
まとまってる
https://www.asobou.co.jp/blog/web/ogp
メジャーなサービスに適合するように画像を作るのが良い
各ページごとにmetadataを指定する必要がある
og:title
Twitterの場合は必須
og:type
docs
articleとかwebsiteとかprofileとか書いているけど、これは例？
それともこれらの中から選ばないといけない？
#??
なんのためにある？
異なるものを指定したらどうなる #??
og:image
og:url
og:description
例
code:example.html
<meta property="og:url" content="ページのURL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページのタイプ">
<meta property="og:description" content="記事の抜粋" />
<meta property="og:image" content="画像のURL" />
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@Twitterユーザー名" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="appIDを入力">
https://saruwakakun.com/html-css/wordpress/ogp
https://saruwakakun.com/html-css/reference/twitter-card
OGPはseoには影響しない
https://www.suzukikenichi.com/blog/google-does-not-use-og-in-web-search-but-does-in-googe-plus/
https://techlife.cookpad.com/entry/dynamic-og-image
動的にせいせい　
SSRで自動生成
https://youtu.be/mbtDV5EkSAI?t=1816
https://github.blog/2021-06-22-framework-building-open-graph-images/
githubのOGPの実装紹介
https://developers.google.com/web/fundamentals/discovery/social-discovery?hl=ja