Rumah >hujung hadapan web >tutorial js >Meningkatkan Apl Next.js Anda dengan SEO: Melaksanakan Metadata Statik & Dinamik

Meningkatkan Apl Next.js Anda dengan SEO: Melaksanakan Metadata Statik & Dinamik

王林asal: 2024-08-09 10:49:40461semak imbas

Boosting Your Next.js App with SEO: Implementing Static & Dynamic Metadata

Adalah penting bahawa aplikasi Next.js anda adalah enjin carian dioptimumkan dalam persekitaran dalam talian kejam pada hari ini. Walaupun Next.js menyediakan alat pemaparan bahagian pelayan dan penciptaan tapak statik yang berkuasa, kekuatan sebenar adalah dalam cara anda menggunakan dan mengekalkan kedua-dua maklumat statik dan dinamik untuk meningkatkan kedudukan enjin carian apl anda. Dengan bantuan tutorial menyeluruh ini, anda akan dapat mengoptimumkan aplikasi Next.js anda dan meningkatkan kedudukan dan jangkauan enjin cariannya dengan menggunakan maklumat statik dan dinamik.

Memahami Metadata dalam Next.js

Memahami apa itu metadata dan mengapa ia penting untuk SEO adalah perlu sebelum menyelidiki kod tersebut. Enjin carian mengindeks dan menilai halaman web anda berdasarkan metadata, yang merangkumi perkara seperti tajuk, perihalan dan kata kunci. Keterlihatan tapak web anda boleh ditingkatkan dengan ketara dengan metadata yang diurus dengan baik.

Menyediakan Projek Next.js

Mari mulakan dengan mencipta projek Next.js baharu. Jika anda belum lagi menyediakan Next.js, ikut langkah ini untuk bermula:

npx create-next-app my-seo-app
cd my-seo-app
npm run dev

Ini akan mencipta aplikasi Next.js asas yang akan kami gunakan untuk melaksanakan amalan terbaik SEO.

Melaksanakan Metadata Statik

Metadata statik ialah kandungan yang tidak berubah dan ditetapkan pada masa binaan. Dalam Next.js , metadata statik boleh dilaksanakan menggunakan komponen

. Berikut ialah contoh cara menambahkan metadata statik pada halaman:

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>My SEO-Optimized Next.js App</title>
        <meta name="description" content="This is a sample application optimized for SEO using Next.js." />
        <meta name="keywords" content="Next.js, SEO, Static Metadata" />
        <meta name="robots" content="index, follow" />
      </Head>
      <h1>Welcome to My SEO-Optimized Next.js App</h1>
      <p>This is the homepage of your SEO-friendly Next.js application.</p>
    </>
  );
}

Melaksanakan Metadata Dinamik

Metadata dinamik, sebaliknya, berubah berdasarkan kandungan atau interaksi pengguna. Ini amat berguna untuk halaman seperti blog atau penyenaraian produk, di mana setiap halaman mungkin mempunyai metadata yang berbeza. Next.js memudahkan untuk menjana metadata dinamik dengan mengambil data semasa proses pemaparan sebelah pelayan.

Begini cara anda boleh melaksanakan metadata dinamik dalam apl Next.js:

import Head from 'next/head';

