SEOも考慮したSWELLの画像サイズまとめ【アイキャッチ、ファビコン、ロゴ、メインビジュアル】

この記事では、WordPressテーマ「SWELL(スウェル)」の画像サイズと設定方法を、わかりやすく一覧にまとめてご紹介します。

アイキャッチ画像サイトアイコン(ファビコン)NO IMAGEOGPロゴコンテンツヘッダーメインビジュアルなどについてです。

WordPressやSWELLの推奨サイズ、SWELL公式サイトの使用サイズ、そのほかの知見からまとめています。

suya

画像サイズは、見た目だけでなく、ページ表示速度やSEOに影響します。

なるほどくん

なるほど!適切なサイズにしたいですね。

この記事でできること
  • 公式の推奨サイズがわかる
  • ページ表示速度を測る「PageSpeed Insights」で「適切なサイズの画像」と評価されやすいサイズがわかる
この記事を書いた人

suya

  • 前職は大手IT企業
  • マーケターエンジニアの両方を経験
  • 月1億円のWeb売上
  • セキュリティの専門家(国家資格
  • 前職は大手IT企業
  • マーケターエンジニア
  • 月1億円のWeb売上
  • セキュリティ国家資格

この記事を最後まで読めば、SWELL(スウェル)の適切な画像サイズと設定方法がわかります。

ぜひ最後まで進めてみてください。

完了している必要のある事前準備

すでに途中まで進めている人は、目次から該当箇所に飛ぶこともできます。

目次

SWELL(スウェル)」の推奨サイズまとめ

最初にSWELLの画像サイズをまとめておきます。

黄色下線のサイズがおすすめです。

スクロールできます
画像サイズ根拠
アイキャッチ画像1200×630px(webp推奨)SNS推奨
800×420px程度ページ表示速度・SEO優先(PC)
横幅600px(SP)ページ表示速度・SEO優先(SP)
サイトアイコン512×512px(png推奨)WordPress推奨
NO IMAGE画像1200×630pxOGP(SNS推奨)と同じ
横幅1600pxSWELL推奨(大きい)
OGP画像1200×630pxSWELL推奨&SNS推奨
コンテンツヘッダー画像横幅1600pxSWELL公式サイト
横幅1280pxページ表示速度・SEO優先
ロゴ画像600×135px程度(png推奨)ページ表示速度・SEO優先
1600×360pxSWELL公式サイト(大きい)
メインビジュアル1600×900pxSWELL公式サイト
横幅1280pxページ表示速度・SEO優先

詳しい説明や設定方法は、以下をご覧ください。

画像・動画の準備がまだの方は、後で設定するために、本ページをブックマークしておきましょう。

1) アイキャッチ画像

アイキャッチ画像とは、各記事に設定する画像です。

  • 記事内のトップ画像として表示することができます。
  • 記事のサムネイル画像(記事一覧、記事スライダー、ピックアップバナーなど)として利用されます。
  • 記事をSNSでシェアした際の画像として利用されます。

投稿・固定ページの編集画面で、アイキャッチ画像を設定できます。

WordPressテーマ「SWELL(スウェル)」の編集画面でアイキャッチ画像を設定
投稿・固定ページの編集画面で、アイキャッチ画像を設定

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

アイキャッチ画像の推奨サイズは「1200×630px」です。

FacebookやTwitterなどのSNSにシェアされた際にきれいに表示されるサイズです。

「1280×670px」にすると、SNSシェア時に上下が少しカットされます。

  • ページ表示速度・SEOを優先したい場合は、「800×420px」などにしてください。
  • 画像を圧縮したり、「.webp」形式に変化したりすることで、ファイルを軽くすることをおすすめします。

2) サイトアイコン(ファビコン)

サイトアイコンとは、ブックマークやブラウザのタブに表示されるアイコン(ファビコン)のことです。

サイトアイコン(ファビコン)
サイトアイコン(ファビコン)

