OGP

OGP（Open Graph Protocol）は、Facebookが提唱するWebページのメタデータの一種です。SNSに投稿された際に表示されるタイトルや画像、説明文などを指定できます。

ここで紹介するのはあくまで推奨している実装例になります。詳細は利用ガイドラインを参照してください。関連するファイルはファイルセットのダウンロードから取得できます。

一般的なOGP向けのメタタグ

FacebookをはじめとするSNSでOGPを表示するためには、以下のようなメタタグを<head>内に記述する必要があります。

<meta property="og:title" content="{ページ名} | SmartHR（スマートHR）">
<meta property="og:type" content="website">
<meta property="og:url" content="{url}">
<meta property="og:image" content="{url}/ogp-img.png">
<meta property="og:site_name" content="SmartHR（スマートHR）">
<meta property="og:description" content="SmartHRは、人事・労務の業務効率化からタレントマネジメントまで、働くすべての人の生産性向上を支える、「クラウド人事労務ソフト」です。">
<meta property="og:locale" content="ja_JP">

補足

og:url、og:imageに指定するURLは、https://（またはhttp://）から始まる絶対パスで指定してください。
特に理由がなければ、og:descriptionは<meta name="description">のcontentと同じ内容にすることを推奨します。

X向けのメタタグ

XはOGPとは別に、Twitterカードという機能を提供しています。Twitterカードを使用することで、X上での投稿にOGPとは別に画像や説明文を表示できます。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@smarthr_jp">
<meta name="twitter:title" content="{ページ名} | SmartHR（スマートHR）">
<meta name="twitter:description" content="SmartHRは、人事・労務の業務効率化からタレントマネジメントまで、働くすべての人の生産性向上を支える、「クラウド人事労務ソフト」です。">

補足

特に理由がなければ、twitter:descriptionは<meta name="description">のcontentと同じ内容にすることを推奨します。

Facebook向けのメタタグ

<meta property="fb:app_id" content="{app_id}">

過去にfb:adminsが使用されていたようですが、公式のウェブ管理者向けシェア機能ガイドにfb:adminsの記載はなく、fb:app_idのみが記載されています。

<!-- ❌fb:adminsは使用しない -->
<meta property="fb:admins" content="{fb:admins}">

基本要素

OGP