株式会社RETVALABOUTSERVICEWORKSNEWSRECRUITBLOGCONTACTご依頼についてABOUTWORKSSERVICENEWSRECRUITBLOGCONTACTご依頼についてHOMEHTMLWebサイト公開前後にチェックすべき項目やチェックツールについてHTMLSEOWEB制作ツールSHIROMA2023.05.052023.05.08URLをコピーWebサイトをテストアップした時に、何か問題がないかチェックをしなければいけません。全てチェックするのは手間ですが、自分で納得できるサイトにするにはこの記事にある項目をチェックしておきましょう。便利なチェックツールもあるので、それらもうまく活用しましょう。metrixWordPressの場合PHPエラーがないか確認セキュリティを強化SEO対策まとめ公開前にチェックするべき項目サイトを公開する前に、以下の項目をチェックしておきましょう。Consoleのタグは埋め込んだかOGPの設定やTwitterのシェア用のタグはあるかファビコンは設定されているかスマホ用のアイコンは設定されているかtitleタグは下層ページまで設定されているかmeta要素のディスクリプションは設定されているかライセンスの表記に間違いはないかJavaScriptは適切に動いているかconsoleにエラーは出ていないか結構いっぱいありますが、これらは気づきにくいポイントなので、しっかりチェックしておくようにしましょう。不要なコメントアウトはないか不要なコメントアウトはとても邪魔です。修正や更新作業をする時に、テキストエディタで無駄にスクロールしなくてはいけなくなりますし、可読性が低下します。制作者はコメントアウトが必要なのか不要なのか判断して、不要な部分は削除しておきましょう。誤字脱字はないかせっかくサイトを公開したのに、誤字脱字があると残念な感じになってしまいます。場合によっては間違った情報を閲覧者に提供してしまうかもしれません。誤字脱字の原因がクライアントにある場合もありますが、見つけてあげると仕事ができるWeb制作者という印象を与えます。主要ブラウザのチェック最近では各ブラウザの差異は減ってはいますが、依然として仕様の違いは残っています。Edge、Firefoxは必ずチェックしておきましょう。IEはサポートが終了していますので、特別な事情がなければチェックしなくて大丈夫でしょう。Toolsを使えばスマホの表示で開発することができますが、それでは完璧ではありません。SafariやAndroidのChromeでは、思わぬ仕様の違いがあります。稀にバグも存在します。実機を使ってテストするようにしましょう。Consoleのタグはちゃんと埋め込んだか確認しましょう。後から「計測できませんでした」なんてことになるとクライアントに怒られてしまいます。事前にタグを入れて欲しいと言われていなくても、「アクセス解析のタグは入れますか?」と確認しておきましょう。SNSシェア用のコードは忘れていないかSNSでシェアさせるには、必ずOGPの設定をする必要があります。protocol」の略称で、FacebookやTwitterなどで、ページのタイトルやサムネイル画像などをカード型で表示させるのに必須の設定です。SNSでの拡散を期待しているサイトもあるでしょう。ファビコンやスマホ用のアイコンは設定されているかアイコンというのはサイトのイメージを作り出し、印象に残す効果もあります。PCのブラウズにブックマークしたり、スマホのホーム画面に追加したりした時にアイコンが表示されます。WordPressサイトでアイコンが設定されていないために、WordPressデフォルトのアイコンが表示されているサイトを見かけます。最近ではGoogleの検索結果にもアイコンが表示されます。少々面倒ですが、設定を忘れない様にしましょう。title要素の漏れはないかtitle要素の文字が表示されるのはブラウズのタブの部分なので、目立たないために見落としがちです。title要素はSEO的に非常に重要な要素です。検索にヒットするかどうか、検索一覧に出る表示などに影響します。適切に設定をしておきましょう。descriptionの設定こちらもGoogleなどの検索結果に表示される(必ずディスクリプションが表示されるとは限りませんが)項目なので、忘れずに設定しておきましょう。descriptionは検索結果のクリック率にも多少影響が出るため、クリックしたくなるような説明を記述しましょう。JavaScriptに問題がないかチェックたまに最終チェックの段階で、ボタンをクリックして動くはずのJavaScriptが、動作しないということがあります。トップページでは動くけど下層ページでは動かないなど、状況によってエラーになることもあります。問題なく動作するか確認しておきましょう。ToolsにConsoleの機能がありますが、ここにエラーが出ているのに気付かないこともあります。Consoleにエラーが出ると思わぬ不具合が発生することがあります。console.logなどの結果がConsoleに出ていることがあるので、消しておきましょう。便利なチェックツールお次は、便利なチェックツールを紹介します。Servicehttps://validator.w3.org/HTMLを正しくマークアップできているかをチェックするツールです。HTMLの仕様に合っているか、閉じタグを忘れていないかといった項目をチェックできます。alt属性の漏れも確認できる点も便利です。思わぬエラーの予防やSEO対策のためにもチェックしておきたいツールです。Servicehttp://jigsaw.w3.org/css-validator/CSSが適切に記述できているかチェックするツールです。構造化データテストツールhttps://developers.google.com/search/docs/appearance/structured-data?hl=ja構造化データマークアップをすることで、検索エンジンに適切にページの情報を渡すことができます。検索結果のリッチスニペットに対応させるには、構造化データマークアップを施す必要があります。リッチスニペックというのは、Googleの検索結果に出てくる補足情報のようなものです。使われるのはパンくずリストですね。このようなリッチスニペックを利用するには、schema.orgを使用するのが一般的です。schema.orgの仕様に準拠したHTMLの書き方は以下の記事をご覧ください。Insightshttps://developers.google.com/speed/pagespeed/insights/?hl=jaページの読み込み速度を向上させるために、改善点を提案してくれるツールです。ユーザーにとって使いやすいか見やすいかなどのアクセシビリティや、SEO向けのマークアップがなされているかなどのチェックもしてくれます。Chromeの検証(DevTools)の「Lighthouse」でも同じことが可能です。Insightsは改善点を提案するツールですが、こちらは実際の体感速度に近い計測ができるツールです。Insightsだけでも十分ですが、より細かい改善点を見つけて高速化したい場合は利用してみてください。WordPressの場合WordPressの場合、他にもチェックしておくべき項目があります。PHPエラーが出ていないかセキュリティを強化しているかSEO対策ができるようになっているか各項目について解説していきます。PHPエラーがないか確認PHPエラーがあると、思わぬ不具合が発生することがあるので、しっかり確認しておきましょう。開発環境ではwp-config.phpに以下を追加すると、エラーを確認することができます。);こちらは本番環境ではtrueにしないでください。Monitor」というプラグインで、エラーを確認することもできます。Monitor」で出力されるエラー情報はログインユーザー(デフォルトでは管理者ユーザーのみ)にしか表示されないので、本番環境で利用できます。セキュリティを強化WordPressサイトは必ずセキュリティ強化をしてください。セキュリティ強化をしないでデフォルトのまま使っていると、サイト改ざんなどの被害に遭いやすくなります。Security」というプラグインがおすすめです。Securityについては以下の記事で詳しく解説しています。WordPressのセキュリティを強化できるプラグイン「All-In-One...WordPressは利用者が多い分、悪意のある第三者にハッキングされる危険性があります。descriptionやnoindex、OGPなどをページごとに設定できるようにする必要があります。テーマでこのような機能を実装することも可能ですが、手間がかかるのでSEOプラグインを導入しても良いでしょう。SEO」がおすすめです。https://ja.wordpress.org/plugins/wordpress-seo/まとめ全ての案件で全ての項目チェックやツールを使う必要はないと思いますが、できる限りチェックしておいた方が良いでしょう。後からクライアントにあれこれ言われるくらいなら、未然に防ぎましょう。ツールはガンガン使いましょう。自分でエラーや改善点を探すより、ツールを使った方が早いですね。細かい点を改善していきたいサイトにはうまく活用しましょう。株式会社RETVALの代表。Webサイト制作、WordPress、SEO、ライティングが得意分野です。