export async function getServerSideProps(context) {
  const { slug } = context.params;
  const res = await fetch(`https://api.example.com/posts/${slug}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default function BlogPost({ post }) {
  return (
    <>
      <Head>
        <title>{post.title} - My Blog</title>
        <meta name="description" content={post.excerpt} />
        <meta name="keywords" content={post.keywords.join(', ')} />
        <meta name="robots" content="index, follow" />
      </Head>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </>
  );
}

Menggabungkan Metadata Statik dan Dinamik

Dalam banyak kes, anda mungkin mahu menggabungkan kedua-dua metadata statik dan dinamik. Sebagai contoh, anda boleh mempunyai tajuk asas statik untuk tapak anda tetapi secara dinamik menjana metadata lain berdasarkan kandungan. Berikut ialah contoh:

import Head from 'next/head';

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/homepage');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  return (
    <>
      <Head>
        <title>{data.title} - My SEO-Optimized Next.js App</title>
        <meta name="description" content={data.description} />
        <meta name="keywords" content={data.keywords.join(', ')} />
      </Head>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </>
  );
}

Teknik SEO Lanjutan dengan Next.js

Di luar pengurusan metadata asas, Next.js menawarkan ciri lanjutan untuk meningkatkan strategi SEO anda. Berikut adalah beberapa teknik:

Teg Kanonik: Cegah isu kandungan pendua dengan menentukan URL kanonik untuk halaman anda.

<Head>
  <link rel="canonical" href="https://example.com/your-page" />
</Head>

Graf Terbuka dan Kad Twitter: Tingkatkan perkongsian media sosial dengan menambahkan metadata Graf Terbuka dan Kad Twitter.

<Head>
  <meta property="og:title" content="My SEO-Optimized Next.js App" />
  <meta property="og:description" content="This is a sample application optimized for SEO using Next.js." />
  <meta property="og:image" content="https://example.com/og-image.jpg" />
  <meta property="og:url" content="https://example.com" />
  <meta name="twitter:card" content="summary_large_image" />
</Head>

Data Berstruktur: Laksanakan data berstruktur JSON-LD untuk membantu enjin carian memahami kandungan anda dengan lebih baik.

<Head>
  <script type="application/ld+json">
    {`
      {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "url": "https://example.com",
        "name": "My SEO-Optimized Next.js App",
        "potentialAction": {
          "@type": "SearchAction",
          "target": "https://example.com/search?q={search_term_string}",
          "query-input": "required name=search_term_string"
        }
      }
    `}
  </script>
</Head>

Mengoptimumkan Prestasi untuk SEO

Prestasi adalah faktor kritikal dalam SEO. Enjin carian seperti Google mengutamakan tapak web yang memuatkan pantas dan Next.js menyediakan beberapa ciri untuk meningkatkan prestasi:

Pengoptimuman Imej: Gunakan komponen seterusnya/imej untuk pemuatan imej yang dioptimumkan.

Pembahagian Kod: Next.js membahagikan kod anda secara automatik, memuatkan perkara yang perlu sahaja.

Penjanaan Tapak Statik (SSG): Jika boleh, gunakan SSG untuk menyiarkan halaman pra-paparan untuk masa pemuatan yang lebih pantas.

import Image from 'next/image';

export default function Home() {
  return (
    <>
      <Head>
        <title>Optimized Images in Next.js</title>
      </Head>
      <h1>Optimized Images</h1>
      <Image
        src="/images/sample.jpg"
        alt="Sample Image"
        width={500}
        height={500}
      />
    </>
  );
}

Kesimpulan

Melaksanakan SEO dalam apl Next.js anda bukan sekadar menambah teg meta. Ia melibatkan pendekatan holistik, menggabungkan metadata statik dan dinamik, mengoptimumkan prestasi dan memanfaatkan ciri lanjutan seperti data berstruktur dan Graf Terbuka. Dengan mengikuti panduan ini, anda akan berada dalam perjalanan yang baik untuk memastikan aplikasi Next.js anda bukan sahaja pantas dan berfungsi tetapi juga mempunyai kedudukan yang baik pada enjin carian.

Rujukan:

Dokumentasi Next.js

Panduan Permulaan SEO Google

Data Berstruktur Schema.org

Open Graph Protocol

Kad Twitter

Atas ialah kandungan terperinci Meningkatkan Apl Next.js Anda dengan SEO: Melaksanakan Metadata Statik & Dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

json Static if for using JS this boosting SEO

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Mendekati Pelbagai Algoritma Pokok menggunakan JavascriptArtikel seterusnya：Mendekati Pelbagai Algoritma Pokok menggunakan Javascript

Artikel berkaitan

Lihat lagi