はじめに
皆さん、誰かにリンクを送ったことありますよね？
そのときに多分下のようなサイトのプレビューが出てくると思います
でも、自作のサイトのリンクだと表示されない
ということで、今回はこのプレビューの作り方を紹介しようと思います
これがあるだけでサイトの完成度が高く見えるのでオススメです！
作り方
プレビューは OGP (Open Graph Protocol) を使います。この記事では書き方だけ紹介するので、詳しくは以下の記事とかを参考にすると良いと思います。
(適当に選んだサイトなので、他にもっと良いサイトがあるかもしれないです)
書き方
以下がサンプルコードです。これを head タグに書くだけで作れます。
↑ めっちゃ簡単！
<meta property="og:title" content="Sample OGP" />
<meta property="og:description" content="OGPを紹介するためのサンプルサイト" />
<meta property="og:image" content="https://sample.com/img/preview.png" />
<meta property="og:url" content="https://sample.com" />
<meta property="og:type" content="website" />
それぞれ簡単に説明すると
| 1 | 2 |
|---|---|
og:title |
サイトのタイトル |
og:description |
サイトの説明 |
og:image |
サイトのサムネ画像 |
og:url |
サイトのリンク |
og:type |
サイトのタイプ (デフォルトはwebsite) |
og:type については以下のサイトを参照するのが良さそう
一部のサービスには専用の設定があるようで...
例えば、X (Twitter) には専用の書き方があるみたいです。
(まだ使ったことない)
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="タイトル">
<meta name="twitter:description" content="説明">
<meta name="twitter:image" content="https://example.com/image.png">
twitter:card には以下のようなものがあるらしいです。
| 1 | 2 |
|---|---|
summary |
小さいカード |
summary_large_image |
大画像 |
player |
動画埋め込み |
app |
アプリ紹介 |
詳しくは以下の記事を参考にすると良いかも
おわりに
私自身、あまり使ったことがないので詳しいことが書けず、ほとんど他の方の記事に頼ってしまってすみません...
今後、もっと活用して完成度の高いサイトを作っていきたいなと思っています