![[HTML]OGP設定時のHTMLの書き方](https://images.microcms-assets.io/assets/abf038dca2a24f0eb671544430f30ca4/f425baa058c74902a949e14a13b2e491/post-ogp.webp)
記事の更新などをSNSでお知らせする際に画像やWebサイト情報をSNS上で表示させることで、Webサイトへの流入を図ることができます。
今回は、そのためのOGP設定の記載内容をまとめました。
OGPとは
OGPとは「Open Graph Protcol（オープングラフプロトコル）」の略称です。
TwitterやFacebook。SlackやChatworkなどでWebサイトのリンクを貼り付けた際に表示される画像やWebサイトの情報を表示させることが可能です。
また、OGPの公式サイトはこちらになります。
コード
OGPは複数のタグを設定する必要がありますが、最低限設定したいタグは下記になります。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<!-- OGP -->
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="サムネイル画像のURL">
<meta property="og:type" content="ページの種類">
<meta property="og:site_name" content="サイトの名前">
<!-- Twitter -->
<meta name="twitter:card" content="カードタイプ" />
<meta name="twitter:site" content="@ユーザー名" />
<!-- Facebook -->
<meta property="fb:app_id" content="app_id">
</head>各タグの説明
各タグの説明をしていきます。
headタグのprefix
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">OGPを使用するための宣言になります。
websiteの箇所は下層ページではarticleに変えてください。
og:title
<meta property="og:title" content="ページのタイトル">ページのタイトルを設定します。
サイト名ではないため、ページごとに変更してください。
og:description
<meta property="og:description" content="ページの説明文">ページの説明になります。
こちらもページごとに変更してください。
og:url
<meta property="og:url" content="ページのURL">ページのURLになるため、こちらもページごとに変更してください。
また、設定する際は絶対パスで設定してください。
og:image
<meta property="og:image" content="サムネイル画像のURL">SNSなどで表示される画像のURLを設定します。
こちらも絶対パスで設定してください。
※推奨サイズは1200px × 630pxになります。
og:type
<meta property="og:type" content="ページの種類">ページの種類を設定します。
基本的にはTOPページはwebsiteですが、ブログサイトにではblogになります。
下層ページはarticleになります。
og:site_name
<meta property="og:site_name" content="サイトの名前">サイトの名前になります。
ページタイトルではなくサイト名なので注意してください。
twitter:card
twitter用の設定になります。
twitter上でどのように表示させるかの設定になり、summaryとsummary_large_imageがあります。
summary
画像が四角く表示され、横にタイトルや説明文が入る横長のカードで表示
summary_large_image
画像を大きく表示し、その下にタイトルや説明文を表示。
そのほかには"app"や"player"と、他の種類を設定することもできます。
詳しくはTwitterの公式サイトを確認してください。
twitter:site
<meta name="twitter:site" content="@ユーザー名" />Twitterのユーザー名を設定します。
fb:app_id
<meta property="fb:app_id" content="app_id">Facebook用の設定になります。
Facebookのアプリを設定する必要があるのですが、設定方法については割愛します。
app_idを設定することで、Facebookインサイトを使ってトラフィックの分析を行うことができるようになります。
OGP設定時に使用できる便利なツール
Twitter Card Validator
Twitterでどのように表示されるのかが確認できます
Facebook シェアデバッガー
Facebook上でどのように表示されるのかが確認できます。
最後に
現在ではSNSの活用は必要不可欠になってきています。
そのため、Webサイトを公開した際は忘れずにOGP設定を行うようにしましょう。
記事の内容を自社サイトで活かしたい方へ
SEO・導線設計・サイト改善など、今の状況に合わせて優先すべき改善点を整理します。相談内容が固まっていない段階でもお気軽にご相談ください。
アーツビーについて
もっと知りたい方へ
What’s Artsbe お問い合わせ
Webサイトの新規制作・リニューアル、SEOや集客導線の見直しまで、現状の課題に合わせてご相談いただけます。
相談内容が固まっていない段階でも、必要な施策や進め方を一緒に整理します。