Тэхнічны SEO ў Next.js App Router: метаданы, карты сайту і JSON-LD

Прыклад аплікацыі Next.js можа выглядаць готовай, але для пошуковых сэрвісаў застаецца важкай для аналізу: сторанкі не маюць канонічных URL-адрэс, правілы краулера не вказаны, а новы контэнт ніколі не патрапляе у сайт-карту. У этам кераванні практыкай адбываецца пераход апо сайту з макетнымі дадзеннямі пры викорыстоўванні API, які мае многа сторанак з ресурсамі, ад першага аудыту SEO за дапамою Lighthouse да рэзультата 100, пры чым паказаны семь змян, якія былі здабыты за дапамою вбудованых API метадаў App Router.

Стварэнне метадаў сторанкі з адной дапаможнай функцыі

Ручныя змены метадаў на кожной сторанцы ведуць да некаляканасцяў, напрыклад, да відсутнасці канонічнага URL-адрэсы тут або застарелаг заглавля Open Graph там. Невялікая фабрыкака вырашае гэтыя проблемы: кожная сторанка передае толькі сваё заглавля, апісанне, шлях і неабяжнае пазначэння noIndex, а дапаможная функцыя ператварае іх у канонічныя, роботы і Open Graph поля:

export function createPageMetadata({
  title,
  description,
  path,
  noIndex = false,
}: PageMetadata) {
  return {
    title,
    description,
    alternates: {
      canonical: path,
    },
    robots: noIndex ? "noindex, nofollow" : "index, follow",
    openGraph: {
      title,
      description,
      url: path,
      type: "website",
    },
  };
}

Індексаванне ўвімкнута за замовчанням: адна пазначка переключае сторніцу на режым noindex, nofollow. Пакалькі, што path ўжоўся як абсалютны, дапаможнік павязаны з базовым URL, заданым у корневай структуре.

Установіце стандарты для всіх стораніцаў у корневай структуре

Усё, што ўжоўваецца на всіх стораніцах сайту, павінна быць у экспортным файле metadata з файла layout.tsx:

• metadataBase
• шаблон заглавля
• стандартны апіс
• стандарты Open Graph
• настройкі карточкі Twitter
• стандарты robots
• атрыбут lang на элементе <html>

Скорачаная версія гэтага экспорту выглядае так:

export const metadata: Metadata = {
  metadataBase: new URL("https://mockdata.ir"),
  title: {
    default: "MockData",
    template: "%s | MockData",
  },
  description: "...",
};

За дапамою шаблона %s | MockData сторанка пад назвай «Users API» атрыбутуецца назвай «Users API | MockData», тады як сторанкі без назвы викорыстоўваюць default. metadataBase адпаведна ператварае вялікія значэння параметра canonical і URL для Open Graph, якія вказаны ў хелперы, у абсалютныя URL-адрэсы. Заўважыце, што lang не ёсць полем метадаў; яго трэба задаць у таге <html>, які відображаецца у лейауте.

Задаць правілы краулера за дапамою robots.ts

У зменшэнне на тое, каб правілы краулера засталі незаданымі, неабходна стварыць файл robots.txt на адной з файлаў app/robots.ts, якія вяртаюць об’ект типу MetadataRoute.Robots.

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
    },
    sitemap: "https://mockdata.ir/sitemap.xml",
  };
}

Ён спецыяльна зроблены мінімалістскі: усе прыемнікі можаць краулераваць все, а месца знаходжэння сайтмапа ўказваецца явна.

Стварыць сайтмап на адной з вашых дадзеных

З-баўтовыя сторанцы для корыстнікаў, паспэўдак, продуктав і іншага не дазволяюць адпаведна раскрывацца за дапамогою ручна адтульнаванага XML-карты сайта. Стандартны экспорт sitemap.ts можа быць async, тады ён можа запытваць той жа істочнік, які викорыстоўваюць сторанцы:

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const resources = await getPublicResources();

