サイト運用奮闘記(1)投稿・運用を優先した結果、作りの粗さが…

今回は、ホームページを運用して気になった不具合を見つけたことから始まった多数の修正・調整を行ったときの反省点についてまとめました。

職業柄、ホームページ制作だけではなく、ホームページの運用に関するアドバイスサポートをすることはあります。仕事では適切に相手に伝えられていても、実際に自分がホームページ運用をするときに「こうしておけば良かった」と思う反省点は沢山見つかるもので……。

目次

ホームページの修正・調整を行うことになったきっかけ

先日キャッシュ周りの設定でチェックが甘く、ヘッダー周り・フッター周りでバグを発生させてしまったので、バグ修正後に何気なく、ページ表示速度チェックツール【PageSpeed Insights】(注1)でトップページ以外をチェックしたところ、『ユーザー補助』『おすすめの方法』『SEO』で100点未満になっている項目を発見、「公開・運用を優先したので、デバッグまではできていなかったなぁ…」と思ったので、これを機に《ホームページの全ページのデバッグ・修正》を実施しました。

(注)1…もはや「ページチェックツール」だと思うのです。

2022年11月30日時点でキャッシュ周りのバグは設定変更したため、現在は修正済です。
今しばらく経過を観察し、他にも不都合や不具合が生じるようなら、主にSWELLのキャッシュ周りの設定の再見直しをするなど、追加の対応を行おうと思っています。

ホームページ制作時間をまとめた記録として残している記事があるので、今回のデバッグについてもまとめたものを残しています!

ホームページ運用チェック(1)全体的にページの設定周りを確認

まずは、「PageSpeed Insights」とChrome拡張機能「Web Vitals」を使用して、総合的にチェックしました。

PageSpeed Insightsの項目(「実際のユーザーの環境で評価する」は含まれない)

「実際のユーザーの環境で評価する」の項目は、Googleが保有するChromeユーザーのデータ「Chrome User Experience Report(CrUX)」を利用して分析されたスコアで表示されるので、データがないなら、表示されないので……!

もし問題が見つかったら、それぞれ原因を調べて解決していきます。
「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のクリエイトアコード」と入るのが良いと思う。

あまりにもタイトルに使える文字数が少なくなっちゃってたので、サイト名も短くしました。変更後のサイト名は「札幌SEOのクリエイトアコード」です。

Googleの検索結果でサイト名またはドメインが表示されるようになったけど、日本語に目が行きやすいことも思うと、しばらくはこのままの方が良いし、短い文字数=キャッチコピーのような形で考えた方が気になりやすいような気がすること、80文字は使える分、メタディスクリプションでフォローはできるので、このまま短いタイトルで頑張っていく所存です。

今回作成したデバッグリスト(ホームページ運用チェックシート)について

自分のホームページの情報は別に非公開という情報ではないものの、自分の目標・目的に合わせて作っているので自分以外には情報過多になると思ったので、テンプレートとして活用できるホームページ運用チェックシートを作成しました。

こちらからコピーして自分のホームページに合わせて修正して御利用ください。

【2022年12月8日追記】
概ね仕様に変更はないのですが、タイトルの文字数に「区切り文字」のことが考慮できていなかったので直しました。バージョン要素を増やして使うときに戸惑いにくいように少し改良したよ!

デバッグリスト(ホームページ運用チェックシート)に含まれているチェック項目

チェック項目説明
ページタイトル文字数チェック
(注)「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の見直しで見えてきたので、今回きちんとホームページ運用の見直しができて良かったと思います。

情報量が多いのと一人でデバッグも含めて対応している現状、今後も対応抜けのような形で見つかることはあると思うので、見つけ次第修正していこうと思っていますが、今後の投稿に関しては、チェックシートがあるので都度ホームページ運用チェックをかけていくことで防げるので、手順化することでホームページ運用負担は軽くなったのではないでしょうか。

今まではひたすらにインプットと作業をしていて知識と技術の情報が散らばってしまっていたので、今後は、こうしたチェックシートのようなものを必要に応じて作っていき、知識と技術のアップデートとアウトプットに努めていきたいな。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

サイト運営者

クリエイトアコード

ホームページのリニューアル/改善・SEO対策・Web集客のお手伝い屋さん【Web技術サポーター&Webコンテンツサポーター】

ソフトウェア&ゲーム開発会社でプランナーとして従事しながら、ディレクション・マネージメント、資料作成の知識を実践形式で学ぶ。その後はリサイクルショップのWebサイト担当者として従事しつつ、SEOやWordPressの実践形式での研究を深めた。転職をした会社や兼業(副業)としての活動でも今までに学んだ知識と技術を活用しながらも更なる向上に努めていたが、様々な人のお悩み解決をしていきたいという思いが強くなったため、転職から二年後に独立。2022年5月10日に開業して個人事業主になった。
現在は、今までに得た知識や技術(SEO・WordPress・Webマーケティング・Web集客)を活かしながら「人と人を調和し、創造を支援する」「自分で色々動きたいので技術面をサポートしてほしい人や自分も考えたいが技術面については知見がないのでフォローしてもらいたい人を応援する」ことを目的に「訪問者に届けるコンテンツを作る」お手伝いをするための活動をしている。

事業の他、ソフトウェア&ゲーム開発会社時代に無理をした働き方をしたために自律神経のバランスが乱れやすいことや精神的にもダメージを負ったことから「抑うつ状態」と診断されて数年かけて寛解した経験から、同じような人が苦しまずに働くことができるように自身を実験台に「スキルを活用した生活に困らないかつ無理をしない働き方」の確立を目指している。


ご相談・お問い合わせ

ホームページ制作・リニューアル・運用・SEO・Web集客、Webマーケティング・Webサイト制作技術・タスク・スケジュール・プロジェクト管理や業務改善のお悩みなどを遠慮なくご相談ください。

資料ダウンロード

サービスのご利用を社内で検討したい方のために、実績やサービス概要、料金表などのクリエイトアコードの案内資料をPDFでダウンロードすることができます。ご自由にダウンロードください。

目次