---
title: "OGP画像を設定してSNSのサムネを整える方法"
description: "SNS に URL を貼ったときのサムネイル画像は og:image タグで決まります。設定が抜けるとクリック率にも影響します。og:image の基本的な書き方から、画像が出ないときの確認ポイントまでを手順で解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/set-ogp-image"
markdown: "https://giga-site.com/articles/set-ogp-image/index.md"
category: "ハウツー"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# OGP画像を設定してSNSのサムネを整える方法

SNSにURLを貼ったときに表示されるサムネイル画像は、OGP画像（og:image）で決まります。設定が抜けていると味気ないリンクになり、クリック率にも影響します。この記事では、og:imageの基本的な書き方から、画像が出ないときの確認方法までを順に解説します。

> Source HTML: https://giga-site.com/articles/set-ogp-image
> Article index: https://giga-site.com/articles/index.md

## og:imageとは何か

og:imageは、SNSやチャットにURLを貼ったときに表示されるサムネイル画像を指定するOGPタグです。ページのhead内にメタタグとして書き、画像のURLを値に指定します。

X、Facebook、LinkedInなど多くのサービスがこのog:imageを参照してカードの画像を決めます。つまり1つ整えておけば、複数のSNSで共通のサムネイルが使われます。

画像が指定されていないと、サービスはページ内の適当な画像を拾うか、画像なしで表示します。意図した見せ方をするには、明示的にog:imageを設定するのが確実です。

## og:imageの書き方

基本は、画像の公開URLを値に持つメタタグをheadに置くだけです。画像URLは絶対URLで指定し、外部からアクセスできる場所を指します。

あわせてog:titleやog:descriptionも入れておくと、カード全体の見栄えが整います。画像だけでなくテキストもセットで考えるのがコツです。

- 画像URLは絶対URLで指定する
- HTTPSで配信される場所に画像を置く
- og:titleとog:descriptionも一緒に設定する

## 最短手順：まずこの3ステップで完了

OGP画像を設定してSNSのサムネを整える方法は、最初に全体像を押さえると迷いません。細かな設定に入る前に、ファイルを準備し、共有条件を決め、公開後に相手と同じURLで確認する流れを作ります。

手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 1. 共有するHTML/ZIPを整理し、不要ファイルや秘密情報を除く
- 2. 認証方式、公開期限、差し替え有無を決めてURLを発行する
- 3. シークレットウィンドウとスマホで開き、相手への依頼文を添えて送る

## 推奨サイズと作り方の手順

見栄えのよいOGP画像を用意する流れは次のとおりです。

カードのトリミングはサービスによって少しずつ異なります。重要な要素を中央に寄せておけば、端が多少切れても意図が伝わり、どのSNSでも破綻しにくくなります。

1. 横長の画像を用意する（多くのSNSが横長カードを採用している）
2. 中央に重要な要素を置き、端が切れても伝わる構図にする
3. 文字を入れる場合は大きめにして、小さく表示されても読めるようにする
4. 画像を公開URLに配置し、ブラウザで直接開けるか確認する
5. そのURLをog:imageに指定してページを公開する

## 画像が表示されないときの確認

og:imageを設定したのにサムネイルが出ない場合、まず画像URLをブラウザで直接開いて表示されるかを確かめます。開けないなら、配置場所やパスが間違っています。

次に、画像が外部からアクセスできる場所にあり、HTTPSで配信されているかを確認します。社内ネットワークなど限定環境にある画像は、SNS側から取得できません。

設定自体は正しいのに古い画像が出る場合は、SNS側がキャッシュしている可能性があります。各サービスのデバッグツールで再取得すると更新されます。

## ギガサイト便でOGP画像を確認する

ギガサイト便はHTMLやCSS・JS・画像を含むZIPをドロップするだけで 〇〇.giga-site.com の共有URLを発行します。ZIPに画像を含めておけば、その画像もCDN経由でHTTPS配信されるため、og:imageの到達性を確かめやすくなります。

