Новый API метаданных в NEXT JS для улучшения SEO

Что такое SEO?

SEO, что означает Search Engine Optimization, - это набор методов, используемых для улучшения видимости и ранжирования веб-сайтов и веб-страниц на страницах результатов поисковых систем (SERP), таких как Google, Bing и Yahoo.

Как NEXTJS помогает улучшить SEO?

NEXTJS поставляется со встроенными функциями и оптимизациями, которые могут помочь улучшить SEO вашего сайта. Вот некоторые способы использования NEXTJS для улучшения SEO:

Рендеринг на стороне сервера
Автоматическое разделение кода
Динамические метатеги
Генерация Sitemap
Оптимизированные изображения
Интеграция Schema.org

Давайте рассмотрим, как традиционно задавались метаданные в NEXTJS, прежде чем мы изучим новый API метаданных.

Как установить статические метаданные в NEXTJS?

В NEXTJS вы можете установить статические метаданные в компоненте Head, определив метаданные непосредственно в JSX-коде компонента. Вот как установить статические метаданные в NEXTJS:

import Head from 'next/head';

function MyPage() {
  return (
    <>
      <Head>
        <title>My Page Title</title>
        <meta name="description" content="My page description" />
      </Head>
      {/* page content */}
    </>
  );
}

export default MyPage;

Как установить динамические метаданные в NEXTJS?

В NEXTJS вы можете динамически устанавливать метаданные, передавая реквизиты компоненту Head. Вот как динамически установить метаданные в NEXTJS:

export async function getStaticProps() {
  const pageTitle="My Page Title";
  const pageDescription="My page description";

  return {
    props: {
      pageTitle,
      pageDescription
    }
  }
}

function MyPage({pageTitle, pageDescription}) {
  return (
    <>
      <Head>
        <title>{pageTitle}</title>
        <meta name="description" content = {pageDescription} />
      </Head>
      {/* page content */}
    </>
  );
}

export default MyPage;

Как установить динамические метаданные с помощью New Metadata API в NEXTJS 13.2?

В NEXTJS вы можете динамически устанавливать метаданные с помощью нового API Metadata, позволяющего определять метаданные (например, теги title, meta и link внутри элемента HTML head) путем экспорта объекта Metadata из макета или страницы.

// either Static metadata
export const metadata = {
  title: 'Page title',
};

// Output:
// <head>
//   <title>Page title</title>
// </head>

// or Dynamic metadata
export async function generateMetadata({ params, searchParams }) {
  const details = await getPageDetails(params.id);
  return { title: details.title };
}
// Output:
// <head>
//   <title>My Unique Page title</title>
// </head>

function MyPage() {
  return (
    <>
      {/* page content */}
    </>
  );
}

export default MyPage;

API метаданных в NEXTJS 13.2 поддерживает новое соглашение на основе файлов в дополнение к метаданным на основе конфигурации. Это позволяет легче настраивать веб-страницы для улучшения их SEO и возможностей обмена.

opengraph-image. (jpg | png | svg)
twitter-image. (jpg | png | svg)
favicon.ico
иконка. (ico | jpg | png | svg)
sitemap.( xml | js | jsx | ts | tsx )
robots.( txt | js | jsx | ts | ts | tsx )
manifest.( json | js | jsx | ts | ts | tsx )

В качестве примера использования метаданных на основе файлов, вы можете использовать его для включения фавикона для вашего приложения и изображения открытого графа для вашей /home страницы.

src
-> pages
  -> contact-us
    -> index.js
  -> home
    -> index.js
    -> opengraph-image.svg

При использовании метаданных на основе файлов в NEXTJS файлы будут автоматически передаваться с хэшированными именами файлов для целей кэширования в продакшене. Кроме того, Next.js будет обновлять соответствующие элементы заголовка с соответствующими метаданными, такими как URL актива, тип файла и размер изображения.

// Visiting "/contact-us"
<link rel="icon" href="<computedUrl>"/>

// Visiting "/home"
<link rel="icon" href="<computedUrl>"/>
<meta property="og:image" content="<computedUrl>" type="<computedType>" ... />

API метаданных теперь предлагает варианты как на основе конфигурации, так и на основе файлов, обеспечивая полное решение для управления как статическими, так и динамическими метаданными.

Вы можете получить дополнительную информацию о метаданных на основе файлов и ознакомиться со справочником API, чтобы понять, как использовать эту функцию в вашем приложении. Обратите внимание, что доступность API метаданных может отличаться в зависимости от используемой платформы или приложения.