技術スポンサードリンク以前、Google公式の監査アドオン、SEO対策はlighthouseを使おう!Performance編の記事でlighthouse、そしてパフォーマンス改善について解説をした。Practice編ではサイトの作りについて解説した。今回は最後の項目である、SEOについて解説と改善方法を記載していく。まとめlighthouseとは?使い方は?詳細は、以前の記事Google公式の監査アドオン、SEO対策はlighthouseを使おう!Performance編で書かせてもらったので割愛しますが、ざっくり説明すると、Googleが想定している「ユーザーにとって使いやすいサイト」かどうか自動で判定してスコアを出してくれるツールです。今回は最後の項目で、SEOについて解説していきます。SEOはどういう項目で、どう改善していくのか恐らく一番サイト運営者が気になる部分です。略で、直訳で「検索エンジン最適化」です。「ユーザーが求めている情報かつユーザーがアクセスしやすいサイトが上位に出てくるようにする」ということです。ちなみに、Googleは公式でサイト構築の方針として以下のことを推奨しています。検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。ユーザーをだますようなことをしない。検索エンジンでの掲載位置を上げるための不正行為をしない。社員に対して自分が行った対策を説明するときに、やましい点がないかどうかが判断の目安です。その他にも、ユーザーにとって役立つかどうか、検索エンジンがなくても同じことをするかどうか、などのポイントを確認してみてください。すれば自分のウェブサイトが独自性や、価値、魅力のあるサイトといえるようになるかを考えてみる。同分野の他のサイトとの差別化を図ります。Google的にはlighthouseの項目は全てSEOの評価項目なのではないかと思います。その中でもSEOの項目は、検索結果での表示や、かなり基本的なユーザビリティを抑えているかという所を評価しているように感じました。改善項目とそれぞれの改善方法それぞれ改善項目と、その改善方法に章だてて解説していきます。Elementこれは、メタタグの中の、titleとdescriptionがないよ!ということ。メタタグは、htmlページの<head>~</head>内に記述される、ページの各種付加情報を定義するタグのこと。種類はあるのですが、特にこの二つは大切。いうのも、以下の画像のように、サーチエンジンに表示されるタイトルと、中身の概要を入れるタグになるからです。実際の指定はこのようになります。content="24歳の駆け出しエンジニアが、技術解説、技術ニュース、ゲーム攻略、気になった事などをまとめる雑記ブログ。分かりにくいと、ユーザーは一旦そのサイトに入ってから自分が欲しい情報なのか判断しなければならなくなって操作が増えてしまいます。ここは分かりやすいタイトル、概要を心掛けつつ、少なくとも空になることのないようにした方が良いです。rel=canonicalこちらもメタタグです。titleタグやdescriptionタグ程分かりやすくないタグなので章を分けてありますが、これらも重要なタグ。「hreflang」は、hreflangタグというものがあるわけではなく、linkタグのrelというオプションにalternateを入れることで使用します。多言語サイト等で使用されます。多言語サイトでは、同じコンテンツの中身であるのに対して、URLを分けている場合が多いと思います。英語サイトは、「http://hoge.com/en/hoge」のような)そういった場合に、同じコンテンツで多言語翻訳したページがありますよと案内するためのタグがhreflangタグというわけです。ブラウザの言語が英語設定の人が検索した際と、日本語の人が検索した際に、検索結果で対応する言語のページを案内できます。続いて、canonicalです。これもcanonicalタグというものがあるわけではなく、linkタグのrelというオプションにcanonicalを入れることで使用します。説明が難しいのですが、これは正規化したURLが何か、ということです。コンテンツが複数のURLを持つことがあるため、どのURLが正しいのかということを表すことが出来ます。なんじゃそらという感じだと思うので、具体例で説明していきます。何かチェックボックスに条件を入れて検索し、結果が表示されるようなサイトがあった場合、URLは「http://hoge.com/ja/hoge?param1=a&param2=b」のようになると思います。その結果が多い場合、ページが複数あるので、次のページに遷移するとURLは大抵以下のようになると思います。「http://hoge.com/ja/hoge?param1=a&param2=b&page=2」では、この状態で最初のページに戻るとどうなるか?「http://hoge.com/ja/hoge?param1=a&param2=b&page=1」になってしまうサイトもあると思います。「http://hoge.com/ja/hoge?param1=a&param2=b&page=1」この二つのURLは全く同じ画面を表示するのですが、違うURLを持ってしまっている状態になる、ということです。いう状態を防ぐために、正規化したURLを持たせておく、というわけです。hreflangタグと、canonicalタグの実際の指定の仕方は以下のようになります。Sizesこれは非常に単純で、文字が小さいぞ!という指摘です。fontのサイズは12px以上が推奨です。実際それ以下になると読みにくくなってくると思います。pluginsプラグインを使ってるぞという指摘です。プラグインは、この場合ブラウザに新たに機能を追加するソフトウェアのことです。何で駄目なの?という話なのですが、Googleによると、多くのモバイル端末はプラグインをサポートしていないから、とのことです。詳細は沢山あるので省きますが、例えば「embed」タグ等を使うと言われてしまうようです。Textaタグの間に概要が入っていないという指摘です。ユーザーがクリックしていいものか判断できるようにして欲しいから、とのことです。codeこれはものすごく基本的なことですね。ロードしてるリソースなどが400エラーを出してると怒られてしまいます。メンテされてないと自白しているようなものなのでこれは仕方ないかなと思います。不安定なライブラリを使わないこと、外部の画像は信用できる場所から持ってくるなど気を付けるしかないかなーと思います。Indexingこの二つが表示されるのは、大抵意図してやっているような気もしますが・・・。これらは何らかの原因でインデックスがブロックされているよ!という指摘です。インデックスというのは、Google側でページをクロールしたということで、これをされて初めて検索エンジンの結果にページが出てくるようになります。そのインデックスが出来なくなっている場合というのは、以下のメタタグを仕込んだ場合くらいしか思いつかないので、これは特に意識しなくても普通は引っかからないと思います。消して問題なければ消しましょう。validrobots.txtがおかしいぞという指摘です。robots.txtというのは、クロールを制限するためのテキストです。特定のページがクロールされないようにしたり、いくつかの悪質なロボットのアクセスを制限したりといったことが出来ます。こちらは自分が触ったことが無いのであまり解説出来ないのですが、以下のサイトが詳しいです。robots.txtとはまとめというわけで、今回は「検索エンジン最適化」の項目であるSEOをまとめてみました。修正が比較的容易なので、是非満点を目指すことをお勧めします。自分も色々偉そうなこと言ってきましたが、まともに100点取れてるのはこの項目だけです。無理に全部100点のページを目指さず、出来るところから修正していけばOKです。何より、Googleも言っていますが、SEOを意識しすぎるのではなく、ユーザーを意識しつつ独自色を出していくことが大事です。某配送システム白猫プロジェクトのアイシャが大好きなエンジニアの卵。Java/Shell/C++/HTML/Sass/rustかgoやりたい。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。WordPress.。