😻 🚾 🤴🏿 Next.jsでSEOを改善する方法 🕵🏽 😨 🧚🏽

記事の翻訳は、コース「JavaScriptDeveloper」の開始を見越して作成されました。基本 "。

「JavaScriptDeveloper」コースについて詳しく知りたい。ベーシック」？無料のウェビナーにご招待します。このウェビナーでは、コースの先生がすべての質問に答えます。

アプリケーション開発には、いくつかの最新のアプローチがあります。最も人気のある2つは、シングルページアプリケーション（SPA）とサーバーレンダリングアプリケーションです。

単一ページのアプリは優れたパフォーマンスを発揮し、Googleクローラーは数回の更新後にわずかに変更されましたが、それでも印象的なSEO結果は表示されません。サーバーレンダリングを使用すると、検索エンジン用にアプリケーションをより効率的に最適化できますが、この場合のパフォーマンスもかなり適切です。

NextやGatsbyなどの優れたJavaScriptフレームワークの出現により、サーバーでレンダリングされるアプリケーションが増えているため、特に高い検索ランキングが必要な場合に、単一ページのアプリケーションが必ずしも優れたソリューションであるとは限らない理由を見てみましょう。

シングルページアプリの何が問題になっていますか？

単一ページのアプリとサーバー側のレンダリングのどちらを使用するかを決定する前に、コンテンツを決定する価値があります。

単一ページのアプリは、1つのHTMLページのみをロードします。ユーザーが新しいHTMLコンテンツを要求するたびに、DOM要素を操作することによってJavaScriptによって動的にロードされます。しかし、毎回新しいHTMLページをロードする必要がない場合、検索エンジンの最適化に問題があるのはなぜですか？

問題は、検索エンジンが適切にインデックスを作成できないことですサーバーでレンダリングされたアプリケーションとは対照的に、単一ページのアプリケーション。単一ページのアプリケーションは、最初のHTMLページのみをロードします。その結果、検索エンジンは、変更のたびにJavaScriptを使用して再作成されたコンテンツにインデックスを付けることができませんが、単一ページのアプリケーションには他にも多くの利点があることに注意してください。高性能に加えて、接続速度が遅くても読み込みが速く、高い帯域幅を必要としません。、モバイルデバイスでのパフォーマンスが向上します。

一方、サーバーでレンダリングされたアプリケーション、特にNext.jsを使用して構築されたアプリケーションは、優れたパフォーマンスとSEO効率の両方を誇ります。

SEO（検索エンジンの最適化）

SEO（英語の検索エンジン最適化から）は、検索エンジンの最適化です。つまり、サイトを変更してより有機的な検索トラフィックを引き付けるアクションです。あなたのウェブサイトをより魅力的で検索エンジンにアクセスしやすくするために心に留めておくべき多くの異なるSEOテクニックとトリックがあります。

Next.js

Next.jsは、静的に生成またはサーバーレンダリングされたReactアプリケーションのフレームワークであり、開発者に多くの可能性を開きます。すぐに使用できるゼロ構成アプリケーションの作成、コード分割、静的HTMLページのエクスポートなどです。など

。Next.js高い検索エンジン最適化結果が得られ、これを行うために特別なことをする必要はありません。アプリケーションを作成するだけです。ただし、Next.jsによって、特にサーバーレンダリングによって、優れたSEO結果が提供されます。Next.jsが

どのように機能するかを例で見てみましょう。

Next.jsでは、Create Next App構造を使用して、1つのコマンドでアプリケーションを作成できます。

npx create-next-app

プロジェクトを作成すると、たとえば「Reactアプリの作成」で作成された他のテンプレートとは少し異なることに気付くでしょう。アプリケーションのすべてのページはフォルダーpagesに保存され、各ページはReactコンポーネントになります。

アプリケーション内に新しいルートを生成するには、フォルダーに新しいファイルを作成し、pagesそのための新しいReactコンポーネントを作成する必要があります。

// pages/about.js
const About = () => (
  <div>
    <h1>About page</h1>
  </div>
);
export default About;

注意。アプリで作業していると、たとえばLighthouseサービスを使用するなど、初期段階でもSEOランキングレポートを表示できます。

Next.jsを使用して新しいアプリケーションを作成するのは非常に簡単です。Next.jsが検索ランキングを改善し、サイトへのより多くのオーガニックトラフィックを促進するのにどのように役立つかを見てみましょう。

Next.jsでSEOを改善する方法

Next.jsを使用すると、SEOの結果を大幅に改善できますが、アプリケーションの他の側面を忘れてはなりません。良好なSEO結果が必要な場合は、次のことを考慮してください。

メタ

タグメタタグは、エンジンやサイトの訪問者を検索するページについてのデータを提供します。これらは、検索結果ページでのページの表示方法や、訪問者をサイトに引き付けることができるかどうかに影響します。メタタグはユーザーには表示されませんが、検索エンジンの最上位に表示するアプリケーションの場合、これはコードの最も重要な部分です。

メタタグは、ページに投稿されたコンテンツのタイプ、そのページのトピック、および検索エンジンがそれを表示する方法について検索エンジンに通知します。

Next.jsには、<head>ページコンテナにメタタグを追加する組み込みコンポーネントがあります。

import Head from 'next/head'

ページにメタタグを挿入するには、組み込みコンポーネントを使用しますHead。

import Head from 'next/head'

