はじめに
前回の記事では、サーバー代をほぼ無料で利用したWordpressのブログ開設方法を紹介しました。
その際に設定したテーマは無料テーマで人気の「Cocoon（コクーン）」を使用しました。
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="90"><rect fill-opacity="0"/></svg>)
今回はそのCocoonでのSEO対策における設定などを紹介します。
ただ、この記事ではポチポチと設定をしてほしいのではなく、ちゃんとSEO対策とはどういう事をしているのかを理解してもらうことが重要だと考えて書いているので、手っ取り早く設定だけを確認したい人はこちらへ飛んで見てください。
また、最近は有料の「SWELL」というテーマをよく耳にするようになった気がします。
「無料より有料の方がいいだろう」、「よくおすすめされているから良さそう」、「なんかSEO対策とかデザイン性とかがいいらしい」など、根拠もない理由で有料テーマ購入をしている人が多くいる気がします。
「SWELL」やその他の有料テーマを否定しているわけではありません。むしろ自分も別のブログでは有料テーマを購入して使用しています。
ただ自分の観測上、なんとなくで周りに流されて購入している人が多くいる気がしているので、最後に軽くですが、比較というか有料を購入したほうがいい人なども説明しますので、最後まで見てください。
SEO対策とは
この記事を見に来てくれている時点で「SEO対策」というものはどういうことか理解しているかと思いますが、改めて確認のために説明します。
SEOとはSearch Engine Optimizationの略で、「検索エンジン最適化」などと呼ばれています。
検索エンジンを使用したマーケティング戦略の一つで、その手段・手法などをSEO対策などと言ったりします。
ざっくりいうと、Google検索などでなるべく上位に表示させるための戦略と思って大丈夫です。
上位に表示させるために、キーワードからヒットしやすいタイトルにしたり、Googleに評価してもらうためにサイトのスピードを早めたりなど様々な対策があります。
WordPressではテーマやプラグインによって、SEO対策ができる機能を備えたりして差別化を図ったりしています。
ただ、基本的にはだいたい同じことをやるので、無料だろうが有料だろうがやることはほとんど変わりないでしょう。
無料テーマ「Cocoon（コクーン）」のSEO対策
さて、今回は無料テーマの「Cocoon」でのSEO対策について紹介しますが、まずCocoonではどんな対策をしているのでしょうか。
公式のページで確認すると以下の内容を対応していると記載があります。
Cocoonでは、主に以下のような内部SEO施策を行っています。
・ページ高速化機能搭載（テーマ機能だけでPageSpeed Insights90点後半が取れる）
検索エンジン最適化（SEO） | Cocoon | WordPress無料テーマ より引用
・モバイルファースト（モバイルフレンドリー）
・ワンクリックでAMP対応
・ワンクリックでPWA対応
・PCとモバイルでソースコードが100％同じ完全レスポンシブ
・W3CのHTML5バリデーションのエラー0
・W3CのCSSバリデーションのエラー0
・基本的な構造化データタグの適用
・構造化データエラー0
・メタディスクリプション記入欄の設置
・HTMLアウトラインの最適化
「おそらくなんかやってんだろうけど、よくわからない」という人もいるかと思うので、ちゃんとどういう事やっているのかを説明します。
ページ高速化機能搭載
こちらの公式でも紹介しているので、ここではざっくりと概要だけ説明します。
Googleは「ページ表示の高速化」を評価するので、基本的にサイトやブログは高速化を目指すべきです。
Cocoonではその対策として、以下の対策で高速化を図っています。
- ブラウザキャッシュの有効化
- html, css, javascriptのファイル縮小化
- 画像の遅延読み込み
よく「wordpress プラグイン おすすめ」なんかで検索して出てくる記事に、画像を圧縮するための「EWWW Image Optimizer」やキャッシュの設定ができる「WP Super Cache」などが紹介されています。
Cocoonではテーマ自体で設定ができるので、そのようなプラグインは不要です。
おすすめだからといって闇雲にプラグインを入れるのはやめましょう。
高速化を目指しているのに、プラグインをたくさん入れてサイトやブログが重くなってしまっては本末転倒です。
自分はTwitterでよく言っていますが、有効にしているプラグインの意味をちゃんと説明できなければ入れる必要がないぐらいに思ってもらったほうがいいです。
というよりどの場面にも言えることですが、すべての出来事には理由があるのでちゃんと説明できるようにしましょう。
テーマの選定もそうですが、根拠のない判断・行動は注意しましょう。
モバイルファースト、AMP対応、レスポンシブ
ちょっと前後しますが、これらはまとめて説明します。
前提として、サイトのスマートフォンへの対応はSEO対策の1つとしてよく挙げられます。
Cocoonではモバイルファーストということで、できる限りモバイルに対応するようにしているそうです。
AMP対応と言って、モバイルページを高速に表示させるためのページを作成させる機能も対応していたり、PCとスマホのソースコードを変えずに見た目を変えるレスポンシブ対応などもされています。
詳細についてはこちらも公式で記載があるのでチェックしてみてください。
PWA対応
PWA（Progressive Web Apps）とはすごい簡単に言うと、ブラウザで見てるサイトをアプリのように扱える機能です。
本来はプラグインを入れたり、その他設定などが必要になりますが、Cocoonには最初からその機能が備わっているためプラグインが不要です。
参考：PWA（Progressive Web Apps）とは？PWAの機能と導入するメリットを解説
W3CのHTML5バリデーション、CSSバリデーションのエラー0
W3C（World Wide Web Consortium）とは、WWW（World Wide Web）で利用される技術の標準化を推進する国際的な非営利団体です。
その団体が「W3C Markup Validator」というHTMLやCSSの文法をチェックするツールを提供しています。
つまりCocoonでは、この文法チェッカーでエラーが0というテーマなので、Googleへの評価も上がるということです。
基本的な構造化データタグの適用＆エラー0
構造化データタグの適用というのは、HTMLで記載された情報を検索エンジンに理解してもらうようにしたものです。
普段ブロックエディタで執筆していると思いますが、HTMLへ変換される際はちゃんと意味のあるタグとして変換されます。
見出し2は h2 というタグで、リストは ul というタグなど、検索エンジンが単なる文字ではなく、意味のある文字（これは見出しなんだな、これはリストなんだな）と認識してくれるようになります。
記事では自分で見出しなどを設定しますが、サイト自体の構造化をCocoonはやってくれているわけです。
HTML 5 Outliner というチェックツールで確認してもエラーが0となっています。
メタディスクリプション記入欄の設置
メタディスクリプションと言って記事の説明文のようなものを設定できます。
これはSEO対策とてもよく設定するものですが、Cocoonでは自前で「SEOタイトル」「メタディスクリプション」「メタキーワード」を変更できる機能を備えています。
よく「All in One SEO」というSEO対策用のプラグインをよくみんなが紹介していますが、様々な機能があるがゆえに使用しない機能があったり、そもそもこのプラグイン自体がとても重いということで自分は非推奨としています。
Cocoonを使用していればまず不要ですので、「All in One SEO」を入れている人は削除しちゃいましょう。
HTMLアウトラインの最適化
構造化データタグの適用と少し似た話ではありますが、Cocoonではなるべく最適化したアウトラインを表示するようにしているようです。
以下は投稿ページのアウトラインの例です。
SEO対策の4つの設定をしよう
さて、これまでCocoonがデフォルトで用意しているSEO対策について説明をしましたがいかがでしたでしょうか？
無料テーマなのに十分すぎるほどの対策がされています。むしろSEO対策が強いテーマだと思います。
では、これから具体的にそのデフォルトで用意している設定方法を紹介します。
headタグの設定をしよう
最初にheadタグの設定をしていきましょう。
こちらは基本的にデフォルトで設定がされていると思いますが、説明も兼ねて紹介したいと思います。
まずは、管理画面のCocoon設定からSEOというタブを選択して設定画面を表示します。
すると、headタグ設定と日付の設定が出てきます。
ここではざっくりと以下の設定をすることができます。
- canonicalタグの追加
- 分割ページにrel=”next”/”prev”タグの追加
- noindexの設定
- JSON-LDを出力
- 表示する日付の設定
1つずつ説明していきます。
canonicalタグの追加
まずcanonicalタグとは何でしょう？
canonicalタグはサイト内で評価される正規URLをGoogleの検索エンジンに認識させるタグのことです。
以下のURLを見てください。
https://asamiku.com
https://asamiku.com/https://asamiku.com/index.php最後にスラッシュ（/）が付いていたり、実際にサーバーに配置されているファイル指定をしたりしていますが、表示されるページは同じです。
ただ、スラッシュが付いている、index.phpが付いているというので、違うURLと判断して検索エンジン別ページと評価してしまいます。
そこで、これらのページの評価をまとめGoogleから正しい評価を受けるために、canonicalタグを追加して正規化というものが必要になるのです。
長くなってしまいましたが、そういうタグなので、デフォルトのままチェックをつけた状態としておきましょう。
分割ページにrel=”next”/”prev”タグの追加
サイトによっては、1つのコンテンツが複数ページに分かれているものがあると思います。
各ページに、「rel=”next”」と「rel=”prev”」を指定することで、各ページの関係を検索エンジンに正確に認識してもらうためのタグです。
複数記事を使用しないのであればOFFにしてもいいですが、デフォルトのチェックのままでも問題ないでしょう。
noindexの設定
noindexとは検索エンジンにサイトをインデックスさせないようにするためのタグです。
ページが存在していてもGoogle検索に出てこないようになります。
こちらはデフォルトでその他のアーカイブページと添付ファイルページがnoindex設定にされています。
カテゴリやタグのページも設定したい場合はチェックを入れておきましょう。
JSON-LDを出力
JSON-LDとは構造化データをJSONという形式で表したデータです。
構造化データとは、ページに関する情報やそのコンテンツを分類するために標準化されたデータ形式です。
構造化データを提供してもらうと、Googleはそのページをより正確に理解できるようになるので、ページがより評価されやすくなります。
ちょっと小難し話だったのでざっくりまとめると、Googleがページを理解しやすいようにJSON-LDという構造化データを作るかどうかという設定です。
作らないメリットはそんなに見当たらないので、こちらもデフォルトのままチェックとしておきましょう。
表示する日付の設定
こちらはSEOに直接関係あるかは怪しいですが、ページに更新日などを表示させることでコンテンツの鮮度をアピールすることができるので、設定しておきましょう。
サイトを高速化しよう
次にサイト高速化の設定です。
こちらも管理画面のCocoon設定から高速化というメニューを選択します。
ここでは以下の設定をしていきます。
- ブラウザキャッシュの有効化
- ファイルの縮小化
- 画像のLazy Load
ブラウザキャッシュの有効化
設定の説明に書いてあるとおりですが、有効化させることで、2回目以降のページ読み込みスピードが軽減されます。
ファイルの縮小化
こちらも説明にある通りですが、余分な改行やスペースを削除することでファイル自体の容量を減らします。
html, css, javascriptの全てにチェックを入れておきましょう。
画像のLazy Load
Lazy Loadとは、これは遅延読み込みのことです。
普通サイトやブログ記事を開くときに文章や画像など、すべてのコンテンツが表示されるまでページを読み込んでいます。
ただ、画像などの重いファイルの読み込みを待っていると、ページの読み込み自体が遅くなってしまいます。
そこでLazy Load（遅延読み込み）の設定をすることで、最初に表示させる箇所だけを読み込ませてページ表示の通信量を減らし高速化することができます。
他の画像は表示するときに遅延読み込みさせて表示しています。
ここでは画像以外にもGoogleフォントやアイコンフォントの設定もできるのでチェックを入れておきましょう。
変更を保存して完了となります。
記事を投稿するときにタイトルなどでSEO対策をしよう
次はテーマ自体の設定というよりは、記事を投稿するときに設定するものです。
Cocoonでは投稿ページや固定ページの一番下に「SEO」という箇所が用意されています。
ここの「SEOタイトル」と「メタディスクリプション」を設定しましょう。
ここには、検索エンジンに表示させたいタイトルとコンテンツの説明を入力します。
ここに入力したテキストが記事のタイトルに優先してタイトルタグ「<title>」に挿入され、Googleなどの検索エンジンの結果に表示されます。
ただ入力欄の説明にも書いてあるとおり、未入力だった場合はSEOタイトルは記事タイトルが、メタディスクリプションは抜粋の内容が反映されます。
ただ、適正な文字数を見ながら設定ができるので、ぜひ使用しましょう。
不要なプラグインを削除してサイトを軽くしよう
最後はCocoonのSEO対策ではないですが、サイトを軽くするというSEO対策にはなるのでしっかりやりましょう。
ところどころで不要なプラグインの説明をしましたが、Cocoonにはテーマ自体で設定できる項目があるため、プラグインで設定しているものが不要だったりします。
例えば「All in One SEO」や「EWWW Image Optimizer」などがそうですね。
最初の方にも伝えましたが、なにか説明できないプラグインは1つも無い状態にしましょう。
また、「Jetpack」といったPackage系のプラグインも注意です。
こういうプラグインは色々な機能が備わっていて大変便利ではあるのですが、プラグイン自体がとても重いのと、使わない機能などもあり無駄なコストが増えてしまいます。
プラグインは自分が必要と思った機能に絞って最低限のものを入れるように心がけるといいでしょう。
有料プラグインSWELLとの比較
さて、以上でCocoonのSEO対策について説明をしましたが、よく有料プラグインの「SWELL」と比較してどうなの？といった意見があったりします。
結論から言うと、無料のCocoonでも十分です！SEO対策においての違いはほとんど無い！マネタイズができていないのに1万円も超える有料テーマを使う必要はない！
というのが自分の意見です。
そもそもCocoonとSWELLは何が違うのということですが、詳細の比較はこちらの記事がとてもわかりやすいのでこちらを見てください。
ざっくりと違いがあるとすれば、以下の内容かなと思います。
- デザイン性
- ブロックエディタで使用できるブロック（Cocoonはショートコードを使用することが多い）
なので、SEOの観点からするとSWELLのほうがとても優れているとは言えないかと思います。
ただ、デザイン性に関しては有料だけあって、やはりSWELLのようが良いとは思います。
SWELLがおすすめされる理由
よくTwitterなどでSWELLを激推している人がいます！
確かにデザイン性はいいし、とても魅力的なテーマだとは思いますが、みんながみんな使ったほうがいいとは思いません。
SWELLを買った人になんで買ったのか、Cocoonと比べて何が優れているかを聞いたところ、まともに答えてくれた人は少なかったです。
ちゃんと買ったほうがいい人と買わないほうがいい人がいると思います。
誰にでもおすすめしてくる人はアフィリエイトのために全員におすすめしているんだと思います。
（中にはほんとに気に入って純粋な気持ちでおすすめしてくれている人もいます）
人の意見よりちゃんと自分に必要かどうかを考えた上で検討してください。
有料プラグインを買わないほうがいい人・買ったほうがいい人
CocoonとSWELLでは基本的にデザイン性が大きく異なり、その他は特に大きな違いは無いと思います。
以下の全てに当てはまる人は有料テーマであるSWELLの購入を検討していいと思います。
- ブログでマネタイズができている
- Cocoonのデザイン性に不満がある
- CSSをいじってデザインを変えることが全くできない
逆に全てに当てはまらないならCocoonで十分だと思います。
よく自己投資だとかいっておすすめしてますが、自己投資するならもっと別の自分のスキルとなるものに投資しましょう。
HTML/CSSやWordpressの技術本を買い、勉強してスキルを身に着け、自分でカスタマイズできるようにしたりするのが自己投資です。
お金をかけて有料テーマを買ってるのは自己投資というよりはより良い商品を買ってるだけで、だたの買い物に過ぎません。
周りに流されずちゃんと自分の判断・根拠をもって行動しましょう。
さいごに
さて、今回はWordpressの無料テーマ「Cocoon」のSEO対策についてご紹介しました。
ここまで読まれた方でしたら、Cocoonが人気な理由がわかったかと思います。
無料テーマなのに必要十分、いやおそらく有料級の機能が揃っていると感じれたかと思います。
そして最初に言ったとおり、自分は有料テーマを否定してるわけではありません。
むしろ別のサイトではSWELLを検討していますし、自分が別で運用しているブログは有料テーマを使用しています。
自分でデザインができないので装飾は有料テーマに任せようという理由で採用しました。
くどいようですが、購入をしたい人はちゃんと自分で判断してから買ってください！
再度掲載させていただきますが、CocoonとSWELLの違いは以下の記事を見てください。
自分が伝えたいのは理由・根拠も説明できずに、人の意見で決断・行動するのをやめましょうというということだけです。
若干話しがそれましたが、CocoonのSEO対策はこれで理解できたかと思います。
参考になったら幸いです！
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="67"><rect fill-opacity="0"/></svg>)
コメント