はじめに
この記事はWebの基礎をおさらいカレンダー Advent Calendar 2022です。
このカレンダーでは、なんとなくわかった気になっている、Webの知識をおさらいするカレンダーです。
興味をもし持ってくださった方は、購読いただけると嬉しいです！
今回はOGPについて説明いたします！
OGPとは
Open Graph Protocolの略で、SNSでシェアした際に、Webページの詳細情報を伝えるためのHTMl要素のことです。
OGPを設定することで、リンクを共有した時にユーザーへの訴求が強くなります。
metaタグとして<head>要素の中に記載します。
共通用の設定を書いた後、SNSでの必要な設定を記載します。
記載方法
共通用の設定としてまず下記を記載します。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="og:url" content=" ページURL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページタイトル" />
<meta property="og:description" content=" ページ説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像のURL" />
- URLには絶対パスを記載する
- typeにはwebsiteもしくはarticleを入れます。
twitter用の設定
<meta name="twitter:card" content="Twitterカードの種類" />
<meta name="twitter:site" content="@から始まるTwitterID" />
<meta name="twitter:player" content="@から始まるTwitterID" />
カードの種類には"summary"、"summary_large_image"、"app"、"player"のどれかを入れます。
おわりに
以上、OGPについての説明でした！
Webの基礎をおさらいカレンダー Advent Calendar 2022でした。
興味をもし持ってくださった方は、購読いただけると嬉しいです！