Softonic

Generator metatagów

Krok 1 / 3
Podstawowe SEO
0/60
0/160
Robots
Dalej

Wypełnij formularz, tytuł strony, opis, kanoniczny adres URL, obraz do mediów społecznościowych, autor, nazwa witryny oraz nazwa konta na Twitterze, a generator utworzy gotowy do wklejenia blok metatagów, obejmujący podstawy SEO, Open Graph (dla Facebooka, LinkedIn, Discorda, Slacka), kartę Twittera, ikonę favicon lub Apple Touch oraz opcjonalny Schema.org JSON-LD dla artykułu lub produktu. Przydatny przy ręcznym konfigurowaniu statycznej witryny lub dodawaniu metadanych do systemu zarządzania treścią, który udostępnia jedynie surowy edytor <head>.

Jak stworzyć fragment nagłówka

  1. 1

    Wpisz metadane strony

    Tytuł, opis, kanoniczny adres URL, autor, nazwa witryny.

  2. 2

    Dodaj adres URL obrazu społecznościowego

    Używany zarówno przez `og:image`, jak i `twitter:image`. Rozmiar 1200×630 jest idealny.

  3. 3

    Wybierz opcje

    Typ karty Twittera, dyrektywy robots, kolor motywu, typ Schema.org.

  4. 4

    Skopiuj wynik

    Blok tagów HTML `<meta>` gotowy do wklejenia między `<head>...</head>`.

Co generuje generator

<!-- Primary Meta -->
<title>Page title, Site name</title>
<meta name="description" content="A 150-character summary of the page content.">
<link rel="canonical" href="https://example.com/page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Page title">
<meta property="og:description" content="Same description or a social-optimized one">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:site_name" content="Site name">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@siteaccount">
<meta name="twitter:creator" content="@authoraccount">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/og-image.jpg">

<!-- Icons -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#0b5ed7">

Wskazówki dla każdego pola

  • Tytuł: 50–60 znaków. Uwzględnij główne słowo kluczowe. Umieść nazwę marki na końcu: Page title, Brand.
  • Opis: 140–160 znaków. Dobrze się czyta samodzielnie. Unikaj szablonowych formuł powtarzających się na różnych stronach.
  • Kanoniczny: bezwzględny adres URL, w tym https://; zgodny z og:url.
  • Obraz OG: co najmniej 1200×630 px (zalecany przez Facebooka stosunek 1,91:1); format JPG lub PNG; rozmiar poniżej 8 MB.
  • Karta Twittera: summary_large_image, jeśli masz dobre zdjęcie; summary w przypadku małej miniatury.
  • Robots: index, follow dla stron publicznych; noindex, nofollow dla treści testowych lub ubogich.

Dodatkowe opcje

  • JSON-LD dla artykułu lub produktu umożliwia Google wyświetlanie wzbogaconych wyników (autor, data publikacji, cena, gwiazdki ocen).
  • theme-color zmienia kolor interfejsu przeglądarki w Android Chrome i iOS Safari.
  • og:locale dla stron wielojęzycznych (np. en_US, es_ES).
  • Dodatki do og:type=article: article:published_time, article:author, article:section, article:tag.

Najczęstsze błędy, którym ten generator zapobiega

  • Pominięcie tagu viewport. Twoja strona wyświetla się na urządzeniach mobilnych w szerokości pulpitu, przy poziomie powiększenia 0,3.
  • Różne tytuły w <title>, og:title i twitter:title. Niespójne karty udostępniania.
  • Względne adresy URL obrazów w og:image. Facebook nie potrafi ich rozwinąć; karta nie zostaje wyrenderowana.
  • Brak og:type. Wartości domyślne działają, ale Facebook woli jawną wartość.

Najczęściej zadawane pytania

Technicznie Twitter korzysta z Open Graph, gdy brakuje jego własnych tagów, więc jeśli ustawisz tylko OG, Twitter i tak wyświetli kartę. Dodanie tagów specyficznych dla Twittera pozwala dostosować sposób wyświetlania (np. inny stosunek boków obrazu).

1200×630 px (1,91:1). Facebook i LinkedIn wyświetlają obraz w pełnym rozmiarze; Twitter przycina go do karty podsumowania. Nie umieszczaj istotnych treści na krawędziach, centralne 60% obrazu stanowi bezpieczną strefę.

Nie. Strony bez niego również dobrze się pozycjonują. JSON-LD włącza funkcje wzbogaconych wyników (karty przepisów, akordeony FAQ, listy produktów), gdy typ treści odpowiada schematowi Schema.org. Dodaj go tam, gdzie pasuje.

Między elementami <head> a </head> w Twoim kodzie HTML należy umieszczać te elementy przed jakimikolwiek zewnętrznymi arkuszami stylów lub skryptami, które mogłyby opóźnić dostęp analizatora do nich.

Nie. Wszystko jest generowane lokalnie w Twojej przeglądarce.

Powiązane narzędzia

Tabela ASCII

Pełna tabela ASCII od 0 do 127 z zapisem dziesiętnym, szesnastkowym, ósemkowym i binarnym oraz notacją numerycznych odwołań HTML, w tym kodami sterującymi NUL, LF i DEL.

Referencja znaków HTML

Przeszukiwalna lista encji HTML wraz z ich kodami nazwanymi i liczbowymi oraz kopiowaniem jednym kliknięciem specjalnych znaków i symboli.

Skróty klawiaturowe

Wyszukuj udokumentowane skróty domyślne VS Code, Chrome i Bash z GNU Readline w macOS, Windows i Linux.

Generator EditorConfig

Wygeneruj plik .editorconfig z własnymi regułami stylu i rozmiaru wcięć, końca linii, kodowania i białych znaków, aby uzyskać spójne formatowanie w różnych IDE i edytorach.

Walidator adresów e-mail

Zweryfikuj adres e-mail: sprawdzenie składni RFC 5322, sprawdzenie rekordu MX w czasie rzeczywistym oraz szczegóły dotyczące części lokalnej, domeny i długości. Żadna wiadomość nie jest wysyłana.

Formatowanie HTML

Formatuj HTML lokalnie w przeglądarce, używając wcięć dwóch lub czterech spacji. HTML nie jest wysyłany ani walidowany.

Narzędzie jest dostępne w innych językach