Generator tagów Open Graph

Wypełnij tytuł, opis, kanoniczny (canonical) URL, obraz podglądu i og:type, a ten generator zapisze odpowiednie tagi <meta> Open Graph, gotowe do wklejenia w sekcji <head> Twojej strony. Pola pozostawione puste są po prostu pomijane, a cudzysłowy i znaki & w Twoim tekście są escapowane, aby znaczniki pozostały poprawne. Generator zapisuje tylko pięć podstawowych właściwości og:, a nie tagi Twitter Card ani tagi artykułu.

Jak utworzyć swoje tagi OG

  1. 1

    Wybierz og:type

    website dla stron głównych, article dla wpisów, product dla stron sklepu, video.other dla osadzeń. To pole jest tekstem swobodnym, więc zadziała dowolna poprawna wartość og:type.

  2. 2

    Wypełnij kluczowe pola

    Tytuł, opis, kanoniczny URL i bezwzględny URL obrazu. Każde pole pozostawione puste jest pomijane w wyniku.

  3. 3

    Wygeneruj tagi

    Cudzysłowy i znaki & są escapowane za Ciebie, a dla każdego wypełnionego pola otrzymujesz jeden wiersz meta.

  4. 4

    Skopiuj blok do sekcji head

    Wklej go do `<head>` szablonu Twojej strony, powyżej wszelkich istniejących tagów społecznościowych.

Tagi generowane przez ten generator

<meta property="og:type" content="article">
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A one-line description.">
<meta property="og:url" content="https://example.com/post/123">
<meta property="og:image" content="https://example.com/og-image.jpg">

To cały wynik. og:type jest zapisywany zawsze, a og:title, og:description, og:url i og:image są dodawane tylko wtedy, gdy je wypełnisz. Tych pięć właściwości Facebook, LinkedIn, Slack, Discord, WhatsApp i X czytają jako pierwsze, więc pokrywają najczęstszy przypadek.

Generator nie zapisuje tagów kart twitter:, og:image:width / og:image:height, og:site_name, og:locale ani tagów article:. Jeśli ich potrzebujesz, dodaj je ręcznie obok wygenerowanego bloku.

Ważne wartości og:type

Typ Kiedy używać
website Strona główna, strony docelowe, treść statyczna
article Wpisy na blogu, wiadomości, strony redakcyjne
product Strony szczegółów produktu w e-commerce
video.other Treści wideo i osadzenia
profile Strony profili autorów lub użytkowników
music.song Strony pojedynczych utworów

Tagi, które warto dodać ręcznie

Tag Do czego służy Przykładowa wartość
og:site_name Nazwa całej witryny Example
og:locale Język i region strony en_US
og:image:width Pomaga scraperom szybciej rozmieścić kartę 1200
og:image:height Pomaga scraperom szybciej rozmieścić kartę 630
twitter:card Układ karty na X summary_large_image

X wraca do tagów og:, gdy nie ma tagów twitter:, więc strona zawierająca tylko pięć wygenerowanych właściwości nadal poprawnie wyświetla podgląd również tam. Dodawaj tagi twitter: tylko wtedy, gdy chcesz innego tytułu, opisu lub obrazu konkretnie na X.

Częste błędy, których pomaga uniknąć ten generator

  • name zamiast property. Właściwości Open Graph należą do property="og:...". Generator zawsze zapisuje poprawny atrybut.
  • Nieescapowane cudzysłowy i znaki &. Surowy znak " lub & w Twoim tytule psuje tag. Generator escapuje je za Ciebie.
  • Względne adresy URL obrazów. Scrapery społecznościowe przyjmują tylko bezwzględne adresy URL. Wklej pełny adres https:// obrazu, ponieważ generator nie dodaje Twojej domeny.
  • Nieprawidłowy rozmiar obrazu. 1200 × 630 pikseli to uniwersalnie bezpieczny rozmiar. Poniżej 200 × 200 pikseli obraz jest zwykle odrzucany.

Najczęściej zadawane pytania

W sekcji <head> Twojego HTML, wysoko, najlepiej w pobliżu <title>. Scrapery czytają head i często zatrzymują się wcześnie, więc trzymanie tagów OG blisko góry zapobiega ich pominięciu na bardzo dużych stronach.

Nie. Zapisuje tylko pięć podstawowych właściwości og:. X wraca do Open Graph, gdy brakuje tagów twitter:, więc Twój podgląd nadal działa. Dodawaj tagi twitter: ręcznie tylko wtedy, gdy chcesz innego tytułu, opisu lub obrazu na X.

1200 × 630 pikseli, JPG lub PNG, to uniwersalnie bezpieczny rozmiar. Działa na Facebooku, LinkedIn, dużych kartach X, Slacku, Discordzie i iMessage. Cokolwiek mniejszego niż 200 × 200 pikseli ryzykuje całkowite odrzucenie.

Nadaj każdej wersji językowej własną stronę z własnymi tagami og: i dodaj og:locale (na przykład en_US) oraz og:locale:alternate dla innych wersji ręcznie. Ten generator nie zapisuje za Ciebie tagów locale.

Powiązane narzędzia

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