【2026年最新】SWELLアイキャッチ・OGP画像の推奨サイズと正しい設定方法を徹底解説

2025年9月9日

この記事の結論

SWELLのアイキャッチ・OGP画像は1200×630px（アスペクト比1.91:1）で統一するのが推奨です。この1サイズにすればアイキャッチとOGPを兼用でき、X（Twitter）・Facebook・LINEすべてで綺麗に表示されます。重要な要素は画像中央のセーフゾーンに配置し、崩れる場合はメディア設定やRegenerate Thumbnailsで調整します。

「アイキャッチ画像がSNSで崩れる…」その原因はサイズ設定にあります

ブログ記事を公開してSNSでシェアしたとき、画像が切れていたり、ぼやけて表示されたりした経験はありませんか？WordPressテーマ「SWELL」を使っているなら、アイキャッチ画像とOGP画像の推奨サイズを正しく理解して設定することが、見栄えの良いブログ運営の第一歩です。

この記事では、SWELLにおけるアイキャッチ・OGP画像の推奨サイズ、設定手順、よくあるトラブルと解決策まで、2026年最新情報をもとに徹底解説します。これからSWELLを使い始める方にも、すでに使っているのに画像設定に自信がない方にも役立つ内容です。

SWELLのアイキャッチ画像とOGP画像の違いを理解しよう

まず「アイキャッチ画像」と「OGP画像」の違いを整理しておきましょう。混同しやすい概念ですが、役割が異なります。

アイキャッチ画像とは

アイキャッチ画像とは、記事の一覧ページや記事上部に表示されるメイン画像のことです。読者の目を引き、記事のクリック率（CTR）を高める重要な役割を担います。SWELLでは記事編集画面の右側にある「アイキャッチ画像」欄から設定できます。

OGP画像とは

OGP（Open Graph Protocol）画像とは、TwitterやFacebook、LINEなどSNSで記事URLをシェアしたときにプレビューとして表示される画像です。適切なサイズで設定しないと、画像が切れたり意図しない比率で表示されたりしてしまいます。SWELLではデフォルトでアイキャッチ画像がOGP画像として使用されますが、別途設定することも可能です。

【2026年最新】SWELLアイキャッチ・OGP画像の推奨サイズ

SWELLおよび主要SNSの仕様を踏まえた、2026年現在の推奨サイズは以下のとおりです。

アイキャッチ画像の推奨サイズ

推奨サイズ：1200×630px
アスペクト比：1.91:1
ファイル形式：JPG または PNG（WebP対応環境ではWebPも可）
ファイルサイズ：200KB以下を目安に（表示速度に影響）

1200×630pxはOGP画像の推奨サイズと共通しているため、アイキャッチとOGP画像を兼用する場合にも最適です。SWELLのブログカードやトップページのスライダー表示にもこのサイズが最も綺麗にフィットします。

OGP画像の推奨サイズ（SNS別）

SNS	推奨サイズ	最小サイズ	アスペクト比
Twitter（X）	1200×630px	300×157px	1.91:1
Facebook	1200×630px	600×315px	1.91:1
LINE	1200×630px	—	1.91:1

すべてのSNSに対して1200×630px（アスペクト比1.91:1）が共通の推奨サイズです。この1サイズで統一しておくと管理がシンプルになります。

注意：画像の中央に重要な要素を配置する

SNSによっては画像の上下左右が一部クロップ（トリミング）される場合があります。テキストやロゴなど重要なデザイン要素は、画像の中央から上下左右それぞれ15%程度の安全領域（セーフゾーン）内に収めておくことを強くおすすめします。

SWELLでアイキャッチ画像を設定する手順【画像付きで解説】

実際にSWELLでアイキャッチ画像を設定する手順を、ステップごとに解説します。

ステップ1：記事編集画面を開く

WordPressの管理画面から「投稿」→「新規追加」または既存記事の編集画面を開きます。

ステップ2：アイキャッチ画像を設定する

画面右側のサイドバーにある「アイキャッチ画像」パネルを確認します。
「アイキャッチ画像を設定」をクリックします。
メディアライブラリから画像を選択するか、新しい画像をアップロードします。
1200×630pxに揃えた画像を選択し、「アイキャッチ画像を設定」をクリックして完了です。

