AROOM

2023.01.08

【人知れず頑張るOGPさん】初心者でもわかる具体的な設定方法や必要性をご紹介

はじめに

こんにちは。A-ROOM編集部です。
本記事にアクセスいただき、ありがとうございます!

前回の記事で「人知れず頑張るファビコンさん」についてご紹介しました。

必須で設定しなくても良いものですが、
現在のネット社会では非常に重要な役割を持っているものです。

前回の「人知れず頑張る」記事が好評だったので、
今回もWebサイトを作る際に重要だけど意外に抜けてしまう
「あの方」についてご紹介したいと思います。

今回は「OGP」さんに迫ります!

SNSシェアする際に活躍する「OGP(オージーピー)」さん。
皆さんは聞いたことはありますか?

  • 「OGPってなに?」
  • 「知識がなくてもわかるように説明してほしい」

という方に!

OGPはWeb制作時のタグ要素や属性などが関わってくることなので、
はじめは少し難しい話のように感じるかもしれません。

そこで本記事では上記のような疑問がある方に向けて、
具体的な説明と設定方法をご紹介していきます。

そもそもOGPとは?

OGPは「Open Graph Protcol (オープン・グラフ・プロトコル)」の略です。
SNS拡散時などに使用できるWebページの概要・サムネイルの記述仕様を指します。

OGPさんの役割は

  • Webページのタイトル
  • URL
  • 概要
  • サムネイル画像
  • などの情報を伝えるためのものです。

OGPさんの見え方

  • Twitterでの見え方

  • Facebookでの見え方

FacebookやTwitterなどのSNSでWebサイトがシェアされた時に
表示されるよく見るアレですね!

OGPを設置する必要性

OGPの見え方

ラッコツールズ「OGP確認」の結果画面をスクリーンショット

OGPを設定していないと・・・?

OGPを設定しないと、せっかくSNSで共有されても
シェアした人の文字情報とURLの記述しかなく、
サムネイル表示もないのでインパクトに欠けてしまいます。

また、SNSが自動でWebページの詳細情報を作ってしまうので、
本当に伝えたい需要な情報が見た人に伝わりにくくなってしまいます。

設置する効果とは?

以上のことから、OGP設置のメリットは

  • 視覚的に見た人の興味を引きクリック率を上げられる
  • 思っていた内容と異なるといった早期離脱を防ぐ

といった効果が挙げられます。

具体的なOGPの設定方法

OGPを設定するために必要な手順は下記の2つです。

  • OGPを使うことを宣言する
  • OGPのタグ要素を追加する

それぞれの手順についてご紹介していきます。

1.OGPを使うことを宣言する

OGPを設定する前に『prefix属性』というものを設定する必要があります。

prefix属性は「これからOGPについて設定しますよ」と宣言する意味があり、
これをhtmlタグの中に追加することで、OGPの設定ができるようになります。

htmlタグの中に追加するprefix属性の記述は下記の通りとなります。

2.OGPのタグ要素を追加する

htmlタグの中にprefix属性を追加したら、
続いてはheaderタグ内にOGPに関する要素を追加していきます。

追加する記述は下記の通りです。

OGPに関する用語解説


上記で紹介したOGPのタグ要素に関する用語の解説をしていきます。

1.og:url

『og:url』は、OGPで設定するWebページのURLを指定するものです。

ここに記述するURLは、『相対パス』ではなく『絶対パス』で記述する必要があります

絶対パスとは、ブラウザで表示されるアドレスのことです。

  • ヤフーであれば「http://www.yahoo.co.jp」が絶対パスとなり、
  • Googleであれば「http://www.google.co.jp」が絶対パスとなります。

つまり、共有したいURLをそのままコピペすればOKです。

2.og:type

『og:type』は、Webページのタイプを指定するものです。

Webページのタイプには以下のようなものがあります。

  • Webサイト(ブログ)のトップページをシェアしたいのであれば『websit(blog)』
  • 記事などのトップページをシェアしたいのであれば『article』
  • 商品ページをシェアしたいのであれば『product』

という記述になります。

3.og:title

『og:title』は、ページのタイトルを指定するものです。

一般的にはWebページと同じタイトルを設定しますが、
もし別のタイトルを使用したい場合は『og:title』に別のタイトルを記載しましょう。

そうすることで、『og:title』のタイトルが優先して表示されるようになります。

また、一般的なWebコンテンツのタイトルの適切な文字数は32文字と言われていますが、
『og:title』の最適な文字数は20文字以内と言われていますので注意しましょう。

4.og:description

『og:description』は、ページの説明文を指定するものです。

ここでの最適な文字数は80〜90文字ほどと言われています。
(この数値の根拠は、スマホ画面で表示できる文字数の目安です。)

5.og:site_name

『og:site_name』は、ページのサイト名を記述するものです。

『og:title』と混同されがちですが、こちらにはWebサイト名やブランド名などを記述します。

6.og:image

『og:image』は、SNSでシェアされたときに表示される画像を指定するものです。

ここでも『og:url』と同じように絶対パスで指定します。

SNSごとの推奨サイズは下記の通りです。

  • Facebook:1200 x 630px(または470 x 246px)
  • Twitter:280 × 150px以上

すべてを反映したイメージがこちら

A-ROOMの記事ページのOGP設定例です。

「OGP確認ツール」の結果画面をスクリーンショット

まとめ

この記事では、OGPとはどんなものなのかと具体的な設定方法についてご紹介していきました。

慣れてない場合は専門用語が出てきてちょっと難しいと感じてしまうような内容ですが、
やってみると意外と簡単です。

OGPを設定することはSNSでのクリック率に大きく影響しますので、ぜひ対策しておきたいですね。

もし自分たちのサイトはどうなのかな?設置したいけどどうすれば?と悩んだらぜひWeb制作のプロに聞いてみましょう!

関連記事

人知れず頑張るシリーズ

新着記事

Webサイトのインデックスとは

インデックスされるためにすること

当社の実績はこちら

ここまでお読みいただき、誠にありがとうございました!

今後も多摩地域・立川にあるホームページ制作会社として地域の皆様、 ホームページに関わる皆様に向けてお役に立てる有益な情報発信ができるよう努めて参ります。

BACK TO ARCHIVE AROOM

CONTACT

お見積り依頼、Web制作について

お見積り依頼や制作のご相談など
フォームよりお気軽にお問い合わせください。

お問い合わせはこちら

DOWNLOAD

会社案内・実績ダウンロード

実績などまとめた資料をPDFでご準備しております。
ご自由にダウンロードください。

ダウンロードはこちら