Оптимизация SEO с новейшими функциями NEXT.JS 13.4

Содержание

1. Введение
2. Улучшение SEO-рейтинга с помощью Nexus 13.4
3. Улучшение SEO-показателей веб-приложений
   • 3.1 Создание метаданных страниц
   • 3.2 Определение канонического URL
   • 3.3 Верификация сайта в Google
   • 3.4 Файл robots.txt
   • 3.5 Создание карты сайта
   • 3.6 Создание динамической иконки для каждой страницы
   • 3.7 Создание изображений Open Graph
4. Заключение
5. Часто задаваемые вопросы

📝 Улучшение SEO-рейтинга с помощью Nexus 13.4

Введение: Здравствуйте, разработчики! Допустим, вы создали замечательное приложение на Nexus, но если пользователи не могут найти его в поисковых системах, ваш маршрут будет неполным. В этом уроке я покажу вам, как мы можем улучшить SEO-рейтинг наших веб-приложений с помощью новейших функций, предлагаемых версией 13.4 Nexus. Доверьтесь мне, эти функции потрясающие, и вы не захотите их пропустить. Давайте начнем!

Улучшение SEO-показателей веб-приложений

3.1 Создание метаданных страниц

Перед тем как приступить к созданию интересного и современного веб-дизайна, я хочу показать вам, как мы можем использовать новейшие возможности версии 13 Nexus для улучшения SEO любого веб-приложения. Давайте начнем с чего-то простого и создадим заголовок и описание для страниц нашего приложения. В файле vs code перейдите на домашнюю страницу и экспортируйте объект метаданных:

export const metadata = {
  title: "Заголовок нашей страницы",
  description: "Описание для нашей страницы",
};

3.2 Определение канонического URL

Канонический URL - это предпочтительный или официальный URL веб-страницы, используемый для объединения сигналов ранжирования для этой страницы по нескольким URL-адресам, которые могут на него указывать. Это очень важно, потому что поисковые системы иногда видят разные URL-адреса, ведущие к одному и тому же содержимому, что может разбить сигналы ранжирования и разбавить видимость страницы в результатах поиска. Указывая канонический URL, мы можем сообщить поисковым системам, какую версию страницы они должны считать основной для индексации и ранжирования. Насколько я понимаю, в Nexus последних версий это можно сделать следующим образом:

export const metadata = {
  title: "Заголовок нашей страницы",
  description: "Описание для нашей страницы",
  canonical: "https://dummyblog.com/post"
};

3.3 Верификация сайта в Google

Верификация сайта в Google - это мета-тег, который владелец веб-сайта может добавить в HTML-код своего сайта, чтобы Google мог подтвердить владение этим сайтом. Чтобы использовать этот мета-тег, владелец сайта должен сначала зарегистрироваться в системе Google Search Console и получить уникальный код верификации, который следует добавить в HTML-код вместе с мета-тегом верификации Google. После завершения процесса верификации владелец сайта получает доступ к ряду функций в системе Google Search Console, таких как данные о поисковых запросах, обратных ссылках и т. д. Чтобы добавить этот идентификатор верификации Google в объект метаданных нашего веб-приложения, мы можем сделать следующее:

export const metadata = {
  title: "Заголовок нашей страницы",
  description: "Описание для нашей страницы",
  googleSiteVerification: "Ваш_идентификатор_верификации_в_Google",
};

3.4 Файл robots.txt

Файл robots.txt - это текстовый файл, который создают владельцы веб-сайтов для указания веб-роботам, как индексировать страницы на их веб-сайте. В этом файле указывается, какие области вашего веб-сайта не должны быть сканером веб-роботов или проиндексированы, например, если у вас есть страница администратора, которую вы не хотите, чтобы веб-краулеры индексировали. Взглянем на документацию Nexus.JS. В Nexus.JS можно создать файл robots.txt следующими тремя способами:

