デザインツール Canva が学べる「キャンバス大学」に行く≫

SWELLの高速化(SEO)に関する設定とエディター設定を画像付きで解説

SWELLの高速化(SEO)に関する設定とエディター設定を画像付きで解説

SWELLは、その洗練されたデザインと高速な動作で多くのブロガーやウェブサイト運営者から支持されているWordPressテーマです。しかし、ただ導入するだけでは、その真価を最大限に引き出すことはできません。特に、検索エンジンの上位表示を目指す上で不可欠なSEO設定と、日々のコンテンツ作成効率を左右するエディター設定を適切に行うことが重要です。

そこで本講座では、SWELLのSEOに関する設定と、日々のブログ執筆を快適にするエディター設定について、画像を交えながら徹底的に解説します。

本講座は下記ロードマップ「STEP5:ブログ・サイトを作成する」対象講座です

講座 目次

SWELLにおけるSEO設定の重要性

SWELLにおけるSEO設定の重要性

なぜSWELLでSEO設定を行うことが重要なのでしょうか?SWELL自体がSEOに強いテーマであると言われる理由は、その軽量性や構造化データへの対応、そしてAMP対応など、Googleが推奨するウェブサイトの要素を多数備えているからです。ただし、それらの機能を最大限に活かすためには、きちんと初期設定を行う必要があります

SWELLがSEOに強いと言われる理由

SWELLがSEOに強いとされる主な理由をいくつかご紹介します。

  • 高速表示: ページの読み込み速度は、Googleのランキング要因の一つです。SWELLは軽量で高速な表示を実現しており、ユーザー体験の向上にも貢献します。
  • 構造化データへの対応: 記事、パンくずリスト、レビューなど、様々な構造化データに標準で対応しています。これにより、検索エンジンがコンテンツの内容をより深く理解し、リッチスニペットとして表示される可能性が高まります。
  • モバイルフレンドリー: レスポンシブデザインに優れており、スマートフォンやタブレットなど、あらゆるデバイスで適切に表示されます。モバイルフレンドリーは、今日のSEOにおいて不可欠な要素です。
  • AMP対応: 簡単にAMP(Accelerated Mobile Pages)に対応させることができます。AMPはモバイルでの表示速度を劇的に改善し、ユーザー体験を向上させます。
  • 内部リンクの最適化: 関連記事表示やパンくずリストなど、内部リンクの最適化をサポートする機能が豊富に用意されています。

これらのSWELLが持つ強みを活かすためにも、次で解説する具体的なSEO設定をしっかりと行いましょう。

【SWELL設定】SEOに関する設定箇所と最適化する方法

さっそく設定方法について案内しますが、前提としてすべての項目を見直す必要はありません。実際にSEOで月間5万以上のユーザーを獲得している当サイトのおすすめ設定をご紹介します。

まず、SEOに関する設定をするにはワードプレス管理画面の左メニュー「SWEL設定」にアクセスします。

3.SWELL設定

以降は、項目ごとに設定方法を案内します。

高速化設定

「SWELL設定」から「高速化」タブを選択します。ページの表示速度はSEOにおいて非常に重要な要素であり、SWELLにはそのための強力な機能が備わっています。

キャッシュ機能

キャッシュとは、Webブラウザなどが、一度表示したウェブページのデータを一時的に端末に保存しておき、次回同じページにアクセスした際に、高速で表示するための仕組みです。

つまり、できるだけキャッシュを有効にした方がサイト読者がページを開くスピードが早くなりますので、で下記の通りすべてにチェックを入れます

キャッシュ機能

ファイルの読み込み

ウェブページのレイアウトや装飾を指定する「CSS」と呼ばれるファイルの読み込み設定です。表示速度をできるだけ早くするために、必要なファイルだけ読み込むよう、以下の通り設定しましょう。

ファイルの読み込み

遅延読み込み機能

ページをできるだけ早く表示するための機能で、コンテンツの遅延読み込み、画像等のLazyloadを設定します。下記通りに設定しておきましょう。

遅延読み込み機能
スクリプトの遅延読み込み

スクリプトと呼ばれる外部の機能拡張用ファイルを遅延読み込みするための設定です。よくわからない方は「スクリプトを遅延読み込みさせる」をONにし、下記テキストをコピーして貼り付けましょう。(使っていないスクリプトもあると思いますが、登録してもデメリットはありません)

