OGP
Open Graph Protocol
SNSでシェアしたときに良い感じに画像とか文言とかを表示するやつ
確認するツール
見た目をチェックするやつ
画像サイズチェッカー
FacebookとTwitterの表示を確認できるやつ
動かないので消した
サービスごと
TwitterとFacbookで異なる画像を表示するとかはできる
#??まとまってる
メジャーなサービスに適合するように画像を作るのが良い
各ページごとにmetadataを指定する必要がある
og:title
Twitterの場合は必須
og:type
article とか website とか profile とか書いているけど、これは例？
それともこれらの中から選ばないといけない？
なんのためにある？
og:image
og:url
og:description
例
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を入力">
OGPはseoには影響しない
動的にせいせい
SSRで自動生成
githubのOGPの実装紹介