2020年08月12日

OGPの設定方法

お世話になっております。SeekNextの佐藤です。
今回はOGPの設定方法について記載していきます。

OGPとは?

「Open Graph Protocol」の略。

FacebookやTwitterなどのSNSでホームページやブログの記事がシェアされた時、またLINEなどのメッセージ機能でページのURLを送信した時に、そのページのタイトル、URL、概要、画像を表示させる仕組みのことです。

OGPを設定するメリットは?

OGPを設定することによって、ページや記事の内容を分かりやすくユーザーに伝えることができます。
例えば、SNSを見ている際、タイムラインに誰かがシェアしたページや記事が流れてくることがあります。
その時にページの概要が書かれていたり、関連する画像が一緒に表示されていたら、どんな内容のページなのかが事前に分かりますよね。
読んでみようかなという気持ちになり、ついついクリックしてしまった経験が少なからずあると思います。

逆にOGPを正しく設定していないと、クリックされる機会を逃す可能性があります。

OGPの設定方法

とりあえず、宣言的なものがあります。これはプログラミング特有のおまじないみたいなものですので、特に考えずに書いておきましょう。(正確に言えば、記載がなくてもOK)

<html lang="ja" prefix="og: http://ogp.me/ns#">

次に<head></head>の中に以下を記述することによって、設定します

<meta property="og:title" content="サイトのタイトルor記事のタイトル">
<meta property="og:type" content="website または blog または article">
<meta property="og:description" content="ページの簡単な説明">
<meta property="og:url" content="ページのURL">
<meta property="og:site_name" content="サイトのタイトル">
<meta property="og:image" content="サムネイル画像のURL>

上から説明します。

og:title

ページのタイトルを記述します。場合によっては「og:site_name」と同じになります。

og:type

ページのタイプを記述します。
トップページの場合websiteまたはblog、下層ページはarticleです。
そこまで神経質にならずにwebsiteで問題ありません。

og:description

ページの概要として表示される説明文を記述します。

og:url

ページのURLを記述します。絶対パスで指定してください。

og:site_name

サイト名を記述します。場合によっては「og:title」と同じになります。

og:image

SNSでシェアされた場合に表示される画像を設定します。
ここで画像を設定しない場合は、ページ内で使用されている画像からランダムで画像が選ばれて表示されます。ここの設定が重要ですので、必ず設定しましょう!

以上になります。

最近ではWordPressを使用しておられる方も多くいると思うので、プラグインの導入を行っていると勝手に設定されている事も多いので、あまり意識していないかもしれませんが、基本を理解しておいて損はないと思います。

ちょうど私もWordPressのプラグイン「All in One SEO」でOGPを設定しようとしたところサーバーのPHPのバージョン違いからかなり時間がかかりました。その解決方法に関しては次回の記事で解説していこうと思います。

OGPの設定でお困りの方は是非参考にしてみてください!