■遅延読み込み対象にするスクリプトの追加キーワード
googletagmanager.com/gtag/js,
gtag(,
clipboard.min.js,
set_urlcopy.min.js,
luminous.min.js,
set_luminous.min.js,
rellax.min.js,
set_rellax.min.js,
prism.js,
hcb_script.js,

スクリプトの遅延読み込み

ページ遷移高速化

初心者の場合「使用しない」のままにしておきましょう。(環境によっては逆に遅くなってしまうため)

ページ遷移高速化

構造化データ

「SWELL設定」から「構造化データ」タブを選択します。なお、この構造化データとはWebサイトの情報を検索エンジンに理解しやすく伝えるために使用するデータを指します。サイトの信頼性を向上させて検索順位を上げてくれる設定となりますので、特に法人の方は必須で入力しましょう。

■入力例
運営組織の名前:キャンバス大学
運営組織のURL:https://canvas-college.com/
運営組織の別名:canvas-college
運営組織のロゴ:キャンバス大学のロゴ
運営組織の設立者:あずま学長
設立者のURL:https://blog.canvas-college.com/lp/guidance/
※法人の方は会社名がないかと思いますが、上記のように組織を設定して紹介用のページを作成すれば記載できます

構造化データ

jQuery、Font Awesome、機能停止、停止コード、リセット

SWELLメニューには他にもjQuery、Font Awesome、機能停止、停止コード、リセットといったメニューが用意されていますが、こちらはすべて初期設定のままで構いません。変更すると思うように動作しない、デザインが変更されてしまうなどの悪影響がありますので、初心者の方は変更しないよう注意してください。

以上でSWELLのSEOの関する初期設定は完了です。他にやるべきSEO設定は別途プラグインが必要となりますので、本ページの最後に次の講座として紹介しています。

【エディター設定】記事内の装飾デザインに関する設定

SWELLはWordPressのブロックエディター(Gutenberg)に最適化されていて、吹き出しやFAQ、ボーダーやマーカーといった装飾をボタン一つで実現できます。ただし初期設定の配色がサイトで表示したい色と異なる場合も多いため、こちらの設定で変更しておきましょう。

まず、SEOに関する設定をするにはワードプレス管理画面の左メニュー「SWEL設定」にアクセスします。

4.エディター設定

以降は、項目ごとに設定方法を案内します。

カラーセット

カラーパレット(ワードプレス管理画面上で文字や背景の色を指定する際に使うカラー一覧)、リスト、キャプションブロック、Q&A、テーブルの配色を設定できます。
メインカラーとサブ(アクセント)カラーを登録しておくと使いやすいのでおすすめです!

カラーセット

上記はカラーパレット設定の画面イメージ

ボーダーセット

下記のようなボーダーパーツの色を設定できます。最初からメインカラーが設定されていますので、そのままでも構いません。

ボーダーセット

マーカー

下記のようなマーカーの色を設定できます。こちらもできればメインカラーやサブカラーを入れておくとデザインがまとまります。

マーカー

※メインカラーやサブカラーは濃い目のカラーであることが多いと思いますがマーカーは文字と重なってしまうため、薄めのカラーに調整して登録しましょう。

ボタン、アイコンボックス、吹き出し

ボタン、アイコンボックス、吹き出しの色を設定できます。先ほどのマーカー同様にメインカラーとサブカラーを設定しておくことをお勧めします。

ボタン、アイコンボックス、吹き出し

カスタム書式

文字色、背景、マーカーなどを組み合わせて一発で呼び出せるカスタム書式を設定できます。よく設定する組み合わせを登録しておくと、効率よく記事作成できるようになります。
(初心者はあまり使わないため、あとから設定してもOK)

カスタム書式

その他

「ブログカード」と呼ばれる、サイト内の別ページや外部サイトへのリンクを見やすく誘導するための機能が用意されており、そのデザインを変更できます。
また、「引用」についても同じようにデザイン変更することが可能です。

その他

以上、これで「エディター設定」についても終了です。これでSWELLでやるべき初期設定がすべて完了しました。

SWELL初期カスタイマイズが完了したらやること

どうしても急いでいる方はこの時点で記事を作成してブログやサイトを本番公開しても構いませんが、収益化していきたならまだやるべきことが残っています

サイト本番公開までの残タスク

今後読者が増えていけば広告を掲載していくことになると思いますが、読者だけではなく企業担当者も見るサイトとして、一定の体裁を整えておくべきです。つまり、プライバシーポリシーやお問い合わせページを用意します。

また、収益化にあたってより検索上位に表示する、SNSでシェアされたときに見やすくするなどの工夫をするためにプラグインと呼ばれる外部機能を追加していきます。

残タスク一覧

  1. プライバシーポリシーページの作成
  2. お問い合わせページの作成
  3. プラグイン設定
  4. 記事作成

それぞれ別途講座を用意していますので、次はプライバシーポリシーページの作成を案内いたします。

SWELL設定、エディター設定に関するよくある質問 (FAQ)

SWELLはSEOプラグインと併用すべきですか?

SWELLは単体でも十分なSEO機能を備えていますので、機能が干渉してしまう外部プラグインの利用はおすすめできません。ただしSWELLと同じ開発者が提供しているプラグイン「SEO SIMPLE PACK」は入れておくとさらにSEOが強化されます。

SWELLの高速化設定をしても、PageSpeed Insightsのスコアが伸び悩むのですが?

A3: SWELLの高速化設定で通常高いスコアが出るはずですが、それでもスコアが伸び悩む場合は、テーマ以外の以下要因が考えられます。

  • 画像ファイルの最適化: 画像のサイズが大きすぎると、どんなに高速なテーマでも表示速度は遅くなります。画像圧縮プラグインの導入や、WebP形式への変換などを検討しましょう。
  • サーバー環境: レンタルサーバーのスペックが低い場合、サイト全体の表示速度に影響が出ます。高速なサーバーへの乗り換えも検討してみてください。
  • 外部スクリプトの読み込み: Google Analyticsや広告配信サービスなど、多くの外部スクリプトを読み込んでいる場合、それらが表示速度を低下させる原因となることがあります。必要最低限に抑えることを意識しましょう。
  • プラグインの競合・過多: 多数のプラグインを導入している場合や、プラグイン同士の競合が発生している場合、サイトの動作が重くなることがあります。不要なプラグインは削除し、必要なプラグインのみを厳選しましょう。

次の講座はこちらです

まとめ

本講座で解説したSEOに関する設定とエディター設定を適切に行うことができましたか?きちんと設定すればあなたのウェブサイトは検索エンジンからの評価を高め、より多くの訪問者を引き寄せることが可能になりますよ!

それではまた次回の講座でお会いしましょう。

ブログキャンバスをマネしてサイト運営者になり、収入を増やしませんか?

現役のプロマーケター&サイト運営者が具体的なノウハウや手順を無料画像付きで解説している当サイト。

まずは月収5万達成までのロードマップを確認しよう!

  • URLをコピーしました!
講座 目次