Тэхнічныя прыемкі 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, які можна індексавацыяваць, унікальныя метаданы, семантыку, карты сайту і ліміты працэздатнасці — пасля дазвольце командам з контэнту выканаць свою работу на надзеяных адміністратыўных падставах.

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

Лепшае выбір — маленькія прыклады, якія чытальнікі можаюць запісаць у сандбокс без наявнасці манорепа.

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

Усе артыкулы Даслаць брыф