【htmlコーディング】ogタグは結局どうすればいい？最低限のタグにして無駄なくコーディングしよう！

今回は、ogタグについて解説します。
ogタグはいくつも種類があり、その中でも必ず必要なタグと、省略できるタグがあり、混乱しがちです。
必要最低限のタグを、経験をもとにご紹介します。

ogタグとは？

まず、ogタグについて簡単に解説します。
ogタグとは、snsなどでページのURLをシェアした際に表示されるサムネイル画像やタイトルなどの文言を指定することができるタグです。

「og:title」「og:description」などがあり、htmlのheadタグに記述します。

昨今、ページをシェアするのは誰でも行うので、ogタグの記述は必須になります。

必要最低限のogタグ

では早速、必要最低限のogタグをご紹介します。

<meta property="og:type" content="website">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページのディスクリプション">
<meta property="og:url" content="ページのURL（絶対パス）">
<meta property="og:image" content="ogp画像の絶対パス">
<meta property="og:site_name" content="サイトの名前">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Twitterアカウント名">

順番に解説します。

og:type

og:typeは、そのページがトップページなのか、下層ページなのか、何のページなのかを指定します。
トップページの場合はwebsite、下層ページの場合は、articleを記述します。

og:title

シェアされた際に表示されるページのタイトルを記述します。
大抵、通常のtitleタグと同じものが入ります。

og:description

シェアされた際に表示されるページのディスクリプションを記述します。
ディスクリプションは、google検索した際に表示される、少し長い説明文にあたるところです。
こちらもog:titleタグ同様、通常のdescriptionタグと同じものが入ります。

og:url

ページのURLを記述します。
違うURLを記述してしまうと、その間違ったページの情報をシェアすることになってしまうので、注意が必要です。

og:image

シェアされた際に表示されるサムネイル画像を指定します。
省略した場合、ページ内の画像が勝手にシェアされてしまうので、必ずシェア用の画像作成して指定するようにしましょう。

og:site_name

Webサイト自体の名前を記述します。
なので、全ページ同じ記述になります。

twitter:card

twitter:cardは、Twitterでシェアされた際に、画像のサイズを指定することができます。
いくつかありますが、summary_large_imageがおすすめです。
Facebookでシェアされたときとほとんど同じサイズで、よく見るのがこのサイズになります。

twitter:site

twitter:siteにTwitterのアカウント名を記述します。
WebサイトにTwitterは必須と言えるほど大事なので、Twitterアカウントがない場合は作成しましょう。

その他のogタグ

「fb:app_id」や、「og:locale」などもありますが、省略可能です。
「fb:app_id」は必須項目と言われているのですが、特に影響ありません。

「twitter:title」や「twitter:description」も、ogタグの方を読み込んでくれるので、わざわざ記述する必要はありません。

最後に

以上、ogタグについて解説しました。

ogタグは種類が多く、記事もたくさんあるので混乱しがちです。
どれも間違いではないのですが、必要最低限のタグを覚え、毎回迷わないようしましょう。