SEO On-Page z Next.js 14 Metadata API
Wykorzystaj pełną moc Metadata API do budowy SEO-friendly aplikacji. TypeScript, JSON-LD, dynamic metadata - wszystko w jednym miejscu.
Next.js 14 Metadata API to rewolucja w zarządzaniu SEO on-page. Zastępuje tradycyjne next/head, oferując TypeScript-first podejście, hierarchiczne dziedziczenie metadata i automatyczną optymalizację tagów. Idealne rozwiązanie dla firm z Lubina chcących zwiększyć widoczność w wyszukiwarkach.
Oferta specjalna dla firm z Dolnego Śląska:
- Migracja z next/head na Metadata API - 2 dni
- Implementacja JSON-LD dla 50 podstron
- TypeScript types dla całego projektu
Kluczowe cechy Next.js Metadata API
Wszystko czego potrzebujesz do profesjonalnego SEO on-page
Hierarchiczna architektura
Dziedziczenie metadata z layout.tsx
TypeScript typing
Pełne wsparcie dla typów TS
Dynamic metadata
generateMetadata() dla dynamicznych tras
Built-in optimization
Automatyczna deduplikacja tagów
Implementacja krok po kroku
Statyczne metadata w page.tsx
Podstawowa implementacja dla stron ze stałą treścią
// app/page.tsx - Statyczne metadata
import { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Zagor Digital - Agencja SEO Lubin',
description: 'Lokalne SEO i tworzenie stron dla firm z Lubina',
keywords: 'SEO Lubin, strony internetowe Lubin, marketing cyfrowy',
authors: [{ name: 'Zagor Digital' }],
creator: 'Zagor Digital',
publisher: 'Zagor Digital',
formatDetection: {
email: false,
address: false,
telephone: false,
},
openGraph: {
title: 'Zagor Digital - Agencja SEO Lubin',
description: 'Lokalne SEO i tworzenie stron dla firm z Lubina',
url: 'https://zagordigital.pl',
siteName: 'Zagor Digital',
images: [
{
url: 'https://zagordigital.pl/og-image.jpg',
width: 1200,
height: 630,
alt: 'Zagor Digital - SEO Lubin',
}
],
locale: 'pl_PL',
type: 'website',
},
twitter: {
card: 'summary_large_image',
title: 'Zagor Digital - Agencja SEO Lubin',
description: 'Lokalne SEO i tworzenie stron dla firm z Lubina',
images: ['https://zagordigital.pl/twitter-image.jpg'],
},
robots: {
index: true,
follow: true,
googleBot: {
index: true,
follow: true,
'max-video-preview': -1,
'max-image-preview': 'large',
'max-snippet': -1,
},
},
verification: {
google: 'google-site-verification-code',
yandex: 'yandex-verification-code',
},
}Zaawansowane funkcjonalności
Alternate Links & Hreflang
Automatyczne generowanie tagów hreflang dla wersji językowych:
alternates: {
canonical: '/produkty',
languages: {
'pl-PL': '/pl/produkty',
'en-US': '/en/products',
'de-DE': '/de/produkte',
},
}Open Graph Images
Dynamiczne generowanie OG images z Edge Runtime:
// app/og/route.tsx
export const runtime = 'edge'
export async function GET(request: Request) {
return new ImageResponse(
(<div style={{ display: 'flex', height: '100%', width: '100%' }}>
{/* OG Image JSX content */}
</div>)
)
}Sitemap & Robots.txt
Automatyczne generowanie sitemap.xml:
// app/sitemap.ts
export default function sitemap() {
return [
{
url: 'https://zagordigital.pl',
lastModified: new Date(),
changeFrequency: 'yearly',
priority: 1,
},
]
}SEO Monitoring
Integracja z Google Search Console API:
verification: {
google: 'google-site-verification',
yandex: 'yandex-verification',
bing: 'msvalidate.01=CODE',
}Korzyści z Next.js Metadata API
Migracja z next/head na Metadata API
Przed migracją:
- • next/head rozproszony w komponentach
- • Duplikacja meta tagów
- • Brak strukturalnych danych
- • Problemy z OG images
Po migracji:
- • Centralne zarządzanie metadata
- • TypeScript typing wszędzie
- • JSON-LD dla produktów
- • Dynamic OG images
Best Practices dla Next.js SEO
1. Hierarchia metadata
Wykorzystuj dziedziczenie metadata z layout.tsx. Definiuj wspólne metadata w root layout, a specyficzne nadpisuj w page.tsx:
app/layout.tsx → template: "%s | Zagor Digital"
app/uslugi/page.tsx → title: "Usługi" → wynik: "Usługi | Zagor Digital"2. Dynamic metadata optimization
Cachuj wywołania API w generateMetadata(). Używaj React cache() lub Next.js Data Cache:
const getCachedPost = cache(async (slug: string) => {
return await fetchPost(slug)
})3. Strukturalne dane dla każdej strony
Implementuj odpowiednie schematy Schema.org:
- • LocalBusiness dla strony głównej
- • Service dla stron usług
- • Article/BlogPosting dla bloga
- • FAQPage dla stron FAQ
- • BreadcrumbList dla nawigacji
Narzędzia do testowania SEO
Rich Results Test
Testuj strukturalne dane i podgląd rich snippets
Facebook Debugger
Sprawdź Open Graph tags i podgląd na Facebooku
Card Validator
Waliduj Twitter Cards i zobacz podgląd
Najczęściej zadawane pytania
Czy Metadata API zastępuje next/head?▼
Tak, Next.js 14 Metadata API całkowicie zastępuje next/head w App Router. Oferuje lepszą wydajność, TypeScript support i automatyczną deduplikację tagów. W Pages Router nadal używamy next/head, ale zalecana jest migracja na App Router.
Jak migrować z next/head na Metadata API?▼
Migracja wymaga: 1) Przeniesienia projektu na App Router, 2) Konwersji komponentów Head na obiekty metadata, 3) Implementacji generateMetadata() dla dynamicznych stron. Proces zajmuje 2-5 dni dla średniego projektu. Oferujemy pomoc w migracji dla firm z Lubina.
Czy metadata wpływają na Core Web Vitals?▼
Metadata API optymalizuje render meta tagów, redukując CLS. Streamowanie metadata w RSC poprawia LCP. Właściwe preload hints (generowane automatycznie) mogą znacząco poprawić INP. Widzieliśmy poprawę LCP o 15-20% po migracji.
Gotowy na profesjonalne SEO z Next.js 14?
Wdrożymy Metadata API, strukturalne dane i kompletną optymalizację SEO on-page. Profesjonalna implementacja zwiększająca widoczność w wyszukiwarkach.
Zapytaj o wdrożenie Next.js SEO
Skontaktuj się z nami
Wypełnij formularz, a skontaktujemy się z Tobą w ciągu 24 godzin