質問: 独学でウェブサイトを制作して、公開しようと思いますが。 w3cのバリデーションチェックって、意味があるでしょうか? 検索で上位のサイトをw3cバリデーションすると、エラーと警告だらけです。 あと、Google PageSpeed Insightsのチェックも必要でしょうか? これもSEO対策の記事を読むと、モバイルで50点以上、PCで80点以上が好ましい みたいな内容ですが。上記同様、検索で上位のサイトでも、モバイルで20点切るものが沢山あります。 モバイルフレンドリーチェックは、納得して実行しますが、あれもこれもと色んなSEO対策記事が多くて、どの程度のことに留意すればいいのか?分からなくなります。 お教えくださいませ。
回答: >独学でウェブサイトを制作して、公開しようと思いますが。 >w3cのバリデーションチェックって、意味があるでしょうか? >検索で上位のサイトをw3cバリデーションすると、エラーと警告だらけです。 警告は良いとしても、流石にエラーは どうかと言う気はしますが、恐らく無いことが推奨されると言うレベルでしょう。 >あと、Google PageSpeed Insightsのチェックも必要でしょうか? >これもSEO対策の記事を読むと、モバイルで50点以上、PCで80点以上が好ましい >みたいな内容ですが。上記同様、検索で上位のサイトでも、モバイルで20点切るものが沢山あります。 ムチャクチャ重かったらダメでしょうが、それも恐らく軽いほうが推奨されると言うレベルでしょう。 >モバイルフレンドリーチェックは、納得して実行しますが、あれもこれもと色んなSEO対策記事が多くて、どの程度のことに留意すればいいのか?分からなくなります。 下記は実際の評価値ではありません、実際は掛け算の要素とかも入ってくるでしょうから、こんなに単純ですないでしょうが、あくまでも分かりやすい説明のための超単純化したイメージです。 記事の質(端的に言うとアクセス数):30% 特定の解像度に依存しないユーザー・フレンドリー:30% (ペライチでない場合)パン屑リスト(nav要素):10% レスポンシブ・デザイン:5% ロボッツ・テキスト(robots.txt):3% サイトマップ(sitemap.xml):3% 「description+keywords」:3% 必須レベル(最重要ファクター)が圧倒的であり、"最優先"に対応すべきです。 次は(ペライチでない場合)パン屑リスト(nav要素)、パン屑リストもハンバーガー・メニュー内に入れておいたほうがユーザー・フレンドリーかもしれません。 もし SEO対策をガッツリやりたいなら下記を参考に実際に「実用的なWebページ」を作ってみると良いでしょう。 本当に自分の興味のあるコンテンツで(勉強のために)実用的なWebページを作ってネットで公開してみると良いでしょう(本当に自分の興味のあるコンテンツならモチベーションも上がるでしょうから)。 逆に言うと、自分が本気でネットで公開したいコンテンツでないと、それだけの学習コスト(学習の労力)を掛けて勉強するのは難しいかもしれません、(もちろん 不可能と言うことでは無いですが)自分が本気でネットで公開したい、と言うモチベーションが有った方が学習に圧倒的に有利です。 自分が本当にネットで公開したいコンテンツがあるか、どうかも重要な要素になるでしょう。 参考 ユーザー・フレンドリー(レスポンシブ・デザイン)・Webページ作成の注意点 「PC、タブレット、スマホ」などで解像度は機種ごとに違うので、特定の解像度に依存しないユーザー・フレンドリー(PCフレンドリー、タブレット・フレンドリー、スマホ・フレンドリー)なページが推奨されます。 (各解像度のチェック自体は それほど難しく無いので)現在 Webページを作成しているなら、実際にChromeのデベロッパー・ツールのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみると良いでしょう。 PCにおいては とりあえず「1k~4k」解像度をチェックしてみると良いでしょう。 具体的には「1k」では「約1000px*750px」(アスペクト比「4:3」)を、フルHD画面 以上なら「約2000px*1120px、約4000px*2250px」(アスペクト比「16:9」)の解像度をチェックすると良いでしょう。 「タブレット、スマホ」は既に登録されているプリセットの解像度でチェックしてみると良いでしょう。 「タブレット、スマホ」の解像度のプリセットは[Responsive]コンボボックスで選択可能です(下記の解像度をチェックしてみると良いでしょう)。 タブレット:『「iPad」(768px*1024px)、「iPad Pro」(1024px*1366px)』。 スマホ:『「Galaxy Fold」(280px*635px)、「iPhone 5/SE」(320px*568px)、「Moto G4」(360px*640px)、「Pixel 2」(411px*731px)、「Surface Duo」(540px*720px)』 解像度を変更したら必ずリロードして下さい。 解像度を変更してフォント・サイズが合わなくなったら、ブラウザの設定でフォント・サイズを調整して下さい。 Webページ作成時に何度も何度も解像度をチェックするとなると、フォント・サイズの調整も面倒になります。 「Webページにおける基本的な注意点」内にフォント・サイズ自動調整用の「CSS、JavaScript」が記載されているので、それを使うと便利でしょう、あくまでもモバイル・エミュレーター用のコードなので、本番用Webページではコメントにするなど、無効にして下さい。 アマチュアの場合で細かく分けたい場合は、メディアクエリで「1312px以上」、「1312px未満~992px以上」、「992px未満~688px以上」、「688px未満」に分割する4パターンのレイアウト構成が推奨されているようです(もちろん、ページのレイアウト構成によっては、それ以下のパターン数でも作成可能な場合もあります)。 (Webページ作成の基本のキとして)ブレイク・ポイントを念頭に置き、必ずワイヤー・フレームを作成して下さい(手書きでも良いですし、単純なレイアウトなら脳内だけでも おk)。 ただし 今まで何回もこれを説明してますが、これを やった人は恐らく誰も居ないでしょうが...。