SNSでサイトを共有するとクリックしたくなるような画像がでてくるアレ

3126 ワード
Twitter OGP TwitterCards Twitter テキストリンク

なんのこと？？

コレです。
サイトの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で公開されているサイトに導入しました

おわり

コード例