Web開発者の責任は、単にアプリケーションを設計および開発するだけではありません。 アプリに適切な機能セットを追加することに加えて、ユーザーがそれを確実に受け入れるように、事前対策を講じる必要があります。
SEOの管理は、このカテゴリに分類されるものです。
アプリを検索エンジンのランキングでうまく機能させたい場合、アプリケーションの開発時にSEO手法を組み込むことは、すべてのWeb開発者にとって必要悪です。
Web開発者向けのSEOに関するこの重要なガイドでは、Webアプリの開発中に使用する必要のある最新のSEO手法について10分以内に最新情報を入手できます。
まず、SEOの概念に完全に精通していない人のために、基本を見ていきましょう。
SEOとは何ですか、なぜそれが必要なのですか?
SEOは検索エンジン最適化の略です。 この用語自体は、SEOが正確に何であるかを示しています。
ブラウザの検索ボックスに検索キーワードを入力すると、検索エンジンは結果の表示方法、上位10件の結果に表示されるWebページ、次のWebページを決定する必要があります。
あなたが提供しているものに類似したコンテンツを探しているユーザーを引き付けることを探しているなら、結果のリストの一番上にできるだけ近くランク付けすることは彼らにあなたのサイトを訪問させるための最善の策です。
検索エンジンのアルゴリズムは、各Webページについて保存されているデータを使用して、ユーザーのキーワードが探しているものに最も近いコンテンツを提供するWebページを決定します。 SEOの目的は、ユーザーが探しているコンテンツを含むWebページであることを検索エンジンアルゴリズムに納得させることです。
[Read:
]Webページのコンテンツに加えて、ランキングアルゴリズムは、結果ページの上部に最高のユーザーエクスペリエンスを提供するWebサイトを表示することを好みます。
これら2つの要件を組み合わせると、開発中にWebサイトのSEOの側面を処理するWeb開発者が必要になります。 開発者としてのあなたの責任はSEOの技術面にあり、最適化のためにいくつかのコードの変更、追加、微調整が必要です。
基本がカバーされたので、Web開発者にとって重要なSEOのヒントを見ていきましょう。
検索エンジンのクローラーは、Webページ上の特定のHTMLタグを調べて、提供しているコンテンツの種類を識別します。 SEOに最も関連する2つのタグは、タイトルタグと説明タグです。
ウェブサイトのメタタグを自分で作成している場合は、キーワードの役割を考慮する必要があります。
キーワードとは何ですか?
検索エンジンの用語では、キーワードはユーザーがブラウザの検索ボックスに入力するフェーズです。
検索エンジンのユーザーをWebページに引き付けるには、まず、提供しているものに類似したコンテンツを探しているユーザーが検索しているキーワードを特定する必要があります。
関連するキーワードを特定したら、それらをWebページのコンテンツで使用する必要があります。 識別されたキーワードを使用する最も重要な場所は、WebページのタイトルタグとH1タグです。
また、H2やその他の見出しや段落内のキーワードも使用する必要があります。 ただし、最初に述べたものよりも検索エンジンのランキングアルゴリズムへの影響は少ないです。
Webページでキーワードを使いすぎないように注意してください。 ランキングアルゴリズムは、キーワードの乱用をアルゴリズムを誤解させ、それに対するペナルティを与える試みと見なします。 キーワードと単語の適切な比率はどれくらいですか? それは百万ドルの質問です。
タイトルタグ
タイトルタグにキーワードを配置するための最も効果的な位置は、その始まりです。 それが不可能な場合は、タイトル内の任意の場所でキーワードを使用してください。
適切に最適化されたタイトルタグは、スペースやその他の特殊文字を含めて60文字を超えてはなりません。
メタディスクリプションタグ
説明タグは、ランキングアルゴリズムの結果にあまり影響を与えません。 しかし、あなたが提供する説明は、ウェブページのコンテンツについてのアイデアを得るためにユーザーにSERPに表示されるので、ユーザーにあなたのウェブページへのリンクをクリックするように強制するように書かれるべきです。

robots.txtファイルを使用して、ファイルで指定されたページをクロールしないように検索エンジンに指示します。 通常、特定のWebページからクローラーをブロックすることは、クローラーの要求がアプリのサーバーを圧倒するのを防ぐために使用されます。 これは、サーバーに送信される要求の数を減らすことがWebページのパフォーマンスにとって重要である場合にのみ実行してください。
また、Webサイト上の重要でないページのクロールを防ぐこともできます。
robots.txtファイルを使用して、Googleまたは同様の検索エンジンでウェブページがインデックスに登録されないようにすることができます。 しかし、これは完全に成功しているわけではありません。 現在のページにリンクしている別のページがある場合でも、インデックスが作成される可能性があります。
ページのインデックス作成を完全に削除する場合は、 noindex ロボットはページのHTMLコードにメタタグを付けます。

リンクをフォローしてフォローしない
クローラーは通常、既にアクセスしているページ内のリンクされたページをクロールします。
リンクされたWebページがサイトに関連付けられないようにしたり、現在のページからクロールしないようにしたい場合があります。 そのような場合、あなたは合格することができます nofollow の値として rel 属性。

しかしながら、 グーグル発表 彼らが使用していること nofollow 2020年以降、ルールではなくヒントとして。 nofollow リンクされたページをクロールしたくないことをGoogleにほのめかすだけです。 グーグルはあなたが望むようにするかもしれないし、しないかもしれない。
クローラーがリンクをたどりたくない場合は、メタロボットタグの1行を使用してクローラーに指示できます。