ステップ3：OGP画像を個別に設定する（必要な場合）

SWELLではデフォルトでアイキャッチ画像がOGP画像として使用されますが、SNS用に別の画像を設定したい場合は以下の手順で行います。

記事編集画面をブロックエディタで開き、右側サイドバーを確認します。
「SWELL設定」または「SEO設定」タブ内にある「OGP画像」の項目を探します。
「OGPにアイキャッチとは別の画像を使う」オプションをオンにします。
専用のOGP画像（1200×630px推奨）をアップロード・選択して保存します。

※SWELLのバージョンによって画面のUIが若干異なる場合があります。最新バージョンへのアップデートを推奨します。

SWELLのサムネイル（画像トリミング）設定を確認しよう

WordPressには「メディア設定」でサムネイルサイズを指定する機能があります。SWELLはテーマ側でも最適なサムネイルサイズが自動設定されますが、意図しないトリミングが起きる場合は以下を確認してください。

WordPressのメディア設定を確認する手順

管理画面の「設定」→「メディア」を開きます。
「サムネイルのサイズ」「中サイズ」「大サイズ」の数値を確認します。
必要に応じてサイズを変更し、「変更を保存」をクリックします。

既存の画像のサムネイルを再生成したい場合は、プラグイン「Regenerate Thumbnails」を使うと便利です。既存のすべてのメディアに対してサムネイルを一括再生成できます。

OGP設定を強化するプラグイン「SWELL」との連携

SWELLはSEOプラグインとの連携も重要です。代表的なSEOプラグインとOGP設定の関係を整理します。

SEO SIMPLE PACKとの連携

SWELL公式が推奨するSEOプラグイン「SEO SIMPLE PACK」を使用している場合、OGPの基本設定はプラグイン側で管理されます。

管理画面「SEO SIMPLE PACK」→「OGP設定」でデフォルトのOGP画像を設定できます。
個別記事のOGP画像は記事編集画面のSEO SIMPLEパネルから上書き可能です。
Twitter Cardの種類は「summary_large_image」を選ぶと大きな画像で表示されます。

Yoast SEO・RankMathとの連携

YoastやRankMathを使っている場合も、各プラグインのソーシャル設定タブからOGP画像を設定できます。SWELLとの二重設定にならないよう、どちらか一方のプラグインで管理することを推奨します。

SNSシェア後にOGP画像が正しく表示されない場合のトラブル対処法

OGP画像を設定したのにSNSで正しく表示されない場合は、以下を試してください。

Twitterのキャッシュをクリアする

Twitterは一度読み込んだOGP情報をキャッシュします。画像を変更した場合は、Twitter Card Validator（旧名）にURLを入力してキャッシュをリフレッシュしてください。2024年以降はXの「Cards Preview」機能が統合されています。

FacebookのOGPキャッシュをクリアする

Facebookでは「Sharing Debugger（シェアデバッガー）」ツールにURLを入力し、「再度スクレイピング」ボタンをクリックするとキャッシュが更新されます。

画像のURLが変わっていないか確認する

WordPress側で画像を差し替えた場合、URLが変わっているとSNSキャッシュは古い画像を参照し続けます。キャッシュクリアとあわせてURLの確認も行いましょう。

画像サイズが小さすぎないか確認する

Twitterでは画像が300×157px未満の場合、大きなカード（summary_large_image）で表示されません。必ず推奨の1200×630px以上で設定してください。

アイキャッチ画像をおしゃれに作るためのおすすめツール

1200×630pxのアイキャッチ・OGP画像を効率よく作成できるツールを紹介します。

Canva（キャンバ）

テンプレートが豊富で、ブログのアイキャッチ作成に最もポピュラーなデザインツールです。「ブログバナー」や「Facebookカバー」テンプレートが1200×630pxに対応しており、初心者でも簡単におしゃれな画像が作れます。

Adobe Express（旧Adobe Spark）

Adobeが提供する無料デザインツール。フォントやブランドカラーを統一管理でき、ブログ全体のアイキャッチデザインに一貫性を持たせるのに便利です。

Figma

より高度なデザインが必要な場合はFigmaが最適です。テンプレートを作成しておけば、記事ごとにテキストだけ差し替えるだけで統一感のあるアイキャッチを量産できます。

