サイト運用奮闘記（1）投稿・運用を優先した結果、作りの粗さが…
今回は、ホームページを運用して気になった不具合を見つけたことから始まった多数の修正・調整を行ったときの反省点についてまとめました。
職業柄、ホームページ制作だけではなく、ホームページの運用に関するアドバイスサポートをすることはあります。仕事では適切に相手に伝えられていても、実際に自分がホームページ運用をするときに「こうしておけば良かった」と思う反省点は沢山見つかるもので……。
ホームページの修正・調整を行うことになったきっかけ
先日キャッシュ周りの設定でチェックが甘く、ヘッダー周り・フッター周りでバグを発生させてしまったので、バグ修正後に何気なく、ページ表示速度チェックツール【PageSpeed Insights】（注1）でトップページ以外をチェックしたところ、『ユーザー補助』『おすすめの方法』『SEO』で100点未満になっている項目を発見、「公開・運用を優先したので、デバッグまではできていなかったなぁ…」と思ったので、これを機に《ホームページの全ページのデバッグ・修正》を実施しました。
(注)1…もはや「ページチェックツール」だと思うのです。
ホームページ運用チェック（1）全体的にページの設定周りを確認
まずは、「PageSpeed Insights」とChrome拡張機能「Web Vitals」を使用して、総合的にチェックしました。
PageSpeed Insightsの項目（「実際のユーザーの環境で評価する」は含まれない）
もし問題が見つかったら、それぞれ原因を調べて解決していきます。
「PageSpeed Insights」にヒントが書いているので、Google検索を使って調べていけば、具体的な解決方法も見つかりやすいと思います。
| チェック項目 | 発見される主な問題点 |
|---|---|
| ページ表示速度 | グリーンにならない。オレンジならタイミングによってあり得るし、体感で遅いとも感じにくいが、レッドだと体感的にも遅いと感じやすい。 各指標の説明が気になる人は「ビューを開く」をクリックすると各指標の説明を見ることができる。 (注)クリエイトアコードは事前にページ表示速度をグリーンにするために改修していたので、今回は問題にならなかったです。 (注)「Speed Index」だけがどうしてもグリーンにならないけど、ここもグリーンにするのは難しいと思っています（ちゃんとまとめた記事を投稿するので、ここでは省略します。「Wi-Fiを無効にしたスマートフォンで表示にストレスに感じていないのであれば問題ない」ということで！） |
| ユーザー補助 | Webアクセシビリティの項目。多くのユーザー・表示環境や状況で、ストレスなくコンテンツを利用できるようにするために評価する項目。 |
| おすすめの方法 | セキュリティや安全面、適切にコンテンツが作られているかを確認し、改善項目が見つかれば提案するための項目。 |
| SEO | 検索エンジン最適化の基本が守られているかを確認する項目。SEOを意識するなら、ここは100点にしておきたい。 |
Chrome拡張機能「Web Vitals」の項目
クリエイトアコードは事前に「Web Vitals」の各項目をグリーンにするために改修していたので、今回は問題にならなかったです。
もし、問題があったら、それぞれ何が原因なのかを調べて解決していきます。
Core Web Vitals
| チェック項目 | 発見される主な問題点 |
|---|---|
| Largest Contentful Paint（LCP） | 最も大きなコンテンツ（例：大きな画像）を表示するまでにどれくらいの時間がかかったのかを表す項目。 |
| Cumulative Layout Shift（CLS） | ユーザーがストレスに感じる「予期せぬレイアウトのズレ・崩れ（例：コンテンツがズレた結果、間違って広告をタップする）」を表す項目。 |
| First Input Delay （FID） | ユーザーが操作してからブラウザが応答するまでの時間を表す項目。 |
その他の重要な指標（Other Web Vitals）
| チェック項目 | 発見される主な問題点 |
|---|---|
| Interaction to Next Paint（INP） | ユーザーが操作をしたときに何らかのアクションを返す（例：ページ遷移までに時間がかかるとき、先に「クリックしたよ！」と伝える）までの時間を表す項目。 |
各項目の説明はweb.devの「Web Vitals」に記載されています。
ホームページ運用チェック（2）OGP設定・タイトルタグ・メタディスクリプションの設定確認
次に「OGP確認-ラッコツールズ」「TITLE ＆ META情報抽出-ラッコツールズ」「noindexありなしチェッカー」を使用して、OGP設定・タイトルタグ・メタディスクリプション・noindexありなしのチェックを行いました。
「ラッコツールズ」のツールは、クリエイトアコードがよく使用しているツールのため、ブログ内で何度か出てくるチェックツールです。便利なものが多いので、ぜひ使ってみてくださいね！（回し者ではありません笑。本当に便利で使っています！）
今まで、ブログ記事内で図で説明するのに必要だからと作成した画像以外、記事のOGP画像はブログ統一で使用している画像だったのですが、『アイキャッチ画像にも気を配ろう』というツイートを見たことと、今回の修正作業で「もう少しちゃんとしたのを作らないと駄目だよなぁ。見たら全部同じだもの…‥」と思ったので、今度ちゃんとしたものを作成して差し替えようと思います。
画像作成する時間が欲しいのと、記事数がまだまだ少ないとは言え、数十枚作ることになると思うので、まとまった時間ができたら……。
ホームページ運用チェック（3）SEOに関するチェック
ページ全体のチェックが終わった後、「職業的にSEO周りのチェックなしで良い訳ないよね？」と思ったので、SEO周りのチェックも始めたので、時間がかかることかかること……。
予めホームページ運用チェックシートでも作ってチェック項目、手順をまとめてから運用したら、そんなに負担じゃなかったと思うので、結構悔やまれますね……。
SEO周りのチェックは、無料でチェックできるツール「高評価」を使っています。
チェックの合格点は記事の内容にもよるので（例えば文字数の都合でタイトルにキーワードを入れられない場合、記事に画像を入れていないので、代替テキストにキーワードが入らない場合など）、点数は参考程度に考えています。できる限りの高得点を狙うようにしていますが……。
余談。
記事のタイトルを全体的に短くしたのですが、その時の話。
記事のタイトル数にはサイト名の文字数分も含まれているので、実際に使える文字数は10数文字です。結構短いんですよね、これ。
サイト名を入れなかったら記事タイトルに文字数をもっと使えるし、サイト名は省略されても構わないとするなら、もう少し記事タイトルも凝れる。
でも、知名度があるサイトならともかく、知名度があまりない場合はサイト名がなかったら誰が書いたのか分からない（信用度の低下につながる）と考えているので、サイト名を外すわけにも……。あと常に「SEOのクリエイトアコード」と入るのが良いと思う。
Googleの検索結果でサイト名またはドメインが表示されるようになったけど、日本語に目が行きやすいことも思うと、しばらくはこのままの方が良いし、短い文字数＝キャッチコピーのような形で考えた方が気になりやすいような気がすること、80文字は使える分、メタディスクリプションでフォローはできるので、このまま短いタイトルで頑張っていく所存です。
今回作成したデバッグリスト（ホームページ運用チェックシート）について
自分のホームページの情報は別に非公開という情報ではないものの、自分の目標・目的に合わせて作っているので自分以外には情報過多になると思ったので、テンプレートとして活用できるホームページ運用チェックシートを作成しました。
こちらからコピーして自分のホームページに合わせて修正して御利用ください。
デバッグリスト（ホームページ運用チェックシート）に含まれているチェック項目
| チェック項目 | 説明 |
|---|---|
| ページタイトル文字数チェック (注)「TITLE ＆ META情報抽出-ラッコツールズ」を使用 | PC・スマートフォン両方で省略されずにGoogleの検索結果のタイトルとして表示される文字数の目安が32文字（30文字前後）のため、制限を32文字にしています。 (注)サイト名もタイトルの文字数に含まれるので、ご注意ください。 |
| メタディスクリプション文字数チェック (注)「TITLE ＆ META情報抽出-ラッコツールズ」を使用 | PC・スマートフォン両方で省略されずにGoogleの検索結果のページ説明文として表示される文字数の目安が80文字前後のため、制限を80文字にしています。 |
| canonical（カノニカル）チェック (注)「TITLE ＆ META情報抽出-ラッコツールズ」を使用 | 「完全に同じ」もしくは「取り扱っているものの一部の情報だけ異なるけど、その他の情報は同じ」ページがあるときに重宝する正規URLを設定する「canonical（カノニカル）」をチェックする。 変な設定にしていなかったら基本的にはそのページのURLと同一なものが表示されるので、異常はないはず。 意図的に設定している場合は、条件に当てはまっているか確認しよう。 |
| robot設定のチェック (注)「noindexありなしチェッカー」を使用 | 本当はnoindexの設定状況のチェックのために用意した項目だけど、WordPressの仕様の都合で先に「max-image-preview」が抽出されてしまうので、Meta設定のチェックをまとめて行えない……。 改めて別のチェックツールで調べて、もし誤って設定されている（例：noindexのつもりだったけどnoindexになっていない、または逆にnoindexにしたくないのにnoindexになってしまっている）チェックも併用すると良さそう。 |
| OGP設定（特に画像）のチェック (注)「OGP確認-ラッコツールズ」を使用 | SNSでシェアするときに表示される設定。検索結果に表示される情報と別で設定した方が良いこともあるのですが、基本的には同じ設定をしていると思われます。（注1） 画像の設定漏れがないか、意図したテキストになっているかを確認します。 |
| iPhone表示チェック (注)実機で確認 | Androidユーザーだとチェックが難しい項目ですが、「iPhoneだけ画像が表示されない」事例が確認されているので、スマートフォン=iPhoneとしてチェック項目を用意しています。（(注)2） |
| ページチェック（PageSpeed Insights） | ページを総合的にチェックするツール。やむを得ない事情がない限り、「ユーザー補助」「おすすめの方法」「SEO」は100点でチェックOKとしたい。ページ表示速度の100点はかなり難易度が高い（サーバーの性能や時間帯、テーマ、ページ容量にも影響する）ので、クリエイトアコードの場合は「総合的にグリーンならOK」としています。（(注)3） |
| コアウェブバイタルチェック (注)Chrome拡張機能「Web Vitals」を使用 | データが十分であれば、「PageSpeed Insights」でチェックできるのですが、データが不足しているのでチェックできない……。新規サイト程チェックできない…悲しい……。 代用ツールとして、Chrome拡張機能「Web Vitals」を使用すると良さそうです。 |
| SEO結果チェック (注)SEO対策チェックツール「高評価（こうひょうか）」を使用 | 無料で使えるコンテンツSEO対策チェックツール「高評価（こうひょうか）」をよく使用しています。点数でチェックしてくれること、代替テキストもチェックしてくれることがポイント高いです。 とはいえ、高得点だから検索結果に表示されるというわけでもないので、「ここ、もう少し対応できるよね」といった対策漏れを確認するのに使用すると良さそうです。 |
(注)1…個人的には「ターゲットの行動目的が異なる場合は、コンテンツの中身（ストーリー）も変得た方が効果的のように思えるので、別で専用ページを用意した方が良いのでは…？」と考えています。
(注)2…必ず発生する原因については現在も掴みきれておりませんが、容量が大きい画像、横幅が大きすぎる画像、「2カラム内に画像以外のコンテンツがない」ときに発生しているように思えます。
(注)3…びっくりしたのが、見出しレベルの使い方が間違っていたページがあったのですが、その指摘もしてくれたこと。「もう、ページ表示速度チェックツールじゃないじゃん。ページのツール名変えようよ！」と思いました。
サイト運用奮闘記（1）まとめ
「コピーした後でコンテンツを入れ忘れていた」「関連性があまりない複数のテーマ記事を書いてしまっていた（しかも長文）」「狙って書いているとは思えない詰めの甘さ」等々、今回、ホームページのデバッグ・SEOの見直しで見えてきたので、今回きちんとホームページ運用の見直しができて良かったと思います。
情報量が多いのと一人でデバッグも含めて対応している現状、今後も対応抜けのような形で見つかることはあると思うので、見つけ次第修正していこうと思っていますが、今後の投稿に関しては、チェックシートがあるので都度ホームページ運用チェックをかけていくことで防げるので、手順化することでホームページ運用負担は軽くなったのではないでしょうか。
今まではひたすらにインプットと作業をしていて知識と技術の情報が散らばってしまっていたので、今後は、こうしたチェックシートのようなものを必要に応じて作っていき、知識と技術のアップデートとアウトプットに努めていきたいな。
関連記事
ご相談・お問い合わせをお待ちしています！
ホームページ制作・リニューアル・運用・SEO・Web集客、Webマーケティング・Webサイト制作技術・タスク・スケジュール・プロジェクト管理や業務改善のお悩みなどを遠慮なくご相談ください。
資料のダウンロードをご希望の方へご案内です
サービスのご利用を社内で検討したい方のために、実績やサービス概要、料金表などのクリエイトアコードの案内資料をPDFでダウンロードすることができます。ご自由にダウンロードください。