26. června 2025autor: Petr Sovadina6 min čtení1164 slov

📈 Next.js SEO — A Clean & Practical Checklist

Technology

Productivity

Pokud chcete, aby se vaše stránka Next.js skutečně zobrazovala na Googlu (a vypadala skvěle při sdílení na sociálních sítích), měli byste postupovat takto - krok za krokem.

🏷️ Meta tagy - proč na nich záleží

Meta tagy poskytují vyhledávačům a sociálním platformám informace o vaší stránce.

Pokud je vynecháte, může váš web vypadat na Googlu nebo Twitteru jako prázdná stránka.

👉 Vždy přidejte tyto základní meta značky:

Tag	Proč je důležitý
`title`	Název vaší stránky (to, co lidé vidí ve výsledcích vyhledávání Google)
`description`	Krátký popis (viditelný i ve výsledcích vyhledávání)
`keywords`	Nepovinné, Google je příliš nepoužívá, ale jsou neškodné
`robots`	Říká vyhledávačům, zda mají vaši stránku indexovat
`viewport`	Řídí, jak vaše stránky vypadají na mobilních zařízeních
`charSet`	Kódování znaků (standardem je UTF-8)

👉 Meta tagy Open Graph: (pro sdílení na sociálních sítích)

Tag	Proč je důležitý
`og:site_name`	Název vašeho webu
`og:locale`	Jazyk/lokální prostředí
`og:title`	Název při sdílení na sociálních sítích
`og:description`	Popis na sociálních sítích
`og:type`	`website` nebo `article`
`og:url`	URL stránky
`og:image`	Obrázek zobrazený v náhledu (použijte PNG/JPG - žádný WebP!)
`og:image:alt`	Alt text pro přístupnost
`og:image:type`	Typ obrázku (image/png)
`og:image:width` + `og:image:height`	Rozměry obrázku

👉 Značky Open Graph specifické pro daný článek:

(důležité pro příspěvky na blogu, články, zprávy)

Tag	Proč je to důležité
`article:published_time`	Kdy byl článek zveřejněn
`article:modified_time`	Čas poslední aktualizace
`article:author`	Jméno autora

👉 Meta tagy Twitteru: (pro náhledy na Twitter/X)

Tag	Proč je důležitý
`twitter:card`	Velké shrnutí obrázku
`twitter:site`	Rukojeť webu na Twitteru
`twitter:creator`	Údaj autora na Twitteru
`twitter:title`	Název na Twitteru
`twitter:description`	Popis na Twitteru
`twitter:image`	Adresa URL obrázku (opět PNG/JPG)

⚙️ Jak přidat meta tagy do Next.js

👉 V App Routeru definujte viewport + metadata:

export const viewport = {
  width: "device-width",
  initialScale: 1,
  themeColor: "#ffffff"
};

export const metadata = {
  title: "Site Title",
  description: "Krátký popis webu",
  keywords: Klíčová slova: ["keyword1", "keyword2"],
  openGraph: {
    siteName: "My Site",
    type: "site",
    locale: "en_US",
    images: [{ url: "<https://yoursite.com/og-image.png>", width: 1200, height: 630, alt: "Moje stránky" }]
  },
  twitter: {
    card: (vizitka): "twitter": (vizitka): (vizitka): (vizitka): (vizitka): (vizitka): (vizitka): (vizitka) "summary_large_image",
    title: "Název stránky",
    description: "Krátký popis webu",
    images: [{ url: "<https://yoursite.com/og-image.png>", width: 1200, height: 630, alt: "Moje stránky" }]
  },
  robots: {
    index: true,
    follow: true,
    googleBot: "index, follow"
  },
  alternates: {
    canonical: "<https://yoursite.com>"
  }
};

👉 Na dynamických stránkách (příspěvky na blogu) použijte generateMetadata():


export async funkce generateMetadata({ params }) {
  const post = await fetch(`VÁŠ_ENDPOINT/${params.slug}`).then(res => res.json());

  return {
    title: `${post.title} | My Site`,
    description: post.description,
    openGraph: {
      title: `${post.title} | My Site`,
      description: post.description,
      type: "article",
      url: `https://yoursite.com/${post.slug}`,
      publishedTime: post.created_at,
      modifiedTime: post.modified_at,
      authors: ["<https://yoursite.com/about>"],
      tags: post.categories,
      obrázky: post.txt: post.txt: [
        {
          url: `https://yoursite.com/assets/${post.slug}/thumbnail.png`,
          width: 1024,
          height: 576,
          alt: post.title
        }
      ]
    },
    twitter: {
      karta: "summary_large_image",
      title: `${post.title} | My Site`,
      description: post.description,
      images: [{ url: `https://yoursite.com/assets/${post.slug}/thumbnail.png`, width: 1024, height: 576, alt: post.title }]
    },
    alternates: {
      canonical: `https://yoursite.com/${post.slug}`
    }
  };
}