画像サイズ以外に確認したいOGPの必須設定

推奨サイズで画像を用意しても、OGPタグ自体が正しく設定されていなければSNSで意図通りに表示されません。最低限、次の項目が出力されているかを確認しましょう。

og:title / og:description：シェア時に表示されるタイトルと説明文。記事内容と一致させる
og:image：画像は必ずhttps://から始まる絶対URLで指定する（相対パスは不可）
og:type / og:url：記事ならarticle、ページの正規URLを指定する
twitter:card：大きく見せたいならsummary_large_imageを指定する

<meta property="og:title" content="記事タイトル">
<meta property="og:description" content="記事の要約">
<meta property="og:image" content="https://example.com/ogp.png">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">

画像を軽量化して表示速度も守る

OGP・アイキャッチ画像は1200×630pxと比較的大きいため、そのままだとページの表示速度を下げる原因になります。SEOとユーザー体験の両面から、次の点を意識して最適化しましょう。

形式：写真はJPEG、図やロゴはPNG。対応環境ならWebPでさらに軽量化できる
圧縮：TinyPNGなどで画質を保ったままファイルサイズを削減する
解像度：推奨サイズを大きく超える巨大画像はアップロード前にリサイズする

画像の見栄えと軽さは両立できます。サイズと設定を正しく整えれば、SNSでの見え方もページ速度も同時に改善できます。

まとめ：SWELLのアイキャッチ・OGP画像は1200×630pxで統一しよう

この記事で解説した内容をまと

参考リンク（公式・一次情報）

よくある質問（FAQ）

Q1. SWELLのアイキャッチ画像の推奨サイズは？

A. 1200×630px（アスペクト比1.91:1）が推奨です。OGP画像と共通サイズなので兼用でき、ブログカードやトップページのスライダーにも綺麗にフィットします。形式はJPGまたはPNG、ファイルサイズは200KB以下が目安です。

Q2. アイキャッチ画像とOGP画像は何が違う？

A. アイキャッチ画像は記事一覧や記事上部に表示されるメイン画像で、クリック率を高める役割です。OGP画像はSNSで記事URLをシェアしたときに表示されるプレビュー画像です。SWELLではデフォルトでアイキャッチがOGPとして使われますが、別々に設定することもできます。

Q3. SNSで画像が切れたり崩れたりするのを防ぐには？

A. 1200×630px（1.91:1）で統一し、テキストやロゴなど重要な要素を画像中央のセーフゾーン（上下左右15%を除いた範囲）に収めます。SNSによっては画像の端がトリミングされることがあるためです。

Q4. アイキャッチとは別のOGP画像を設定するには？

A. 記事編集画面のサイドバーで「SWELL設定」または「SEO設定」タブを開き、「OGPにアイキャッチとは別の画像を使う」をオンにして、1200×630px推奨の専用画像をアップロード・保存します。バージョンによりUIが異なる場合があります。

Q5. 既存画像のサムネイルが意図せずトリミングされる場合は？

A. 「設定」→「メディア」でサムネイル・中・大サイズの数値を確認・調整します。既存画像に反映したいときはプラグイン「Regenerate Thumbnails」で全メディアのサムネイルを一括再生成できます。

AIスキルで、未来の自分をアップデート！

今なら完全無料でAIを学べる！

動画や実践で楽しく学べる：初心者でも安心のカリキュラム
スマホ・PCどちらでもOK：好きな時間に学習できる
料金は一切ナシ：0円でAIスキルが身につく

目的に合わせて選べる「AI副業」「AI転職」「AI活用」の3コースを用意。副収入・キャリアチェンジ・日常の生産性アップまで、あなたのゴールに合わせてAIを学べます。

会員登録はカンタン30秒で完了します。まずは公式LINEから、無料でAI学習をスタートしましょう！

公式LINEから学習をスタート

この記事を書いた人

WithCode 編集部

WithCode（ウィズコード）は「目指すなら稼げる人材」をビジョンに、累計400名以上のフリーランスを輩出してきた超実践型プログラミングスクールです。150社以上の実案件支援を特徴にWeb制作・Webデザインなどの役立つ情報を現場のノウハウに基づいて発信していきます。