サイトアイコン(ファビコン)の推奨サイズ

サイトアイコン(ファビコン)画像の推奨サイズは「512×512px」、推奨形式は「.png」です。

これは、WordPress(ワードプレス)本体の推奨サイズです。

  • 自動的に各ブラウザ向けのリサイズ画像が作成されるため、1つの画像サイズをアップロードすれば大丈夫です。
  • 画像形式は透明・透過などが設定できる「.png」を推奨します。

サイトアイコン(ファビコン)の設定方法

左メニューの[外観][カスタマイズ]をクリックして、「カスタマイザー」を開きます。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズ(カスタマイザー)を開始
[外観]→[カスタマイズ]をクリック

カスタマイザー」が起動したら、左メニューで設定していきます。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズ(カスタマイザー)画面
「カスタマイザー」画面

[WordPress設定][サイト基本情報]を開き、サイトアイコンを変更します。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのWordPress設定-サイト基本情報
WordPress設定 – サイト基本情報

3)NO IMAGE画像

NO IMAGE画像」は、アイキャッチ画像が設定されていない記事で表示されるデフォルトのサムネイル画像です。

サムネイル画像とは、以下のようなケースで利用されるものです。

サムネイル画像の用途
  • 新着記事
  • 人気記事
  • 関連記事
  • 記事スライダー
  • ピックアップバナー

NO IMAGE画像の推奨サイズ

NO IMAGE画像の推奨サイズは「1200×630px」です。

OGP画像の推奨サイズと同じ「1200×630px」を利用することをおすすめします。

  • SWELL推奨サイズは「横幅1600px以上」ですが、サムネイル画像にそこまで解像度は不要です。
  • ページ表示速度を測る「PageSpeed Insights」の「適切なサイズの画像(Properly size images)」に影響します。

NO IMAGE画像の設定方法

外観カスタマイズ(カスタマイザー)から[サイト全体設定][NO IMAGE画像]を開き、画像を変更します。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのサイト全体設定-NO IMAGE画像
サイト全体設定 – NO IMAGE画像

4) OGP画像

OGP画像」は、アイキャッチ画像が設定されていない記事で表示されるデフォルトのSNSシェア画像です。

トップページをSNS(Twitter、Facebookなど)でシェアされた際にも表示されます。

OGP画像の推奨サイズ

OGP画像の推奨サイズは「1200×630px」です。

SWELLでは、FacebookやTwitterなどのSNS推奨サイズである「1200×630px」を推奨しています。

NO IMAGE画像と同じ画像を利用することをおすすめします。

OGP画像の設定方法

OGP画像を設定するには、SEOプラグイン「SEO SIMPLE PACK」を利用します。

[SEO PACK][OGP設定]を開き、画像を変更します。

WordPressプラグイン「SEO SIMPLE PACK」のOGP設定
「SEO SIMPLE PACK」でOGP画像を設定

5) コンテンツヘッダー画像

コンテンツヘッダーは、固定ページなどで利用される記事タイトルの背景画像です。

WordPressテーマ「SWELL(スウェル)」のコンテンツヘッダー(例)

コンテンツヘッダー画像の推奨サイズ

コンテンツヘッダー画像の推奨サイズはありませんが、SWELL公式サイトでは「横幅1600px」が利用されています。

画面いっぱい(フルワイド)で利用されるため、解像度が大きいほうがいいでしょう。

最低でもSD画質である「横幅1280px以上」にすることをおすすめします。

コンテンツヘッダー画像の設定方法

コンテンツヘッダーはデフォルトOFFなので、ONに変更した際に設定します。