📜 JSON-LD schéma - proč se obtěžovat?

JSON-LD přidává "strukturovaná data" pro Google.

Pomáhá Googlu pochopit typ vaší stránky (příspěvek na blogu, produkt, událost...) a zlepšuje rich snippets.

👉 Příklad pro příspěvek na blogu:

Příklad: ```json

const jsonLd = { "@context": "https://schema.org", "@type": "BlogPosting", mainEntityOfPage: {"@type": "WebPage", "@id": "https://yoursite.com/my-post" }, headline: "Post Title", description: "Post description", image: "https://yoursite.com/assets/my-post/thumbnail.png", datePublished: "2024-01-11T11:35:00+07:00", dateModified: "2024-01-11T11:35:00+07:00", {"@type": "Person", name: "Your Name", url: "Vaše jméno": "https://linkedin.com/in/yourname" }, publisher: {"@type": "Person", name: "Your Name", logo: {"@type": "ImageObject", url: "https://yoursite.com/avatar. jpg" } }, inLanguage: "en-US", isFamilyFriendly: "true" };


👉 Vykreslete to ve své komponentě:

```tsx

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>

👉 Pro generování schémat použijte tento nástroj: https://technicalseo.com/tools/schema-markup-generator/

🗺️ Mapa stránek - proč ji potřebujete

Mapa stránek pomáhá Googlu procházet všechny vaše stránky. Bez ní se může stát, že některé hluboké odkazy nebudou nikdy zaindexovány.

👉 V routeru stránek:

Použijte next-sitemap


npm install next-sitemap
npx next-sitemap

👉 V App Routeru:

Ručně definujte app/sitemap.ts:


export default async function sitemap() {
  const pages = [
    { url: "<https://yoursite.com>", lastModified: new Date(), changeFrequency: "daily", priority: 1 },
    { url: "<https://yoursite.com/about>", lastModified: new Date(), changeFrequency: "měsíční", priorita: 0.9 }
    // další stránky
  ];

  return pages;
}

👉 Výsledek bude dostupný na adrese:

arduino
CopyEdit
<https://yoursite.com/sitemap.xml>

🤖 robots.txt - Řízení crawlerů

Soubor robots.txt říká vyhledávačům, které stránky mají procházet nebo ignorovat.

👉 V routeru stránek:

public/robots.txt:

makefile
CopyEdit
User-agent: *
Zakázat:
Sitemap: <https://yoursite.com/sitemap.xml>

👉 Blokování určitých stránek:


Zakázat: /search?q=
Zakázat: /admin

👉 Ve směrovači aplikací:

Definujte app/robots.ts:


exportovat výchozí funkci robots() {
  return {
    rules: {
      userAgent: "*",
      allow: ["/"],
      disallow: ]: ["/search?q=", "/admin"]
    },
    mapa stránek: ["<https://yoursite.com/sitemap.xml>"]
  };
}

🔗 Důležité značky odkazů

👉 Vždy si je zapište do hlavy:

Značka odkazu	Účel
`canonical`	Předcházejte problémům s duplicitním obsahem - sdělte Googlu "hlavní" adresu URL
`alternate`	Používá se u vícejazyčných stránek
`icon`	Favicon
`apple-touch-icon`	Ikona na domovské obrazovce iOS
`manifest`	Pro podporu PWA

Shrnutí - co byste měli udělat (minimální kontrolní seznam)

✅ Přidejte úplné Meta Tagy (název, popis, OG, Twitter)

✅ Přidejte JSON-LD schéma pro klíčové stránky

✅ Vygenerujte a naservírujte mapu stránek.xml

✅ Podejte soubor robots.txt.

✅ Zahrnout správné značky odkazů (kanonické, ikonové, manifestní).

Pokud toto vše splníte, vaše stránka Next.js bude:

✅ vypadat skvěle ve výsledcích vyhledávání

✅ zobrazovat bohaté náhledy na sociálních sítích

✅ Buďte plně procházitelní a indexovatelní společností Google