OGPとは何か？設定方法を徹底解説【確認ツールでHTML,WordPress両方対応、おすすめサイズあり】

まさひろくん

OGPを設定する必要があるけど、どうすればいいんだろう。HTMLとWordPressで違いそうだし、簡単に表示を確認できるツールとか無いかな。

こんな疑問に答えます。

OGP設定を覚えるのは至難の技で、私も毎回コピペしたりどこかのブログ記事を読んで設定をしていたりするので、今回は「HTML,WordPress両サイトを網羅したOGP設定方法」を解説します。

WordPressではプラグインで一番便利な「SEO SIMPLE PACK」を用いた場合、プラグインを用いない方法もそれぞれ解説します。

しょーご

この記事を書いたのは
しょーご（@samurabrass）

当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。

＼現役エンジニアのレビュー付き／

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】 — 販売ページはこちら

デザインカンプからのコーディングを経験したい
現役エンジニアのレビューを受けてみたい
即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています！

コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。

Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！

＼無料の入門編から本格企業サイトまで／

ひとまず課題を見てみる

OGPとは何か？
OGP画像の作成とおすすめサイズについて
OGPの設定方法(HTMLの場合)
OGPの設定方法(WordPressプラグイン無しの場合)
OGPの設定方法(WordPressプラグインありの場合)
OGP画像の確認方法（ツール使用）
BASIC認証をかけている場合はどうするの？
OGP設定を適切に行なってSNSシェアしてもらおう！
OGPと合わせて確認したい事項
- Favicon確認

OGPとは何か？

OGP(Open Graph Protocol)は、SNSでシェアされる際に、タイトル・URL・説明文・イメージ画像等のシェア情報を伝えるための仕組みです。

例えば以下はFacebookにブログ記事をシェアした際のカード表示ですが、これはOGP設定のおかげです。

OGPとは何か？設定方法を徹底解説【確認ツールでHTML,WordPress両方対応、おすすめサイズあり】 — facebookのOGP

参考：The Open Graph protocol

OGP画像の作成とおすすめサイズについて

OGP画像はCanvaでの作成がおすすめで、このブログの9割のサムネがCanva製です。

その時に、サイズを1200×630pxにすると、あらゆるメディアでいい感じに切り取られるようになります。

OGP画像のコツ

サイズは1200×630px
JPGまたはPNG
端に重要な要素を置かない（切り取られる）

Canvaのサムネ画像はここがおすすめ

サムネ画像は記事にそのまま使えるCanvaデザインテンプレ116選を用いるのがおすすめです。

私も最近はここの素材をそのまま改変してサムネを作っています。

しょーご

サムネ画像作成の労力が1/4になってかなり楽になりました！

記事にそのまま使えるCanvaデザインテンプレ116選

ここから具体的にOGP設定方法を解説します。

OGPの設定方法(HTMLの場合)

<!-- headタグの記述 -->
<head prefix="og: https://ogp.me/ns#">
<!-- ここからmetaタグの記述 -->
<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" />
<!-- ここからTwitterカードの記述 -->
<meta name="twitter:card" content="Twitterカードの種類" />
<meta name="twitter:site" content="@Twitterユーザー名" />
<!-- ここからFacebookカードの記述 -->
<meta property="fb:app_id" content="FacebookアプリID" />

`prefix`	OGP利用宣言
og:url	ページのURL（各ページのURL）
og:type	トップページなら『website』、トップページ以外なら『article』
og:title	ページのタイトル(各ページのタイトル)
og:description	ページの概要（90字以内）
og:site_name	サイト名（全ページ共通）
og:image	1200 × 630px(推奨)で絶対パスで記述
twitter:card	『summary』か『summary_large_image』
twitter:site	サイト管理者のTwitterユーザー名（@exampleなど）
fb:app_id	facebook用設定(idはMeta for Developersで取得)

この中からかいつまんで解説します。

og:url,title,descriptionは各ページごとに設定する

めんどうかもしれませんが、これらは各ページごとに違うものになるはずなので、HTMLサイトに置いては各ページごとに設定は必要です。

og:typeはトップページとそれ以外で記述が違う

og:typeはトップページではwebsite、下層ではarticleに変更します。

もっと細かい話をすると、以下の分類に分かれており、私のブログはどのページもblogになっていますね…

website: WebサイトのTOPページ
blog: ブログのトップページ
article: 記事ページなど、WebサイトのTOP以外のページ
product: 製品の紹介ページ

og:imageは絶対パス

相対パスでは動かないので、サーバーに上げた状態の画像までの絶対パスが必要です。

例えば私のWordPressブログでは画像URLは以下のようになっています。

<meta property="og:image" content="https://shogo-log.com/wp-content/uploads/2021/02/f5640a2798f296c729d70ee9a4276f28.png">

HTMLサイトの場合は以下の感じ

<meta property="og:image" content="https://tokyofreelance.jp/simplelp/dist/images/ogp.png">

実務での注意点

絶対パスが必要なので、HTMLサイトの場合、本番環境に上げるまで正確に設定できません。

WordPressの場合は動的に取得できるので、ローカルの段階で設定はできます。

twitter:cardはsummary_large_imageでOK

twitter:cardにはいくつか種類ありますが、『summary_large_image』で良いと思います。サムネ画像を大きく見せるタイプで、ほとんどの場合これを採択します。

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

fb:app_idは申請必要あり

facebookのアプリID（app_id）は別途申請が必要です。

以下の記事で解説しています。

OGPの設定方法(WordPressプラグイン無しの場合)

WordPressの場合は動的に情報を取得してこれるので、まず値を取得して変数に格納し、各タグにechoさせて埋め込んでいます。

デフォルトの画像URLはサムネ画像が設定されていないときに出す画像で、設定してください。

<head prefix="og: http://ogp.me/ns#">
    <?php
        // ここからmetaタグの記述
        $og_url = get_permalink(); // ページのURLを取得
        $og_type = is_front_page() || is_home() ? 'website' : 'article'; // ページの種類を判定
        $og_title = get_the_title(); // ページのタイトルを取得
        $og_description = get_the_excerpt(); // ページの説明文を取得（要設定）

        // アイキャッチ画像が設定されている場合はそのURLを取得
        if (has_post_thumbnail()) {
            $og_image_array = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');
            $og_image = $og_image_array[0];
        } else {
            $og_image = 'デフォルトの画像URL'; // アイキャッチがない場合のデフォルトの画像URL
        }

        $site_name = get_bloginfo('name'); // サイト名を取得
    ?>
    <meta property="og:url" content="<?php echo esc_url($og_url); ?>" />
    <meta property="og:type" content="<?php echo esc_attr($og_type); ?>" />
    <meta property="og:title" content="<?php echo esc_attr($og_title); ?>" />
    <meta property="og:description" content="<?php echo esc_attr($og_description); ?>" />
    <meta property="og:site_name" content="<?php echo esc_attr($site_name); ?>" />
    <meta property="og:image" content="<?php echo esc_url($og_image); ?>" />

    <!-- ここからTwitterカードの記述 -->
    <meta name="twitter:card" content="summary_large_image" /> <!-- 例: summary_large_image -->
    <meta name="twitter:site" content="@Twitterユーザー名" />

    <!-- ここからFacebookカードの記述 -->
    <meta property="fb:app_id" content="FacebookアプリID" />
</head>