コンテンツヘッダーを有効にするには、タイトル位置の設定を[コンテンツ上]に変更します。

  • 投稿・固定ページの全体設定は、「外観カスタマイズ」の[投稿・固定ページ][タイトル]で変更(詳細
  • 各記事の単体設定は、「投稿」や「固定ページ」の「表示の上書き設定」で変更(詳細

外観カスタマイズ(カスタマイザー)から[サイト全体設定][コンテンツヘッダー]を開き、画像を変更します。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのサイト全体設定-コンテンツヘッダー
サイト全体設定 – コンテンツヘッダー

画像の準備がない場合は、[オーバーレイカラーの不透明度]を「1」にして、[カラーオーバーレイ]を変更すれば、画像なしでコンテンツヘッダーを利用できます。

suya

このサイトも画像なしで固定ページにコンテンツヘッダーを利用しています。

6)ロゴ画像

ロゴ画像とは、ヘッダーなどに表示されるサイトアイコンやサイト名(サイトタイトル)の画像です。

WordPressテーマ「SWELL(スウェル)」のヘッダーロゴ(公式の例)
ホワイト色(左)と通常色(右)

ロゴ画像の推奨サイズ

ロゴ画像の推奨サイズはありませんが、SWELL公式サイトでは「1600×360px」が利用されています。

ただし、デザイン重視よりも速度重視の場合は、「600×135px」程度にしておくのがおすすめです。

  • PageSpeed Insights」の「適切なサイズの画像(Properly size images)」に影響します。

ロゴ画像が大きく表示されることは少ないため、ページ表示速度を重視するならサイズを下げておきましょう。

  • 画像形式は透明・透過などが設定できる「.png」を推奨します。(背景透過)
  • 通常色ホワイト色の 2 種類を準備することをおすすめします。

ロゴ画像の設定方法

外観カスタマイズ(カスタマイザー)から[ヘッダー]を開き、画像を変更します。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのヘッダー
ヘッダー

7) メインビジュアル(トップページ)

メインビジュアルとは、トップページ上部に表示される画像・動画です。

メインビジュアルの推奨サイズ

メインビジュアル画像・動画の推奨サイズはありませんが、SWELL公式サイトでは「1600×900px」が利用されています。

最低でもSD画質である「横幅1280px以上」にすることをおすすめします。

SWELLは画面幅が600pxでスマホ表示に切り替わるようになっているので、スマホ用のサイズは「横幅600px」がおすすめです。

メインビジュアルの設定方法

外観カスタマイズ(カスタマイザー)から[トップページ][メインビジュアル]を開き、画像・動画を変更します。

トップページ – メインビジュアル

この記事のまとめ

デザインテーマ「SWELL」の各種画像サイズを見てきました。

画像を変更するだけでオリジナル性が出ますが、サイズが大きいとページ表示速度・SEOに影響するため注意しましょう。

なるほどくん

画像はココナラ が便利ですね。

SWELLの外観カスタマイズ(カスタマイザー)のより詳細の使い方は、以下をご覧ください。

導入するだけでおしゃれ(スタイリッシュ)なデザインになる「SWELL(スウェル)」を、あなたのサイト(ブログ)に導入しましょう。

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

\ おしゃれで簡単 /

\ 購入から導入まで /

\ 記事テンプレート付き /

デザインを人に頼みたいなら、「ココナラ(coconala) 」でプロにお任せしましょう。

以下のリンクから、SWELLカスタマイズを検索できます。

\ SWELLをカスタマイズ /

アクセスや収益をUPさせるノウハウ紹介

実際の経験を元に、効果のあった施策をまとめました。

よかったら見ていってください。

ドメインパワーUPでSEOに効く被リンク獲得リスト

被リンクというと、ブラックなやり方を想像される方が多いかもしれません。

しかし、多くのサイトを分析してみると、みんな使っている登録サイトが存在することがわかりました。

ドメインパワーがSEOに重要な地位を占める現状では、自然なホワイトリンクの獲得戦略が欠かせません。

実際に既存サイトでも大きな効果を上げることができたので、ここでご紹介したいと思います。

リンクフリー
URLをコピーする
URLをコピーしました!

コメント

コメントする

目次
閉じる