こんにちはwebエンジニアのtakaです。
個人で運営している信長の野望 徹底攻略が180,000pvを達成したので、どのようなSEO対策を行なって達成できたのかをまとめていきます。
このサイトはデザイン・構築・アイコンやサムネの作成・データ入力・ライティングなど全て私一人で運営しているので、網羅的に情報をお伝えできるかと思います。
それではいってみましょう。
大前提:ユーザーのためになるサイトへ
まずユーザーのためになるサイトであることが最も重要です。
ユーザーの知りたい情報が網羅的に記載されていたり、見やすかったり、表示速度が速かったりなどユーザーの満足度が高くなるようにしていくことが重要です。
様々なサイトで自分のサイトのリンクがあったり、時間の経過でも検索順位が上がったりするので、こちらも今回記載していきます！
検索順位が上げるための施策
それでは具体的にどういった施策を行なったかみていきましょう。
ページ表示速度
まずはページ表示速度です。
ページの読み込み時間が1〜3秒の場合、離脱率は32%ですが、1〜5秒に増えると90%になり、1〜6秒では106%、1〜10秒では123%にまで上昇するという報告があります。
画像の圧縮
基本的に画像が表示速度を遅くさせる原因になりやすいです。
tinypngなどのサイトで画像を圧縮させましょう！
これはweb制作においては必ず行いましょう。
webpの利用
次世代の画像拡張子であるwebpを利用しましょう。
webpは容量が軽いです。
以下のように設定すると、webpを対応しているブラウザではwebpを表示し、対応していないブラウザはpngやjpgを表示します。
<picture>
<source type="image/webp" srcset="https://nobunaga-kouryaku.com/img/h1.webp" />
<img class="logo" src="https://nobunaga-kouryaku.com/img/h1.png" alt="信長の野望 徹底攻略" width="100%" height="100%" />
</picture>無料で画像をwebpに変換してくれるサービスがあるので
https://saruwakakun.com/tools/png-jpeg-to-webp/
HTMLのタグの数を減らす
1ページに1000 ~ 1500以上のHTMLのタグがあるとイエローカードです。
不要なdivタグなど削除しましょう。
また、スマホのハンバーガーメニューなどはdisplay: none;などで隠しておくのではなく、ajaxなどを利用し非同期で描画すると良いです。
私はLaravelを利用しているので、livewireを利用しています。
css・jsファイルをまとめる
同じコードの量であっても読み込むファイルの数は少ない方が良いです。
管理がしやすい程度にファイルをまとめましょう。
ロジックの処理時間の削減
Laravelを使っている場合になりますが、不要なServiceProviderを削除しましょう。
ログイン機能など利用していないのでコメントアウトしておきます。
また、n+1問題などがある場合処理が重くなるので解消しましょう。
画像の遅延読み込み
<img class="logo" loading="lazy" src="https://nobunaga-kouryaku.com/img/h1.png" alt="信長の野望 徹底攻略" width="300px" height="100px" />
loading=”lazy”を利用し画像の遅延読み込みを行いましょう。
この場合、widthとheightを設定し、画像が表示される要素のスペース明示的に確保しておきましょう。
gzip化
HTML・CSS・JSファイルをgzip化という圧縮方法で通信させましょう。
1行追加するだけの簡単設定なので、おすすめです。
jsにdeferを設定
jsファイルの読み込みにdefer属性を設定しましょう。
HTMLの解析をしながら同時にjsを読み込むことができるようになります。
機能の見直し
次はSEO対策となる機能や設定を見てみましょう。
meta情報の設定
初歩的ですがmeta情報を設定しましょう。
まずはここからです。
サイト内検索機能の作成
サイト内検索機能を作成しましょう。
サイトマップの作成
sitemap.xmlをURL直下に設置し、サイト内の全URLを記載しましょう。
googleさんがこのsitemap.xmlを利用して、私のサイトの全容を掴んでくれます。
https://nobunaga-kouryaku.com/sitemap.xml
jsonldの設定
各ページにjsonldを設定しましょう。
このページがどのようなページで何について書かれているかをgoogleさんに伝えることができます。
まさに恋文のようなものですね。
「今日は何の日？」欄を設置
更新があるように見えるため動的なコンテンツ
サイドバーにランダムな武将の情報を表示する機能
目次の作成
記事ページで目次を作成しました。
ページ内移動が楽になりユーザーにとって便利です。
サイト内回遊
サイト内回遊がしやすいように、メニューの内容を増やしたり、様々な箇所にサイト内の別ページへのリンクを設定しています。
バグの修正
以下のようなバグがある場合は、見つけ次第修正します。
- 存在しないページが検索されるバグ
- うまく情報が表示されないバグ
- リンク先がないバグ
ページトップに戻る機能
よく見かけますが、ページの右下にページトップに戻るボタンを設置し、ユーザビリティーを向上しています。
snsシェア機能
被リンクの数と質が重要です。
SNSでサイトを共有してもらうと良いので、SNS共有ボタンを作成しています。
httpでアクセスした場合、httpsにリダイレクトするように設定
大体この設定はされているかと思いますが、http://・・・でサイトにアクセスした際にhttps://・・・にリダイレクトするように設定しています。
検索順位が下がった要因
では、検索順位が下がった失敗談も記載しておこうと思います。
httpsのサポートの停止の放置
無料のret’s encryptというものでssl証明を行い、httpsのサポートを受けていています。
このret’s encryptは3ヶ月ごとに証明書を更新しなければなりません。
当初、自動更新にしていなかった（自動更新したつもりがうまく設定できていなかった）ため、証明証の期限切れでhttpsとしてサイトが表示されなくなりました。
検索順位など一時的に下がりました。
リンク切れ画像の放置
知っておきながら対応が煩雑で量が多いため、画像のリンク切れを放置しておりました。
厳密にこれが影響かはわかりませんが、アクセスが減少しています。
更新を行わない
数ヶ月更新ができない状態が続くと徐々にアクセス数や検索順位が悪くなっていきます。
毎日ではなくてもいいので適度に管理・更新していく必要があります。
まとめ
今回は、「検索順位が上げるための施策」と「検索順位が下がった原因」について記載しました。
意外とやることはたくさんあるんですね。
サイトを制作する際はこういったことを実施し、それをクライアントに伝えると喜んでくれます。
迷った場合は、page speed insightsの診断してもらうと、いろいろアドバイスがくるので、それを愚直にやると良いです。
今回書ききれなかったのですがもちろん記事も重要で、どういったキーワードが必要でとかトレンドは何でなど調べるツールがあるので、また紹介できればと思います！
細かく何を行なったか見たい場合は、こちらに記載しています！