Web制作 HTML

SNSでシェアされやすくするOGPタグの設定方法

SNSでシェアされやすくするOGPタグの設定方法
OGPタグの設定ってどうやればいいの?というかOGPって何??

コーディング案件などで、

OGPタグの設定をお願いします

と言われる事があります。

学習段階では知らない人が多いかも知れませんが、知らないと困るのでここでしっかり押さえておきましょう。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


OGPとは?

OGPタグの設定方法の前に、OGPについて簡単に解説します。

OGPとは『Open Graph Protocol』の略で、SNS(TwitterやFacebookなど)でページがシェアされた時にそのページに関する情報(ページのタイトルや概要、画像など)を表示させる仕組みのことです。

例えばTwitterでブログ記事をシェアしようとするとこのような感じになります。

Twitterで記事をシェアする場合

Twitterで記事をシェアする場合

Yahoo!ニュースなどをシェアする時にも同じような感じになります。

 

OGPタグはSEOと関係あるのか?

SNSでシェアされた時、OGPタグを設定していないと画像や概要などをSNS側が自動で設定してしまい、意図しない伝わり方をしてしまう可能性があります。

また自分でOGPタグを設定した方が表示させたい画像や概要が綺麗に表示されるので、アクセスされやすくなります。

OGPタグはSEOに直接的な効果はありませんが、アクセスされやすくなるという事は間接的に効果があると言えるので、極力設定するようにしましょう。

 

OGPタグの設定方法

それでは本題であるOGPタグをご紹介します。

OGPタグはheadタグ内に記入します(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:type" content="ページタイプ" />
  <meta property="og:description" content="ページの概要" />
  <meta property="og:image" content="画像パス(絶対パス)">
  <meta property="og:url" content="ページURL(絶対パス)" />
  <meta property="og:site_name" content="サイトタイトル" />
  <!-- Twitterカード -->
  <meta name="twitter:card" content="カードタイプ" />
  <meta name="twitter:site" content="@ユーザー名" />
</head>


OGPタグの解説

それでは先ほど設定したOGPタグを1つずつ解説していきます。

 

headタグ(prefix属性)

OGPタグではありませんが、まずはheadタグ内にprefix属性を設定します。

これは『OGPを使う為の宣言』のようなもので、記事ページの場合は2ヶ所ある『website』を『article』に変えます。

<!-- トップページ -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">

<!-- 記事ページ -->
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

 

og:title

ページのタイトルを設定します(サイトのタイトルはog:site_name)

サイトのタイトルではなくページのタイトルなので、ページごとに変わります。

<meta property="og:title" content="WordPressオリジナルテーマの作り方" />

 

og:type

ページのタイプを設定します。

トップページなら『website』、トップページ以外なら『article』になります。

<!-- トップページ -->
<meta property="og:type" content="website" />

<!-- トップページ以外 -->
<meta property="og:type" content="article" />

WordPressの場合はcontentの中身を条件分岐で設定すればOKです。

<meta property="og:type" content="<?php if ( is_front_page() ) { echo 'website'; } else {echo 'article';} ?>" />

WordPressの条件分岐については以下の記事で詳しく解説しています。

参考記事
【コピペOK!】よく使うWordPress条件分岐タグまとめ
【コピペOK!】よく使うWordPress条件分岐タグまとめ

続きを見る

 

og:description

ページの概要(説明文)を設定します。

文字数は80〜90文字程度が推奨です。

<meta property="og:description" content="WordPressオリジナルテーマの作り方を詳しく解説しています。今回はトップページの作り方です。" />

 

og:image

SNSなどでシェアされた時に表示されるサムネイルを設定します。

サイズは最低でも600 × 315px以上、推奨サイズは1200 × 630px以上となります。

contentには画像の絶対パスを書きます。

<meta property="og:image" content="画像パス(絶対パス)">

この設定がないとページ内の画像をランダムで使用されます。

 

og:url

ページのURLを設定します。

URLは絶対パスになります。

<meta property="og:url" content="ページURL(絶対パス)" />

 

og:site_name

サイト名を設定します。

og:titleはページタイトルでしたが、これはサイト名なので全ページ共通でOKです。

<meta property="og:site_name" content="じゅんぺいブログ" />

 

Twitterカードの解説

あとはTwitterカードの解説をします。

 

twitter:card

Twitterでシェアされた時に表示されるカードの種類を設定します。

種類は4つ。

  • summary:画像とテキストが横並び(画像は正方形)
  • summary_large_image:画像が横いっぱいに表示され、その下にテキスト
  • app:アプリ配布用
  • player:ビデオやオーディオなどのメディアを表示できる

Webサイトで使用するのは『summary』か『summary_large_image』になるかと思います。

<meta name="twitter:card" content="summary" />
もしくは、
<meta name="twitter:card" content="summary_large_image" />

 

twitter:site

サイトの管理者や作成者のTwitterユーザー名を設定します。

例えば私の場合は以下になります。

<meta name="twitter:site" content="@junpei_sugiyama" />
Twitterプロフィール

Twitterプロフィール

 

Twitterカードの表示確認

OGPタグを設定した後、実際にどう表示されるのか気になりますよね?

以下のページで表示確認が出来ます。

Card validator

使い方は簡単で、表示確認したいページのURLを入力して『Preview card』をクリックするだけです。

Card validator:記事のURLを入力

Card validator:記事のURLを入力

こちらが結果になります。

Card validator:記事のURL入力結果

Card validator:記事のURL入力結果

サムネイルがブログ用の画角なので、Twitterだとちょっと上下が切れていますね。

 

ツイート済みの内容を変更しても変更内容が反映されない場合

例えば公開済みのブログをリライトしてTwitterでシェアした時、変更したサムネイルなどが反映されない場合があります。

その場合は先ほどのCard validatorでURLを入力して下のボタンをクリックすればOKです。

すでにツイート済みの場合でも反映されます(ブラウザのキャッシュクリアが必要かも知れません)


まとめ:OGPは必ず設定しよう!

当ブログもTwitterでよくシェアされます。

ここをしっかりしておくと拡散されやすくなると思うので、しっかりと設定しておきましょう!

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
740部以上販売し、レビューは410件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高9万PV▶︎Twitterのフォロワーは6300人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計750部&450万円突破

-Web制作, HTML
-