間違ったSEOを修正してウェブサイトへの流入を20倍にする方法
ウェブサイトを検索結果に表示させるためには、検索エンジンが「ページが何について書かれ、信頼できるソースから得た最新の情報で更新しているか、そして検索者が求める答えを持っているか」を理解できるようにする検索エンジン最適化(SEO)が重要です。自分自身のウェブサイトを開設してから1年で、1日50回ほどだった表示回数を1000回にまで増加させたMaxime Heckel氏が、自身の経験の中で冒した「SEOの失敗」と「その修正方法」を明かしています。
SEO mistakes I've made and how I fixed them - Maxime Heckel's Blog
https://blog.maximeheckel.com/posts/seo-mistakes-i-have-made-and-how-i-fixed-them
Heckel氏がこれまでに行った「間違ったSEOの修正」は、以下の通り。
◆カオスな末尾のスラッシュを統一させる
Heckel氏は静的サイトジェネレーターのGatsbyを使って記事を書き、Netlifyでホスティングを行っています。この2つを無頓着に組み合わせると、URL末尾のスラッシュによる悲劇が起こるとHeckel氏。
Heckel氏のウェブサイトでは投稿へのリンクが「/posts/learning-in-public」という形ですが、読者がNetlify上でリンクをクリックすると自動的にURL末尾にスラッシュが追加されることになるとのこと。
これにより、まず、TwitterなどSNSで記事URLが共有される際に「スラッシュありURL」と「スラッシュなしURL」が混在することになります。ウェブサービスによってはスラッシュの有無で適切なメタデータを取得できなくなり、プレビューを行うカードを表示させず、シンプルにリンクのみが表示されることも起こります。
またHeckel氏はGatsbyのプラグインを使い、ウェブページやそのURLを元にして自動的にサイトマップが生成されるようにしていました。GatsbyではスラッシュなしでURLを設定していたため、サイトマップにも「スラッシュなしのURL」が使われました。しかし、Googleのサーチエンジンが参照するのはホスティングを行うNetlifyの「スラッシュが自動追加されたURL」なので、スラッシュなしのURLに対しGoogle Search Consoleが「無効なURLです」と警告を発するようになったとのこと。
この問題を解決するためには「1：Netlifyが自動的にURLを最適化させる『Pretty URLs』設定を無効にする」、あるいは「2：ブログの全てのページでURLを『スラッシュあり』に統一する」という方法が考えられました。Heckel氏の場合は既にGoogleがブログ投稿を参照していたため「2」の方法を取ったそうです。
◆canonical属性タグの導入
自分自身でウェブサイトを立ち上げる前にも、Heckel氏は2018年からMediumで記事を公開していました。2019年にブログを立ち上げたHeckel氏さんは、2018年から2019年の間にMediumで公開した記事をウェブサイトに移行したのですが、その際、記事の内容をまったく改変せず、かつMediumの記事を削除しませんでした。このため、同じキーワード・同じコンテンツ・同じ著者を持つHeckel氏さんのブログ記事とMediumの記事がGoogle上で競い合う関係になってしまったとのこと。
Heckel氏はこの問題をcanonical(カノニカル)属性タグで解決しました。カノニカルは正式なURLを検索エンジンに伝える、「URLの正規化」を目的とするもの。これは以下の方法で行います。
1：ブログ投稿の<head>タグの中に挿入するcanonical属性タグを作成する。サンプルは以下の通り。
<link rel="canonical" href="https://blog.maximeheckel.com/posts/learning-in-public/">
2：過去にコンテンツの投稿を行ったサードパーティーのプラットフォームにアクセスし、投稿の中に上記タグを挿入する。サービスによってはタグの挿入の仕方が解説されているところもあります。
◆メタタグが消失する問題の解決
Gatsbyでウェブサイトを構築する際の作業に「全てのページのJSファイルとHTMLファイルを作成する」というプロセスがあります。このときHeckel氏はアプリケーション全体に適用されるよう、テーマを設定する要素である「ThemeProvider」を「gatsby-ssr」や「gatsby-browser」といったファイルに追加していました。
この設定により、「明るい」「暗い」とったテーマはReact Providerを通じてアプリ全体に挿入され、ユーザーが各テーマを切り替えることが可能になりました。またテーマはローカルストレージに保存されるため、ユーザーがウェブサイトにアクセスしたときには前回のテーマが引き継がれます。ユーザーがブログを再度読み込んだ時には、ThemeProviderがローカルストレージの特定変数をチェックするようになっていたとのこと。
しかし、この設定プロセスでHeckel氏はミスを冒しました。変数を設定する際にReactの「useEffect」を利用したのですが、この結果、既にサーバーでレンダリングされたページのみが適切なテーマで表示され、ウェブサイトをロードないしリフレッシュした時にはウェブサイトがデフォルトのテーマに戻っていたそうです。この問題を解決するために、Heckel氏はテーマがローカルストレージがどうかをチェックするべく微調整を加え、テーマを取り戻す間は空の<div>が読み込まれるようにしたとのこと。
この「空の<div>を読み込む」という仕組みにより、ウェブサイトに設定したSEOのメタデータが「消失」してしまったとHeckel氏は述べています。静的なHTMLのビルド時はテーマが指定されていない状態だったため、空の<div>までのツリーが静的なHTMLと認識されてしまい、SEOコンポーネントを含む残り全てのDOMがスキップされてしまったそうです。しかも、開発者ツールなどでコードを表示させた時にはタグは現れるため、問題を突き止めるまでにかなりの時間を要したとのこと。
メタタグが消失するという問題を二度と起こさないために、Heckel氏はコードスニペットを作成し、SEOコンポーネントで設定した全てのメタタグがHTMLに含まれているかを自動チェックできるようにしました。
Heckel氏が注意を呼びかけている点をまとめると、以下の通りです。
・URL末尾のスラッシュに一貫性を持たせること
・コンテンツを別のサイトから移行させる時は正規URLの設定をすること
・Gatsbyのプラグインをやみくもに信用しない
・ページソースの確認は開発ツールでは不十分な可能性がある
・SSRに依存している場合はメタタグのレンダリングがブロックされないようにする
・疑わしい場合はテストのためのコードを書く
・関連記事
激烈な効果を出す記事広告をGIGAZINEに載せるにはどうすればいいのか編集長に聞いてみた - GIGAZINE
ウェブサイトへの流入を爆増させる可能性を持つ「マイクロブラウザ」について知っておくべきこと - GIGAZINE
サイト収益を上げるSEOテクニックの基礎まとめ - GIGAZINE
無料で利用開始できるSEOツール「SiteGuru」がサービス立ち上げから1年でユーザー数を1000人に増やすまでの軌跡 - GIGAZINE
Googleの検索結果を汚染する「プライベートブログネットワーク」とは？ - GIGAZINE
ウェブページを読む人の視線はどう動くのか、ウェブデザインやコンテンツ作成に役立つ調査結果が公開中 - GIGAZINE
・関連コンテンツ
in Posted by darkhorse_log
You can read the machine translated English article here.