return [
    {
      url: "https://mockdata.ir",
      lastModified: new Date(),
    },
    ...resources.map((resource) => ({
      url: `https://mockdata.ir/${resource.slug}`,
      lastModified: resource.updatedAt,
    })),
  ];
}

Кожны ресурс адпавядае URL, у яком updatedAt выступае як lastModified, таму новыя публічныя ресурсы аўтаматычна прыўлікаюцца да карты сайта. Аднак ёсць адна проблема: new Date() для галоўнай сторанцы пазначае змяну ў кожны момент стварэння; асалоджэнне рэальнага часу стварэння кантэнту є болей правдзівым.

Дадавайце структураваныя даны толькі там, дзе гэта правдзіва

JSON-LD з лексыканам Schema.org паведамляе пошуковыя системы, што представляе сабою сторанца. Сама аплікацыя описваецца як SoftwareApplication, а викорыстоўваныя тыпы ёсць:

• WebSite
• Organization
• SoftwareApplication

BreadcrumbList

Старацеся працаваць з точнасцю, а не з великім об’ёмам: маркап должен описваць тыя данні, які насправды ўстаўлены на сторанцы. Вымышлёныя адзінкі, рэйтынгі чы іншыя фальшывыя характэрыстыкі ўводзяць у глухое і можа нарабіць прыгожданняяў з правіламі пошуковых систем.

Зберагаце цэласнасць паводзакоў між UI і схемай

Структурованыя сторонкі дакументацыі паказваюць видны шлях, напрыклад Home → Docs → Users API, і тая ж хіярархія выдаецца як структурованыя данні BreadcrumbList. Видны шлях і маркап завжды должны описваць тую ж структуру.

Рэгулярна перагледзайце кожную сторанку, якая можа быць індексаваная

На завершанне аднаццаўкава перагляньце кожную публічную сторанку:

• Чы ёсць там роўна адна чытальная H1?
• Чы загалоўкі описвае самэ гэтую сторанку?
• Чы апіс паспаўляе рэальнаму кантэнту?
• Чы ёсць корыстныя внутраніяяе звязкі на і з гэтай сторанкі?
• Чы гэтую сторонку взагалі трэба індексаваць?
• Чы якія-небудзь порожнія або малаважныя сторонкі ўразлежны для краулераў?

Не кожны маршрут патрабуецца ў рэзультатах пошуку; noindex часта ёсць правы выбар. Чаго стосуецца структуры заголовкаў, паказвае гід па семантычнаму HTML.

Што значыць і чаго не значыць ідеальны бал SEO Lighthouse

Пасля гэтых парадактаванняў Lighthouse адзвярнуў бал SEO у розмере 100. Гэтыя цифры пераканальваюцься тэхнічнымі аспектамі, такімі як заглавы, апісанні і можлівасць краулінга; яны нічога не сказваюць пра рангаванне. Рангаванне залежыць ад якосці контэнту, намеру пошуковіка, автарытету, бэклінкуў, конкурэнцыі, выконання і багацько іншых фактараў.

Праўая цэннасць — это чыстае аднойчынне. Адрабатка аудыту пры выкліканні будь-якага дапрыемку Next.js ёсць недорогай і дазволяе выявіць багато маленькіх парадактаванняў.

Галоўныя вывары

• Централізаваць метаданы кожнай сторонічкі в адпаведным дапаможным элементе і задаць спакульнае значэння за замовчаннем, укладаючы metadataBase у корэневы лейяут.
• Іспользаваць robots.ts і асінхронны sitemap.ts, каб правіла краулера і URL-адрэсы заставаліся сінхроннымі з вашымі дадзеннямі.
• Даўаць толькі структураваныя дадзеныя, якія правдазна апісваюць сторанку, і заставляць паходныя жылкі аднойчынымі як у інтэрфейсе, так і ў схеме.
• Вважаць noindex правамі выборам для старанак, якія не павінны быць у рэзультатах пошуку.
• Оцэнку Lighthouse у 100 чытаць як „тэхнічна правильную“, а не як гаранцыю рангавання.