• Создать файл robots.txt внутри папки приложения и указать настройки файла robots.txt.
• Создать файл robots.ts, экспортировать объект конфигурации файла robots.txt.
• Вернуть конфигурацию файла robots.txt в качестве объекта внутри объекта метаданных наших страниц.

В этом учебном пособии мы выберем третий вариант. Перейдите в начальный макет вашего веб-приложения и добавьте следующий код в объект метаданных:

export const metadata = {
  title: "Заголовок нашей страницы",
  description: "Описание для нашей страницы",
  robots: {
    index: false,
    noCache: true,
  },
};

3.5 Создание карты сайта

Карта сайта представляет собой файл, который указывает на структуру вашего веб-сайта и предоставляет информацию о страницах, содержащихся в этом веб-сайте. Карта сайта помогает поисковым системам эффективно индексировать все страницы вашего веб-сайта и улучшает их видимость в поисковой выдаче. В Nexus.JS можно создать карту сайта динамически для всех маршрутов вашего веб-приложения, включая динамические маршруты. Допустим, у нас есть следующие маршруты: домашняя страница, страница "О нас" и маршрут постов блога. Чтобы создать карту сайта, создайте файл sitemap.ts в директории приложения и включите следующий код:

export default async function sitemap(req, res) {
  const baseURL = "https://dummyblog.com"; // Базовый URL вашего веб-приложения
  const posts = await getAllPosts(); // Получение всех постов из базы данных

  const sitemapRoutes = [
    { url: baseURL, lastModified: new Date() },
    { url: `${baseURL}/about`, lastModified: new Date() },
    ...posts.map((post) => ({
      url: `${baseURL}/post/${post.slug}`,
      lastModified: post.updatedAt,
    })),
  ];

  const sitemap = `
    <?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      ${sitemapRoutes
        .map(
          (route) => `
            <url>
              <loc>${route.url}</loc>
              <lastmod>${route.lastModified}</lastmod>
            </url>
          `
        )
        .join("")}
    </urlset>
  `;

  res.setHeader("Content-Type", "text/xml");
  res.write(sitemap);
  res.end();
}

3.6 Создание динамической иконки для каждой страницы

Вы можете создать динамическую иконку для каждой страницы вашего веб-приложения, чтобы они различались друг от друга и удовлетворяли потребностям каждой страницы. Для этого нужно создать файл icon.tsx рядом с вашим компонентом страницы. Внутри файла icon.tsx вы можете определить размер и тип изображения, а затем экспортировать функцию icon, которая будет возвращать объект класса ImageResponse. Это может выглядеть следующим образом:

import { ImageResponse } from "next/server";
import iconImage from "./icon.png";

const size = {
  width: 32,
  height: 32,
};

export const contentType = "image/png";

export default function icon(): ImageResponse {
  const image = `
    <div style="background-color: black; color: white; display: flex; align-items: center; justify-content: center;">
      <span>DB</span>
    </div>
  `;

  return new ImageResponse(image, size, contentType);
}

3.7 Создание изображений Open Graph

Изображения Open Graph - это изображения, которые отображаются при обмене веб-страницей в социальных сетях, таких как Facebook, Twitter или LinkedIn. Это миниатюры страницы, которая отображается при ее обмене в социальных сетях. Для каждой страницы вашего веб-приложения вы можете создать изображение Open Graph, которое будет отображаться при ее обмене в социальных сетях. Чтобы создать изображение Open Graph для страницы поста, вам нужно создать файл og_image.tsx рядом с файлом страницы поста. В этом файле вы можете экспортировать функцию OG, которая будет получать доступ к пропсам страницы и возвращать экземпляр класса ImageResponse. Вот пример того, как это может выглядеть:

import { ImageResponse } from "next/server";
import postBanner from "./post_banner.png";

const size = {
  width: 900,
  height: 450,
};

export const contentType = "image/png";