og:imageには、この公開URL上の画像パスを絶対URLで指定すれば、SNSのカード表示をそのまま試せます。表示が思ったとおりでなければ、同じURLのままファイルを差し替えて再確認できます。

公開URLにはnoindexが付くため、調整中のページが検索に出る心配はありません。なお、関係者以外に見せたくない場合はnoindexだけに頼らず認証を併用してください。

## よくある質問

### og:imageは1枚だけで複数のSNSに使えますか。

はい。X、Facebook、LinkedInなど多くのサービスがog:imageを参照するため、1枚整えておけば各SNSで共通のサムネイルとして使われます。

### 画像URLは相対パスでもよいですか。

og:imageは絶対URLで指定するのが確実です。SNS側はページの外から画像を取得するため、外部から到達できるHTTPSの絶対URLを指定してください。

### 設定したのにサムネイルが出ません。

まず画像URLをブラウザで直接開けるか確認します。開けない場合はパスや配置が問題です。開けるのに出ない場合は、SNS側のキャッシュが原因のこともあるため、各サービスのデバッグツールで再取得してください。

### 確認中の画像が検索に出てしまいませんか。

ギガサイト便の公開URLにはnoindexが付くため検索には出ません。ただしnoindexは閲覧制限ではないので、見せたくない場合は認証を併用してください。

### 最短で進める場合でも省略しないほうがよい確認は何ですか？

不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。

## 関連記事

- [共有ページにファビコンを設定する方法](https://giga-site.com/articles/set-favicon-howto/index.md)
- [ページタイトルと説明文を設定する方法](https://giga-site.com/articles/set-page-title-description/index.md)
- [公開を始める日と終わる日を指定して共有する方法](https://giga-site.com/articles/set-publish-start-and-end/index.md)
- [画像ギャラリーをHTMLにまとめて一括で見せる方法](https://giga-site.com/articles/share-image-gallery-html/index.md)
- [公開URLをX（Twitter）でシェアして見栄えよく見せる方法](https://giga-site.com/articles/share-on-x-twitter/index.md)
- [公開URLをFacebookでシェアする方法](https://giga-site.com/articles/share-on-facebook/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "OGP画像を設定してSNSのサムネを整える方法",
  "description": "SNS に URL を貼ったときのサムネイル画像は og:image タグで決まります。設定が抜けるとクリック率にも影響します。og:image の基本的な書き方から、画像が出ないときの確認ポイントまでを手順で解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/set-ogp-image",
  "url": "https://giga-site.com/articles/set-ogp-image",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "ハウツー",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "og:imageは1枚だけで複数のSNSに使えますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい。X、Facebook、LinkedInなど多くのサービスがog:imageを参照するため、1枚整えておけば各SNSで共通のサムネイルとして使われます。"
      }
    },
    {
      "@type": "Question",
      "name": "画像URLは相対パスでもよいですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "og:imageは絶対URLで指定するのが確実です。SNS側はページの外から画像を取得するため、外部から到達できるHTTPSの絶対URLを指定してください。"
      }
    },
    {
      "@type": "Question",
      "name": "設定したのにサムネイルが出ません。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず画像URLをブラウザで直接開けるか確認します。開けない場合はパスや配置が問題です。開けるのに出ない場合は、SNS側のキャッシュが原因のこともあるため、各サービスのデバッグツールで再取得してください。"
      }
    },
    {
      "@type": "Question",
      "name": "確認中の画像が検索に出てしまいませんか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ギガサイト便の公開URLにはnoindexが付くため検索には出ません。ただしnoindexは閲覧制限ではないので、見せたくない場合は認証を併用してください。"
      }
    },
    {
      "@type": "Question",
      "name": "最短で進める場合でも省略しないほうがよい確認は何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。"
      }
    }
  ]
}
```