Web制作実務役立ち

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

OGPとは何か?設定方法を徹底解説【確認ツールでHTML,WordPress両方対応、おすすめサイズあり】
本ページにはプロモーションが含まれています。
まさひろくん

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

こんな疑問に答えます。

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

プラグインには一番便利な「SEO SIMPLE PACK」を用いて、プラグインを用いない方法も解説します。

しょーご

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

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

\現役エンジニアのレビュー付き/

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

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

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

コーディングを学習中の方はぜひご活用ください。

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

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

OGPとは何か?

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

以下のようなものです。

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

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" />
prefixOGP利用宣言
og:urlページのURL(各ページのURL)
og:typeトップページなら『website』、トップページ以外なら『article』
og:titleページのタイトル(各ページのタイトル)
og:descriptionページの概要(90字以内)
og:site_nameサイト名(全ページ共通)
og:image1200 × 630px(推奨)で絶対パスで記述
twitter:card『summary』か『summary_large_image』
twitter:siteサイト管理者のTwitterユーザー名(@exampleなど)
fb:app_idfacebook用設定(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" />
summary_large_image
summary

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>
しょーご

個人的にはプラグインを使ったほうが楽かなと思いますね。

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

WordPressプラグインであれば、「SEO SIMPLE PACK」がおすすめです!!

設定方法は以下の記事で解説していますが、「SEO PACK→OGP」から簡単に設定できます。

WordPressのおすすめSEOプラグインSEO SIMPLE PACKの使い方【OGPやGA4も解説】

OGP画像の確認方法(ツール使用)

https://rakko.tools/tools/9/

OGPの確認はツールを使えばOKです。

ラッコツールズ OGP確認」で各種SNSやメディアの検証ができます。

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

当たり前ですが、サーバーに上がってないと確認できません。

またBASIC認証などかかっているとクロールできないので、取得できません。

BASIC認証をかけている場合はどうするの?

まさひろくん

これってBASIC認証をかけている場合は確認できないのかな?

本番環境で認証外してリリースしてから確認するしか方法が無いの?

しょーご

確かに、認証下でOGPを確認することは通常できないですね。

BASIC認証下でもOGP確認ができるLocalhost OGP チェッカーの使い方

ただ、拡張機能を使えば確認できるので、以下の記事を御覧ください。

OGP設定を適切に行なってSNSシェアしてもらおう!

今回は「HTML,WordPress両サイトを網羅したOGP設定方法」を解説しました。

ところで皆さん、実際にSNSでサイトがシェアされたときに知ることができていますか?

実はメンションがない、SNSの通知で知り得ない場所でシェアされていたりします。

YAHOOリアルタイム検索するとそれらが全て分かります。

個別の投稿を見てると、しっかりブログカードが機能しているのがわかりますね。

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

意図してかわかりませんが、結構お硬い系のサイトだと未設定のところが多いですが、本当にもったいないなと思いますね…

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

あなたに是非読んでほしい記事です!