なんのこと？？
コレです。
サイトのURLを共有したとき、クリックしたくなるような画像が貼られているコレです。
(この記事読むより実際にコード見た方が早いかもしれない。。)
背景
- 記事をSNSで共有した
- 冗長なURLの文字列情報だけ並んでいるものと、画像付のものがあることに気が付いた
- なんでだ？ 調べる => OGPという存在を知った
- 当たり前にSNSライフに溶け込んでいたので意識すらしていなかった技術
OGP : 上の画像の様に、SNS共有の見栄えを良くするもの
やること
- 画像の用意
- metaタグの挿入
- 動作確認(今回はTwitterのみ)
画像の用意
とりあえずはなんでも良いです
サイズ等はアイキャッチ画像が表示ができてからにしましょう
パス指定では画像を表示できないので、ネット上に置いておかなければいけません
それを参照するようにして表示します
今回はGitHub上に置いてあるものを参照しています
このサイトのを使っても良いかも
metaタグの挿入
HTMLのheadタグの中に下記のコードを追加します
表示される情報を書きます。
<head>
...
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Twitter Card Test" />
<meta name="twitter:description" content="タイトルの下に出てくる文章" />
<meta name="twitter:image" content="https://raw.githubusercontent.com/taiga248/TwitterCard/master/img/knowder.png" />
...
</head>
１つ目のmetaタグは表示される画像の大きさを指定します。
- summary
- summary_large_image
- app
- player
と言った種類がある。
動作確認
このサイトでURLを入力すると、どのように表示されるかを確認できます
localhostでは確認できないのでサイトが公開されている必要アリ(多分)
公開していない場合はngrokでトンネリングして確認するといけるかも
今回はGitHubPagesで公開されているサイトに導入しました