Technical Blog
BLOG

ワードプレスの投稿ページでプラグインを使用しないでOGPタグを設置する

OGPを設置すると、画像や概要文などが自動的に表示され視認性や認知度を向上できるため、特別な理由がない限りは設置しておくと良いでしょう。
ワードプレスにおいてはプラグインで対応させることも多いですが、SEOをよりアップさせるためにPHPなどでカスタマイズも大きなメリットになります。

ポイント

  • OGPはなぜ必要か

  • OGPの基本コードを覚えよう

  • プラグインに頼らないPHP的書き方とは

OGPとは何か

OGPとはOpen Graph Protocolの略で、ツイッター、LineなどSNSにシェアやURLを掲載したときに自動的に画像や説明文などを表示させる機能です。

最近では、ほとんどのコミニュケーションアプリなども対応し、Microsoft TeamsやGoogle CHATなどにも対応しています。

質問者サムネイル画像
質問者
ヒロ先生、OGタグとかOGPとか最近よく耳にするのですが、よくわかりません。
ヒロ先生サムネイル画像
ヒロ先生
OGPはOpen Graph Protocolの略で、よくFacebookなどにリンクを張り付けると、自動的に画像がでる仕様のことです。
質問者サムネイル画像
質問者
リンク先やサイトによって、表示されたり、されなかったりしていたので不思議に思っていました。
質問者サムネイル画像
質問者
OGPに対応していないページは画像などは自動的に出てこないのですか？
ヒロ先生サムネイル画像
ヒロ先生
アプリなど、サイトの仕様よっては出てくることもありますが、サイト内の画像を読んだり読まなかったり、意図した表示がしないことがあるので、今はOGPに対応させることは一般的です。
ヒロ先生サムネイル画像
ヒロ先生
リニューアルや新規立ち上げの時は、レスポンシブ化と同時に対応させると良いですよ。

OGPの書き方と基本コード

OGP（Open Graph Protocol）は「htmlタグ」と「<head></head>」内のメタタグで下のように記述します。

htmlタグ

htmlタグには、通常のhtmlに「prefix=”og: http://ogp.me/ns#”」を属性として追加します。

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

head内のメタタグ

head内のOGPタグは通常のメタタグの下に記述してゆきます。

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ページタイトル</title>
<meta name="keyword" content="ページのキーワード">
<meta name="description" content="ページの概要文">

<!-- ここから下がOGP -->
<meta property="og:type" content="article"><!-- OGPタイプ」 -->
<meta property="article:section" content=""><!-- OGPセクション -->
<meta property="article:tag" content=""><!-- タグ -->
<meta property="article:published_time" content="2020-01-01T00:00:00+09:00"><!-- 公開日時 -->
<meta property="article:modified_time" content="2020-01-01T00:00:00+09:00"><!-- 更新日時日時 -->
<meta property="og:title" content=""><!-- OGPタイトル -->
<meta property="og:description" content=""><!-- OGP説明文 -->
<meta property="og:updated_time" content="2020-01-01T00:00:00+09:00"><!-- 最終更新日 -->
<meta property="og:site_name" content=""><!-- サイト名 -->
<meta property="og:image" content=""><!-- OGP画像URL -->
<meta property="og:image:width" content="1440"/><!-- OGP画像の幅 -->
<meta property="og:image:height" content="720"/><!-- OGP画像の高さ -->
<meta property="og:image:type" content="image/jpeg"/><!-- OGP画像のMIMEタイプ -->
</head>

「property=”og:type”」

「property=”og:type”」はページタイプを指定します。トップページは「website」、その他下層ページは「article」と記載します。

<meta property="og:type" content="article">