HTML・CSS

サイト記事をSNS等でシェアしたときに記事のタイトルや画像などの情報を明示させる方法

今日も、ともログにご来訪いただきありがとうございます。
さて、ウェブサイトの制作をしている方ならすでにご存知かと思いますが、今日は、「OGP(The Open Graph protocol)」設定方法について備忘録をかねて投稿いたします。

サイトを自作している方、Wordpressなどの更新システムを自作されている方、無料テーマを使用している方などは、自分で組み込まない限り、未設定となっていることがありますので、記事を自身のTwitterやFacebookなどでシェアする方や、ニュースサイトを運営したいと考えている方には、必須な設定なので、おすすめです。

OGP(The Open Graph protocol)とは？

そもそもOGPとは、WEBページに関する情報を予め記述しておくことで、SNSでページがシェアされたときに記事のタイトルや画像などの情報を表示させることができます。

Facebookなどに、サイトのURLを貼ると、自動的にサイトのアイキャッチや記事のタイトルが表示されるあれです。

OGPはメタタグとして定義されている

OGPで表示される情報は「メタタグ」として定義されています。

基本的なメタタグは次の通りで、<meta>とRDFaのproperty属性を使用して定義します。

メタタグ明示できる情報
og:site_nameサイト名
og:locale言語の種類(日本語の場合は「ja_JP」)
og:typeコンテンツの種類
(ニュースやブログの記事の場合は「article」、書籍は「book」、汎用的なページは「website」になります)
og:titleタイトル
og:url正規URL
og:description概要
og:images画像
og:image:width画像の横幅
og:image:height画像の高さ
fb:app_idFacebookのアプリID
<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<meta name="viewport" contents="width=device-width, initial-scale=1.0">
<title>ともログ｜趣味・子育て・ライフスタイル</title>

<meta property="og:site_name" content=""><!--サイト名-->
<meta property="og:locale" content="ha_JP"><!--言語の種類-->
<meta property="og:type" content="website"><!--コンテンツの種類-->
<meta property="og:title" content=""><!--タイトル-->
<meta property="og:url" content=""><!--正規URL-->
<meta property="og:description" content=""><!--概要-->
<meta property="og:image" content=""><!--画像-->
<meta property="og:image:width" content="1500"><!--画像の横幅-->
<meta property="og:image:height" content="1000"><!--画像の高さ-->
<meta property="fb:app_id" content=""><!--FacebookのアプリID-->

</head>

OGPで定義されているメタタグについては、「ウェブ管理者向けシェア機能ガイド」でも詳しく掲載されています。

https://developers.facebook.com/docs/sharing/webmasters

OGPの記述をチェックする方法

OGPの記述を定義したら、記述に問題がないかどうかチェックを行います。
方法としては、Metaが提供している「チェアデバッガ−」を利用する方法が一般的です。

チェックしたいページのURLを指定して「デバック」をクリックすると、取得した情報とチェアしたときのプレビューが表示されます。

https://developers.facebook.com/tools/debug/sharing/

FacebookのアプリIDの取得について

Facebookのシェアデバッガーを利用する際に、FacebookのアプリIDの記述が求められます。
アプリIDはページとFacebookのアカウントを紐付けするものなので、アプリを作成して取得します。

ちなみに、アプリIDを記述しなくても、SNSでシェアしたときの表示には影響はしません。

まとめ

自分のSNS上で記事をシェアして拡散する方法が最も費用がかからずに誘導できる方法ですし、企業公式等のウェブサイトの場合は、FacebookやTwitterは、現在でも最低限取り組んでいるSNSツールです。

オリジナルでサイトを作成してもらった場合には、最低限OGPの設定がされているのか、を確認することをお勧めいたします。

それでは、最後まで記事をお読みいただきありがとうございました。

-HTML・CSS