おもろいことしかやらない

🗣: バイクに乗ったり、ものづくりしたり、ひたすら寝たり。

WordpressでSEOの環境を変えた話。

こんばんは。圧倒的にアウトプットが減ったもので、リハビリがてら業務で触れたものをはざ喰い的に紹介します。

※所感は個人のものなので、根拠としてあてにしないでください。また、諸事情により脚色部分があります。

改修から3ヶ月間でユーザーが200%超える月があったり、検索順位が4枚目から2枚目に上がった時の施策を書きます。

医療系のサイトの対応だったので、コンテンツの内容の専門性は問いません。

GoogleAnalyticsの画像
ユーザーが増えました

  1. サイトマップを改築する
  2. 正しい降順・用法でhtmlタグを使用する
  3. 正規リダイレクトを設定する
  4. インデックスの設定を更新する
  5. 膨大なアセットは最適化する

オプション コンテンツの拡充

1. サイトマップを改築する

最初の構造として、採番している命名のページはあるものの連番になっていなかったり、そもそもルートのディレクトリが違ったり、バラバラのパスを繋ぎ合わせてホームディレクトリに置いている状況でした。

/home
/about
/access-2
/course_category/internalmedicine
/course_category/medicalcheck
/medicalcheck/regularly

エンジニアとしてはこれでも気持ち悪いな…と感じますが、作った人の頑張りを蔑ろにしてはいけません。(戒め)

何がまずいか

今では強く言及されているポイントではないそうなのですが、サイト構造はクローラーフレンドリーにする事で検索エンジンの評価が変わるというものです。

クローラーアルゴリズムは、ホームディレクトリを拠点に、根から先へ伝うようにコンテンツのタイトルやディスクリプションを巡回するように作られていると言われています。

そこで意味や関連性のないキーワードをあげたり、コンテンツとして並列する事で、「ユーザーにとって情報収拾のしにくいページ」という評価を下されてしまうという事です。

具体的な解決法

指南役の方にアドバイスを頂き、下記のように改築しました。

/home
/about
/access
/department/internalmedicine
/department/medicalcheck
/medicalcheck/regularly

今回はテーマを購入して立てられていたので、ソースは落とさずGUIから丹念に設定を変えていきます。ソースコードはローカルに誘えないので、要素探しにgrepは使えません。ちなみにWordpressは経験なかったので調べました。褒めてェ…!

今回はAll in One SEOというプラグインを使っていたので、そこに配置されている.htaccessを改変します。

<IfModule mod_rewrite.c>
<b>RewriteCond %{THE_REQUEST} ^.*/index.(htm|html|php)
# medical_checkのパスからカテゴリーの健康診断ページを呼び出す
RewriteRule ^medical_check/(.+)$ http://mejiroekimae.com/course_category/medicalcheck [R=301,L]</b>
</IfModule>

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

太字が追加部分ですが、脚色してあります。 コピペで設定すると、間違った場合にキャッシュを持って正しいルートでの呼び出しに404で応答する可能性があります。公害になってしまうので、キャッシュを綺麗にするプラグインを入れるか慎重に調べて作業しましょう。

親を変更できないページについては、無理やり特定のパスの呼び出しがあった時に健康診断ページが呼ばれるという変更を施しました。 また、URL/index.htmlなどで/移行のないページに遷移するというのは意識的にトップページはやった方が良いという事で、改めて設定しています。

2. 正しい降順・用法でhtmlタグを使用する

Wordpressはデフォルトでロゴにh1をあててくれます。 おそらく多くのテーマがそうなっていて、どのページを閲覧してもヘッダにあるh1が露出します。

何がまずいか

それに気づかず個別の固定ページでh1を使いマークアップすると、本来1ページにひとつだけの用法であるのにも関わらず、1ページで複数登場してしまうようになるのです。

正しいマークアップSEO効果があると言い伝えられています。(いにしえ感)

具体的な解決法

まずどのような関連でビューが呼ばれているのか把握します。 親ページ、子ページ、ページビルダー、固定ページ専用、 固定ページ専用(サイドバーなし)、ヘッダ、フッタなど…大小様々なhtml, css, jsが呼ばれているのです。Railsやってる人はビューのrenderを連想すると解釈しやすいかもしれません。

今編集したい階層は/home/about

→管理画面のGUIから見るとaboutの編集は"固定ページ"の下にある
→固定ページの設定はサイドバーなし
→外観>テーマの編集>No sidebar固定ページテンプレート(page-noside.php)
が実際に適用される

→GoogleChromeDeveloperツールで立ち上げて観察しているとヘッダも呼ばれている
→使われている特徴的なクラス名をチェックする(IDでも良い)
→適用されている要素から、外観>テーマの編集>テーマヘッダー(header.php)が適用されているとわかる

3. 正規リダイレクトを設定する

  1. で紹介した部分がありますが、こんなパスでもリンク側からするとどのように設定されるかわからないし、仮に同名のファイルが置いてあって表示されたらたまったものではありません。 ユーザーはトップページにアクセスしたと思っているのに、prefixが違うせいで404を返すのは粋ではないですよね。 ここは割愛してしまいます。

4. インデックスの設定を更新する

インデックスとは、1ファイルに割り当てられている読み込みの順序だと認識しています。

何がまずいか
  • サイトの表示に不必要なページを読み込んでしまい、サイト自体が重くなる。
  • ユーザーがアクセスできるコンテンツの一部として認識されてしまい、秩序がないとさらにマイナス評価になる可能性がある。
  • コンテンツとして機能していないページであるにも関わらず、サイトマップに認識されてしまう。
具体的な解決法

GUIぽちぽちです。No indexで不要なコンテンツを選択してください。

All in One SEOのインデックス設定手順の画像
All in One SEO>No indexの対象を決める

5. 膨大なアセットは最適化する

適所適材の素材を扱いましょうという事です。 htmlの表示は素材(厳密にはhtmlタグ)→css類の順で描画されるので、 でかい画像を読み込んでリサイズすることは無駄感があります。

スマホコンテンツなどには適切にviewportにあったサイズのものを使用するといいかと思います。 今回思いついたものは画像サイズを小さくするなどに止まりますが…

squooshは便利でした。画像の容量を小さくしてくれるツールですが、ものによっては7割以上軽くなりました。

(イラストは多色のPNG、写真類は解像度低めのjpgと分けてもよかったのかも…?)

developer.mozilla.org

squoosh.app

ざっと書き出しましたが、思い出したら更新します。

最近は生ことりんにご執心です。

シナモン文鳥オスの画像
この世の不純を愛らしさを持って平穏へ導く鳥の画像

圧縮してないです。可愛いので出来るだけ原寸大+高画質で見てください😇

コンテンツの拡充

チョットマッテネ