自動テストを使用した開発中のSEOエラーのキャッチ

自動テストを使用した開発中のSEOエラーのキャッチ

【Google翻訳】
自動テストを使用した開発中のSEOエラーのキャッチ
開発中に自動化されたテスト手法を使用することにより、生産段階でSEOの問題を見つけるための高コストを回避します。
昨年6月、私はSMX Advancedで私のお気に入りのトピックの1つであるSEOと開発者間のコラボレーションの改善について発表することができました。

私のセッションはSEO用のJavaScriptについてでしたが、私は機会を利用して、痛みを伴うビジネス上の問題を解決できると思うプラクティスを紹介しました。

本番環境にリリースされた誤ったページでnoindexメタロボットタグがどのくらいの頻度で学習し、SEOのトラフィックが大幅に減少したか

このエラーと同様のエラーが最初に発生するのを防ぐ方法を学びましょう。

専門能力開発における自動テスト

現代のプロの開発者は、新しい機能を追加したり、バグをすばやく修正したりする必要があり、多くの場合、コードの品質を高く保つために自動テストに依存しています。

私のセッション中に、私はこれがいくつかのSEOエラーを早期に発見するのに最適な場所であり、その損害が高すぎる前にそれを言及しました。

この記事では、この概念を詳細に検討し、いくつかの実用的な例を確認し、開発者とSEOの責任の概要を説明します。

最新のWebアプリケーションのフロントエンドの構造

最新のWebアプリケーションのフロントエンドは、通常、コントローラー、ビュー、およびコンポーネントを使用してモジュール方式で構築されます。

コントローラーはページリクエストをアプリの正しいビューにルーティングし、ビューはページが読み込まれたときに表示されるものです。

ビューはさらにコンポーネントに分割されます。 たとえば、検索ページでは、検索結果のグリッドに1つのコンポーネントを使用できます。

これらのコンポーネントは、ハイブリッドレンダリングソリューションの場合のように、サーバー側、クライアント側、または両側でレンダリングできます。

SEOスコープ

すべてのアプリコントローラー、ビュー、またはコンポーネントがSEO入力または自動テストを必要とするわけではないため、これらの概念を理解することが重要です。

伝える1つの方法は、コンポーネントの機能を検索エンジンのクローラーに表示するかどうかを尋ねることです。

たとえば、ログインフォームの背後にあるすべてのコンポーネントまたはアクションは、検索エンジンのクローラーが表示できないため、SEOの範囲に含まれません。

さまざまな種類の自動テスト

自動テストは幅広いトピックですが、SEOの問題に関しては、ユニットテストとエンドツーエンドテストの2つの主要な自動テストを学ぶ必要があります。

開発者は通常、単体テストを作成して、個々のコンポーネントおよびメソッドレベルのチェックを実行します。 アイデアは、アプリケーションの各部分が期待どおりに個別に動作することを確認することです。

ただし、個々の部品は正しく動作しますが、一緒に動作させると故障する可能性があります。 そこで統合テスト（エンドツーエンドテスト）が導入されます。 コンポーネントも一緒に機能することをテストします。

開発中にSEOの問題を確認するために、両方のタイプのテストを作成する必要があります。

いくつかの実用的な例を見てみましょう。

SEO単体テストの作成

プレゼンテーションの準備として、Googleトレンドのトピックを監視するAngularJSアプリをコーディングしました。 基本的なSEOのベストプラクティスに合わせて最適化することに焦点を当てました。
Angularでは、Jasmineを使用して単体テストを作成できます。 単体テストがどのように見え、それらを使用して何ができるかを確認しましょう。
例として、選択したカテゴリのGoogleトレンドトピックを一覧表示するアプリのカテゴリトピックコンポーネントを見てみましょう。

これらの単体テストを追加して、基本的なSEOタグを確認しました。
上記のテストにより、コンポーネントが適切な正規URL、ページタイトル、およびメタ記述を設定することを確認します。

このリストを簡単に拡張して、メタロボットやhreflangタグなどの他のメタタグを含めることができます。

このようなテストを作成したら、通常はアプリを更新した後にテストを実行する必要があります。

Jasmineを使用して実行する方法を次に示します。 Angularでは、次のコマンドを入力します。ngtest
開発者がWebサイトまたはアプリに新しい機能を追加してからテストを実行すると、重要なSEOタグの追加を忘れたり、誤ったSEOタグを導入することを忘れたときにすぐにフィードバックを受け取ることができます。

SEOとして進行中の作業の一部は、新しい関連コンポーネントが単体テストでカバーされることを確認することです。

SEO統合テストの作成

次に、アプリ用にコーディングした統合テストの一部を確認して、どのように見えるかを見てみましょう。

Angularでは、Protractorを使用してエンドツーエンドのテストを実行できます。
自動テストを実行するために2つの異なるツールが必要な理由を疑問に思うかもしれません。

エンドツーエンドテストは、指定されたスクリプトアクションを実行するようにブラウザーを自動化することにより、Webブラウザーで排他的に実行されます。 これは、テストしている特定のバックエンド/フロントエンドコードのみを実行できる単体テストとは大きく異なります。

サンプルアプリのカテゴリトピックページを見ると、事前レンダリングの問題をチェックするためのエンドツーエンドのテストが追加されていることがわかります。

サンプルテストでは、ページのレンダリング後に基本的なSEOタグが正しく機能することを確認します。 これは、ブラウザーにページをロードし、JavaScriptコードが実行されるのを待つテストです。
追加した簡単なチェックの1つは、タイトルやメタ説明などの主要なメタタグがレンダリング後にnullに戻らないことを確認することでした。 別のテストは、サーバー側のタグとクライアント側のレンダリングされたタグがクローキングの問題を引き起こす可能性があるため、それらが異なることを確認することです。

Protractorを使用して実行する方法を次に示します。 Angularでは、次のコマンドを入力します：ng e2e
JavaScriptベースのサイトを事前にレンダリングすると、SEOの問題が発生する可能性があり、実稼働環境では検出が困難です。 堅牢な統合テストは、強力な第一線の防御を提供できます。

継続的インテグレーション

私の講演ではこのトピックを取り上げませんでしたが、言及する価値はあります。 自動テストを作成するほとんどの開発チームは、継続的インテグレーションと呼ばれる手法も実装しています。

継続的な統合により、開発者はコードの変更をコードリポジトリにプッシュし、各コミットで一連の自動テストをトリガーできます。 テストに合格すると、コードはリリース用にパッケージ化され、自動的にデプロイされます。 ただし、いずれかのテストが失敗すると、パッケージ化とリリースのパイプラインは停止します。

CircleCiのような一部の継続的統合ツールでは、簡単なテスト定義ファイルをコードリポジトリに追加し、プロジェクトをサービスに追加する必要があります。展開パイプラインを含むすべての自動テストを実行します。
SEOプラクティショナーとして、開発チームにアクセスを許可して、失敗したSEOテストを確認し、SEOテストのカバレッジを確認して不足しているテストを推奨できます。

共同責任

開発中にSEOエラーをキャッチすると、企業は多くのお金と頭痛の種を節約でき、開発者と技術SEOの間で責任を共有できます。

これら2つのテーブルを作成して、単体テストと統合テストのさまざまな責任を定義しました。

詳細を知るためのリソース

私はAngularの例を使用しましたが、自動化されたテストは専門能力開発において確立された規律です。 ほとんどのフレームワークで同等のツールとプロセスを見つけることができます。

特定の開発スタックについてさらに調査するためのいくつかを以下に示します。

SEOコンサルタントのまとめ

開発者向けの難しい記事ですね。。。