Технічні помилки SEO у сучасних фронтендах на JavaScript

Рендеринг лише для клієнтів, проблеми з метаданими, семантика, CWV, помилки роботів та динамічні маршрути — рішення для інженерних команд.

830 слів

Дев’ять технічних помилок SEO у сучасних JS-додатках

React, Vue та Next роблять створення складних додатків простим — а також полегшують створення HTML-контенту, з яким мають труднощі пошукові роботи. SEO — це інженерія, а не лише написання тексту.

1. Отримання контенту лише на клієнтській стороні

<div id="root"></div>
<script src="app.js"></script>

Якщо перша відповідь — це порожня структура, деякі боти не бачать нічого корисного. Для публічного контенту краще використовувати SSR/SSG або гібридний спосіб отримання контенту.

2. Відсутність або ненадійні метадані

export default async function ProductPage() {
  const product = await getProduct();

  return (
    <main>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </main>
  );
}

Заголовки та описи мають бути стабільними для кожної URL. Їх генерація лише у функції useEffect є класичною помилкою.

3. Ігнорування семантичного HTML

<title>My Application</title>
<meta name="description" content="Welcome to my app">

Заголовки, визначні елементи та значущі компоненти допомагають як забезпеченню доступності, так і пошуковим роботам. Використання безлічі елементів типу Div приховує структуру.

4. Неправильні припущення щодо навігації на клієнтській стороні

export const metadata = {
  title: "Modern React Performance Guide",
  description:
    "Learn practical techniques for improving React application performance.",
};

Переконайтеся, що кожен елемент, який можна поширити, має справжню URL, а також що навігація оновлює метадані.

5. Відсутність структурованих даних

<div>
  <div>Article Title</div>
  <div>Article content</div>
</div>

JSON-LD для статей, продуктів та часто задаваних запитань може покращити якість результатів, якщо він узгоджується з видимим контентом.

6. Слабкі показники Core Web Vitals

<article>
  <header>
    <h1>Technical SEO Mistakes</h1>
  </header>

  <section>
    <p>Article content...</p>
  </section>
</article>

Великі пакети JS та запізніло завантажувані зображення погіршують показники LCP/INP. Розділяйте код, оптимізуйте медіа та вимірюйте дані з поля.

7. Випадкове блокування пошукових роботів

<Link href="/products/react-course">
  React Course
</Link>

Неправильно налаштований файл robots.txt, параметр noindex для продакшн-версії чи захисні бар’єри на маркетингових сторінках можуть миттєво знищити рейтинги.

8. Динамічні маршрути без стратегії індексації

<button onClick={() => navigate("/products/react-course")}>
  React Course
</button>

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Technical SEO Mistakes Developers Make",
  "author": {
    "@type": "Person",
    "name": "Developer"
  }
}

Сайт-карти, стабільні ідентифікатори елементів та детальні сторінки, генеровані сервером, мають велике значення, коли ідентифікатори є нескінченними.

9. Розгляд SEO як частини маркетингу пізніше

const Chart = dynamic(() => import("./Chart"), {
  ssr: false,
});

<meta name="robots" content="noindex">

Включіть метадані, режим відображення та бюджети на продуктивність до критеріїв завершення роботи.

Виправлення, які варто повторювати

Disallow: /

/products/item-123
/blog/article-name
/users/profile-name

Надсилайте HTML, придатний для індексації, унікальні метадані, семантику, карти сайту та параметри продуктивності — щоб команди з контенту могли виконувати свою роботу на надійній основі.

Віддавайте перевагу невеликим прикладам, які читачі можуть скопіювати у сандбокс без використання монорепозиторію.

Краще використовувати невеликі приклади, які читачі можуть скопіювати у сандбокс без monorepo.

Усі статті Надіслати бриф