const Example = () => {
  return (
    <div>
      <Head>
        <title>Example</title>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
      </Head>
      <p>Hi Next.js!</p>
    </div>
  )
}

export default Example

組み込みコンポーネントHeadは、サイトでのメタタグの重複を回避します。keyプロパティを追加すると、メタタグは1回だけ表示されます。

<meta name="viewport" content="initial-scale=1.0, width=device-width" key="viewport" />

ページにいくつかのメタタグを追加するだけで、アプリの検索ランクを上げることができます。ここでは、SEOの重要なメタタグについて読むことができます。

今すぐコードをチェックして、メタタグが含まれているかどうか、およびそれらが必要なメタタグであるかどうかを確認してください。私を信じてください。適切なメタタグは、インデックス作成の品質を向上させ、オーガニックトラフィックを促進するために必要なものです。

生産性

ユーザーはページの読み込みが速いことに慣れており、永遠に待つ準備ができていません。アプリケーションを開発するときは、最初にパフォーマンスについて考えてください。これは、検索エンジンの主要なランキング要素の1つでもあります。

検索エンジン、特にGoogleは、最初のコンテンツ表示時間を使用します（First Contentful Paint、またはFCP）を主要なパフォーマンスメトリックとして使用します。FCPは、ページの読み込みが開始されてから最初のコンテンツアイテムが画面に表示されるまでの時間を測定します。FCPが低いと、SEOランクも低くなります。Next.jsを使用すると、カスタムAppコンポーネントを作成して関数を宣言すること

により、FCPおよびLCPメトリック（ほとんどのコンテンツのレンダリング時間、最大のコンテンツフルペイント）を解析できますreportWebVitals。

// pages/_app.js
export function reportWebVitals(metric) {
  console.log(metric)
}

この関数reportWebVitalsは、ページの最終的なメトリック値が計算されるときに呼び出されます。あなたは読むことができる

のパフォーマンスを測定する詳細Next.jsこちらを。ここで「あなたはFCPを改善するための作業に必要なものです。

SSL証明書

2014年8月、Googleはランキング時にHTTPSを考慮に入れると発表しました。安全なHTTPS通信プロトコルは、データをサイトに送信するユーザーに追加の保護レイヤーを提供します。

HTTPSに接続するには、SSL証明書を取得する必要があります。優れたSSL証明書は、かなりの費用がかかる可能性があります。Next.jsでSSL証明書を無料で取得するにはどうすればよいですか？

これを行うには、アプリケーションをVercelなどのクラウドプラットフォームにデプロイする必要があります。VercelはNext.jsの背後にある会社であるため、統合はスムーズに進みます。Next.jsをVercelプラットフォームにデプロイするには、VercelCLIをインストールする必要があります。

yarn global add vercel

次に、プロジェクトに移動して、次のコマンドを実行します。

vercel

プロジェクトはVercelで公開され、SSL証明書で保護されます。

コンテンツが重要

Webサイトの訪問者に表示されるコンテンツを適切に提示することは非常に重要です。高品質の製品を作成することは、すべての開発者の主なタスクです。

単一ページアプリケーションを開発するか、サーバー側レンダリングアプリケーションを開発するかは、表示するコンテンツの種類と、クライアントからフィードバックを取得する方法によって異なります。

Next.jsフレームワークは、サーバーでレンダリングされたReactアプリケーションを開発するために構築されており、優れたSEO、UX、パフォーマンスなどを提供します。これにより、企業や開発者はサイトやプロジェクトの品質を向上させ、より有機的な検索トラフィックを促進できます。 ..。

それでは、Next.jsに移動して、サーバー側のレンダリングアプリケーションの可能性を最大限に活用してみましょう。それらはあなたとあなたの会社にとって有用であり、そして一般的に-それらはただ素晴らしいです！きっと驚かれることでしょう。

結論

この記事では、Next.jsフレームワークを詳しく調べ、それを使用して検索エンジン用の最新のアプリケーションを最適化する方法を学びました。また、一般的なSEOの概念を整理し、アプリケーションを開発する際に考慮すべき側面であるメタタグ、パフォーマンス、SSL証明書などについても説明しました。

LogRocket：完全なWebアプリケーションの可視性

LogRocketは、ユーザーの問題をブラウザーで発生したかのように繰り返すことができるWebアプリケーション監視サービスです。これで、エラーが発生した理由を推測したり、スクリーンショットやログダンプをユーザーに要求したりする必要はありません。 LogRocketを使用すると、セッションを再生して、問題の原因を突き止めることができます。Etotサービスは、任意のアプリケーションフレームワークとシームレスに連携します。さらに、プラグインを使用して、Redux、Vuex、およびのコンテキストを追加できます@ngrx/store。

LogRocketは、Reduxのアクションと状態を追加するだけでなく、コンソールログ、JavaScriptエラー、スタックトレース、ネットワーク要求と応答をヘッダーと本文、ブラウザーメタデータ、およびカスタムログとともに記録します。DOMを使用してページにHTMLとCSSを記述し、最も複雑な単一ページアプリケーションでもピクセルごとのビデオ再生を提供します。

無料でお試しください。

続きを読む：

フロントエンドのインタビューで尋ねられた質問

Next.jsでSEOを改善する方法

シングルページアプリの何が問題になっていますか？

SEO（検索エンジンの最適化）

Next.jsでSEOを改善する方法

SSL証明書

コンテンツが重要

結論

LogRocket：完全なWebアプリケーションの可視性

続きを読む：

More articles: