SEO basics для розробників

**Meta tags** - це теги в ``, які описують сторінку для браузерів, пошуковиків і соцмереж. Базовий приклад: ```html SEO basics для розробників ``` `title` - це назва сторінки. `description` - короткий опис сторінки. Погано: ```html Home ``` Краще: ```html Курс Next.js для початківців | Dev School ``` Також є meta robots: ```html ``` Це означає: ```txt index = можна індексувати сторінку follow = можна переходити по посиланнях на сторінці ``` А ось так сторінку можна закрити від індексації: ```html ``` Google підтримує robots meta tag і `X-Robots-Tag` для керування тим, як сторінка показується або не показується в пошуку. Документація: [Robots meta tag](https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag). --- **Canonical** потрібен, коли однаковий або дуже схожий контент доступний за різними URL. Наприклад: ```txt https://site.com/products/macbook https://site.com/products/macbook?sort=price https://site.com/products/macbook?utm_source=instagram ``` Для людини це майже одна й та сама сторінка. Для пошуковика - це різні URL. Щоб сказати Google, яка версія головна, додаємо canonical: ```html ``` Простими словами: ```txt Canonical = «ось основна версія цієї сторінки» ``` Це допомагає уникнути проблем із дубльованим контентом. У Next.js metadata: ```tsx export const metadata = { title: 'MacBook Pro 14', description: 'Огляд MacBook Pro 14 для розробників', alternates: { canonical: 'https://site.com/products/macbook', }, }; ``` --- **Open Graph** - це метатеги для красивого прев’ю, коли посилання поширюють у Telegram, Facebook, LinkedIn, Discord та інших платформах. Без Open Graph посилання може виглядати криво: без картинки, без нормального заголовка або з випадковим текстом. Приклад: ```html ``` Основні Open Graph теги: ```txt og:title - заголовок og:description - опис og:image - картинка прев’ю og:url - URL сторінки og:type - тип контенту ``` Офіційний Open Graph Protocol виділяє базові поля `og:title`, `og:type`, `og:image` та `og:url`. Див. [The Open Graph protocol](https://ogp.me/). У Next.js це можна зробити так: ```tsx export const metadata = { title: 'SEO basics для розробників', description: 'Базове SEO для frontend і fullstack розробників.', openGraph: { title: 'SEO basics для розробників', description: 'Crawling, indexing, meta tags, canonical, sitemap і robots.txt.', url: 'https://site.com/blog/seo-basics', siteName: 'Dev School', images: [ { url: 'https://site.com/og/seo-basics.png', width: 1200, height: 630, }, ], type: 'article', }, }; ``` Рекомендований розмір OG-картинки часто використовують: ```txt 1200 × 630 px ```