SNSでサイトがシェアされた際に、より多くの人に目にしてもらうためのOGP設定について解説します。
必須ではありませんが、WEBサイトを作ったら設定しておいて損はありません。
また「OGP設定」をサービスとして提供することもできるので、WEB制作者は今回の内容を覚えておくと客単価アップにも繋がるかもしれません。
すでに300名以上が受講しており、高評価も多くいただいています！
OGP（Open Graph Protocol）とは
OGPとは「Open Graph Protcol」の略で、TwitterやFacebookなどのSNSでシェアされた際に、WEBサイトのタイトルや画像などを設定するためのHTML要素です。
OGPを設定していないと、せっかくSNSでシェアされてもただのURLのみが貼られるだけで、クリック率が落ちてしまいます。
タイトルや画像がしっかり載っている方が見たくなりますよね！
基本的なOGPの設定手順
まずHTMLの<head>に以下のコードを追加します。
<head prefix=”og: http://ogp.me/ns#”>OGP設定はmetaタグをHTMLの<head>タグ内に記述することで設定することが可能です。
<!-- OGP設定 -->
<meta property="og:url" content=" ページの URL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページのタイトル" />
<meta property="og:description" content=" ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像の URL" />
<meta property=”fb:app_id” content=”App-ID(15文字の半角数字)”>上記のタグが貼りつけられたら、それぞれタグの中身を記述していきます。
①og:url
OGPを設定するWEBページのURLを入力します。
この時、URLは必ず絶対パスで記述するようにしましょう！
例）<meta property="og:url" content=https://code-pls.com/>②og:type
ページの種類の設定によってSNS上での表示形式が変わります。
以下は代表的なものです。
| og:type | ページの種類 |
|---|---|
| website | WebサイトのTOPページ |
| blog:：ブログのトップページ | ブログのトップページ |
| article | 記事ページなど、WebサイトのTOP以外のページ |
| product | 製品の紹介ページ |
例）<meta property="og:type" content=article/>③og:title
ページのタイトルを入力します。
<title>タグに入れるものと同じタイトルを設定することが多いですが、og:titleに別のタイトルを入れるとSNSでシェアされた際に優先表示されるようになります。
文字数は20文字以内が適切と言われています。
例）<meta property="og:title" content=毎月1案件で10万円を目指す Code+/>④og:description
ページの説明文を入力します。文字数は80~90文字が適切だと言われています。
例）<meta property="og:description" content=WEB制作やブログアフィリエイトなどのスキルを身に着けて毎月10万円の副収入を目指します。/>⑤og:site_name
ページのサイト名を入力します。
サイト名やブランド情報は「og:title」ではなく、「og:site_name」に設定するようにすると良いでしょう。
例）<meta property="og:site_name" content=オンラインWEB制作スクール Code+/>⑥og:image
SNS上でシェアされた際に表示させる画像のURLを絶対パスで指定します。
絶対パスですから、画像もサーバー上にアップロードしておく必要がありますね。
例）<meta property="og:image" content=https://code-pls.com/wp-content/uploads/2023/02/brain-img1280-670.jpg/>TwitterにおけるOGP設定方法
上記のOGP設定に加え、「twitter:card」と「twitter:site」を設定するとTwitterでシェアされた際に最適化することができます。
<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@ユーザー名" />twitter:card
Twitter上での表示タイプを指定することができます。
“カードの種類”はサイトに合わせて適切なものを入力しましょう。
| カードの種類 | |
|---|---|
| summary | 最も一般的なもので、タイトル、説明、サムネイルを表示します。 |
| summary_large_image | 画像が優先的に大きく表示されます。 |
| app | アプリの名前、紹介文、アイコン、評価、価格などの情報が表示されます。 |
| player | ビデオやオーディオなどのメディアを表示させることができます。 |
例）<meta name="twitter:card" content=summary/>twitter:site
コンテンツ制作者のTwitterユーザーIDを入力します。
例）<meta name="twitter:site" content=@taichi_kun51/>FacebookにおけるOGP設定方法
Facebookでは、基本的なOGP設定に加えて「fb:app_id」を指定します。
App IDは、facebook for developers で取得可能です。
例）<meta property=”fb:app_id” content=”App-ID（15文字の半角数字）”>OGP設定の注意点
TwitterでもFacebookでも、画像を表示させたいケースがほとんどだと思います。
しかし、OGPでは媒体ごとに画像サイズが異なります。
画像サイズが適切でないと、思っていた表示とは異なってしまう可能性があるので注意が必要です。
最適な画像サイズは「1200ピクセル×630ピクセル」です。
もしくはアスペクト比が「1.91：1」のものが推奨されています。
表示を確認したい場合は、以下のツールがオススメです。
表示が上手くいかず、タグの修正などを行った場合はキャッシュをクリアしてから再度上記のツールで確認すると良いでしょう。
キャッシュが残っていると、正しく反映されない恐れがあります。
LINEのキャッシュはかなり強く残ると言われています。
LINEアプリ内でのキャッシュクリアが効かない場合は、以下のツールが便利です。
すでに300名以上が受講しており、高評価も多くいただいています！