export default async function OG(props: Props): Promise<ImageResponse> {
  const post = await getPostBySlug(props.slug);

  const image = `
    <div>
      <img src="${postBanner}" alt="${post.title}" style="border-radius: 5px;">
      <div>${post.title}</div>
      <div>${post.author}</div>
      <div>${post.updatedAt}</div>
    </div>
  `;

  return new ImageResponse(image, size, contentType);
}

Заключение

В этом уроке мы изучили, как улучшить SEO-рейтинг наших веб-приложений с помощью новейших функций, предлагаемых Nexus 13.4. Мы рассмотрели создание метаданных для страниц, определение канонического URL, верификацию сайта в Google, настройку файла robots.txt, создание карты сайта, динамическую иконку для каждой страницы и изображения Open Graph. Все эти инструменты помогут вашему веб-приложению достичь лучших результатов в поисковых системах и улучшить его видимость в социальных сетях.

❓ Часто задаваемые вопросы

Вопрос: Как я могу определить метаданные для каждой страницы в Nexus 13.4?

Ответ: В Nexus 13.4 вы можете определить метаданные для каждой страницы, экспортировав объект-метаданные с необходимыми полями, такими как заголовок и описание.

export const metadata = {
  title: "Заголовок страницы",
  description: "Описание страницы",
};

Вопрос: Как я могу создать канонический URL для страницы в Nexus 13.4?

Ответ: В Nexus 13.4 вы можете создать канонический URL для страницы, добавив поле canonical в объект-метаданные и указав URL-адрес страницы.

export const metadata = {
  title: "Заголовок страницы",
  description: "Описание страницы",
  canonical: "https://example.com/page",
};

Вопрос: Как я могу создать карту сайта для моего веб-приложения в Nexus 13.4?

Ответ: В Nexus 13.4 вы можете создать карту сайта динамически для всех маршрутов вашего веб-приложения, включая динамические маршруты. Для этого вы должны создать файл sitemap.ts и определить маршруты вашего веб-приложения.

export default async function sitemap(req, res) {
  const baseURL = "https://example.com";
  const posts = await getAllPosts();

  const sitemapRoutes = [
    { url: baseURL, lastModified: new Date() },
    { url: `${baseURL}/about`, lastModified: new Date() },
    ...posts.map((post) => ({
      url: `${baseURL}/post/${post.slug}`,
      lastModified: post.updatedAt,
    })),
  ];

  // Генерируем XML-строку, используя sitemapRoutes

  res.setHeader("Content-Type", "text/xml");
  res.write(sitemap);
  res.end();
}

Вопрос: Как я могу создать пользовательские иконки для каждой страницы в Nexus 13.4?

Ответ: В Nexus 13.4 вы можете создать пользовательские иконки для каждой страницы, экспортировав функцию icon, которая возвращает объект класса ImageResponse. В этой функции вы можете определить изображение и его стиль.

import { ImageResponse } from "next/server";

const size = {
  width: 32,
  height: 32,
};

export const contentType = "image/png";

export default function icon(): ImageResponse {
  const image = `
    <div style="background-color: black; color: white; display: flex; align-items: center; justify-content: center;">
      <span>DB</span>
    </div>
  `;

  return new ImageResponse(image, size, contentType);
}

Вопрос: Как я могу создать изображения Open Graph для моих страниц в Nexus 13.4?

Ответ: В Nexus 13.4 вы можете создавать изображения Open Graph для каждой страницы, экспортировав функцию OG, которая возвращает объект класса ImageResponse. В этой функции вы можете определить изображение и его стиль, например, задать текст и фон.

import { ImageResponse } from "next/server";
import postBanner from "./post_banner.png";

const size = {
  width: 900,
  height: 450,
};

export const contentType = "image/png";

export default async function OG(props: Props): Promise<ImageResponse> {
  const post = await getPostBySlug(props.slug);

  const image = `
    <div>
      <img src="${postBanner}" alt="${post.title}" style="border-radius: 5px;">
      <div>${post.title}</div>
      <div>${post.author}</div>
      <div>${post.updatedAt}</div>
    </div>
  `;

  return new ImageResponse(image, size, contentType);
}