構造化データ
検索結果ページに特別な形式で結果が表示される場合があります。 たとえば、「パスタレシピ」をグーグルで検索すると、結果ページにさまざまなレシピページへのリンクが記載された特別なカードが表示されます。
Googleや他のほとんどの検索エンジンは、ウェブページで提供される構造化データを使用してデータを取得し、このような特別な機能を表示します。
構造化データの記述に使用される語彙は、で定義されているものとほとんど同じです。 schema.org 。 ただし、検索エンジンのドキュメントを参照して、検索エンジンで受け入れられる正確な形式を確認する必要があります。 Google向けに最適化する場合は、を使用して構造化データをテストおよび検証できます。 Googleの豊富な結果テスト 。
それでは、ウェブページの構造化データを使用して、コンテンツに関する適切な情報をGoogleに提供する方法を見てみましょう。
当社のWebページがレシピページの場合、JSON-LD形式で記述された次の構造化データを使用して、レシピに関する名前、作成者、評価、およびその他の関連データを提供できます。

レシピに加えて、Googleは記事、FAQ、本、求人情報、ローカルビジネスなど、他のいくつかの機能タイプを提供しています。 参照する Googleの開発者向けドキュメント さまざまな構造化データ形式とコンテンツタイプの詳細を確認します。
ページの読み込み速度
ページの読み込み速度は、ユーザーにより良いユーザーエクスペリエンスを提供するための主要な側面の1つです。
Googleが実施した2018年の調査によると、バウンスの確率は、ページの読み込み時間が1秒から3秒になると32%増加し、ページの読み込み時間が1秒から5秒になると90%増加します。
ユーザーエクスペリエンスにとってページ速度が重要であるため、Googleはランキングアルゴリズムのランキング要素としてそれを使用し始めました。 現在、ページの読み込み速度が上がると、ウェブページがGoogleの結果ページで上位にランク付けされます。
Webページの読み込みを高速化することは不可欠ですが、ユーザーに読み込みを高速化するように感じさせることも不可欠です。 一部のコンテンツをページに表示するのにかかる時間を短縮して、ユーザーの注意を引き付け、残りのコンテンツがバックグラウンドで読み込まれ、ページがユーザーに速く読み込まれるように感じさせる必要があります。
グーグルの灯台 は、サイトのパフォーマンスを測定するための優れたツールです。 そのパフォーマンススコアは、完全なネットワーク条件下での実際のページ速度だけに基づくものではありません。 それはあなたのサイトが安っぽい3G接続でさえどのように機能するかを考慮に入れます。 Lighthouseは、ページの読み込み時間が実際のユーザーにどのように感じられるかを測定するための優れたツールです。
いくつかのアプローチを使用して、Webページの読み込み速度を上げることができます。
- CSS、Javascript、およびHTMLを縮小する
- リダイレクトの数を減らす
- ブラウザのキャッシュを利用する
- 画像サイズを最適化する
- 遅延読み込みを利用する
- odGoogleのを利用する Accelerated Mobile Page(AMP)
モバイルフレンドリー
ほとんどのオンラインコンテンツがモバイルファーストのアプローチを採用している場合、Googleは、Webページのモバイルフレンドリーをランキングアルゴリズムに組み込むための措置も講じました。
モバイルフレンドリーなウェブサイトは、モバイルユーザーにより良いユーザーエクスペリエンスを提供します。 携帯電話を介してWebにアクセスするユーザーの数がこれまでになく多い場合、モバイルユーザーにより良いサービスを提供するためにWebアプリを変換するのは簡単なことです。
あなたのウェブサイトをよりモバイルフレンドリーにするためにあなたが取ることができる3つの主要なアプローチがあります。
レスポンシブデザインを使用する
現在のデザインをレスポンシブデザインに変換しても、既存のコードベースへの影響は最小限に抑えられます。
新しいビューポートメタタグを設定し、CSSを微調整して、さまざまな画面解像度に対してより柔軟になり、Webデザインをレスポンシブにすることができます。
ダイナミックなデザインを使用する
動的設計は、コンテンツを要求するユーザーエージェントタイプを検出した後、モバイルユーザーとデスクトップユーザーに異なるHTMLコンテンツを提供します。 モバイルユーザーとデスクトップユーザーに異なるレンダリングのページを提供する必要があるため、レスポンシブデザインよりも実装に手間がかかります。
モバイルサブドメインを使用する
一部のWebアプリは、モバイルユーザー用に個別のサブドメインを使用します。 通常、サブドメインの名前はmobile.example.comまたはm.example.comに似ています。 このアプローチは、実装に多くの時間と労力を要します。 小規模または中規模のWebサイト、特に2つの異なるバージョンのWebサイトがない場合は、一般的にはお勧めしません。
結論
SEOについて心配することは、Web開発者の職務記述書以外のことのように見えるかもしれませんが、この記事で、SEOを検討することがクライアントに完全なWebアプリを提供するために必須であることを納得させていただければ幸いです。
この記事では、SEO Web開発者が焦点を当てるべき最も重要な側面について言及しましたが、他のいくつかの技術的要因がランキングアルゴリズムの決定に影響を与えます。
Web開発者としてSEOを習得する次のステップとして、より技術的なSEOプラクティスを調査し、それらを使用してWebサイトを検索結果ページの上部にランク付けすることができます。
この 論文 もともとに公開されました ライブコードストリーム 沿って フアンクルスマルティネス (ツイッター: @bajcmartinez)、Live Code Streamの創設者および発行者、起業家、開発者、著者、講演者、および物事の実行者。
ライブコードストリーム 無料の週刊ニュースレターとしてもご利用いただけます。 プログラミング、AI、コンピューターサイエンス全般に関連するすべての最新情報にサインアップしてください。