Tagi Open Graph w praktyce, z kreatorem tagów na żywo | We.Inc
Cztery wymagane tagi Open Graph, właściwości obrazu, wartości og:type i tagi artykułu z objaśnieniami, plus kreator, który pisze kod do sekcji head.
Tagi Open Graph w praktyce
Tagi Open Graph to elementy meta w sekcji head strony, które decydują, jak wygląda udostępniony link. Protokół wymaga czterech: og:title, og:type, og:image i og:url. Każdy używa atrybutu property, na przykład meta property="og:title" content="...". Dodaj og:description, og:site_name oraz szerokość, wysokość i alt obrazu, aby podglądy były lepsze.
Cztery wymagane właściwości
Właściwość
Co w niej umieścić
og:title
Tytuł w takiej formie, w jakiej ma się pojawić na karcie udostępniania
og:type
Rodzaj obiektu, np. website lub article
og:image
Pełny URL obrazu podglądu
og:url
Kanoniczny URL identyfikujący stronę
Podglądy udostępnień powstają z kilku tagów, w których łatwo o drobny błąd: względna ścieżka obrazu, brak szerokości i wysokości albo tytuł istniejący tylko w elemencie title. Wypełnij kreator, aby dostać poprawny kod, a potem przeczytaj, do czego służy każda właściwość.
Wpisz w kreatorze tytuł, opis, URL strony i URL obrazu.
Wybierz typ: website dla większości stron, article dla wpisów na blogu.
Sprawdź przybliżony podgląd karty, a potem skopiuj wygenerowane tagi do sekcji head swojej strony.
Przetestuj opublikowaną stronę w debugerze udostępniania danej platformy, bo każda sieć przechowuje podglądy w pamięci podręcznej.
Używaj bezwzględnych adresów https dla og:image i og:url. Względne ścieżki to częsty powód, dla którego podglądy nie pokazują obrazu.
Dodaj og:image:width i og:image:height, aby aplikacja mogła poznać kształt obrazu z tagów bez mierzenia pliku.
Napisz og:image:alt dla osób korzystających z czytników ekranu na platformach społecznościowych.
Gdy zmieniasz obraz, użyj nowej nazwy pliku. Platformy przechowują obrazy w pamięci podręcznej, więc ponowne użycie starego URL może zostawić nieaktualny obraz.
Najczęściej zadawane pytania
Jaki rozmiar powinien mieć obraz Open Graph?
Protokół nie określa rozmiaru. 1200 na 630 pikseli to powszechnie używany rozmiar poziomy i właśnie tego rozmiaru używa w przykładach dokumentacja Next.js. Trzymaj ważny tekst z dala od krawędzi, bo niektóre aplikacje przycinają obraz.
Czy tagi Open Graph pomagają w SEO?
Ich zadaniem jest karta udostępniania, a nie pozycja w wynikach. Czytelny tytuł i obraz mogą przynieść więcej kliknięć, gdy ludzie przesyłają Twój link w czatach i feedach. Utrzymuj og:title spójny z elementem title, aby każde miejsce opisywało stronę tak samo.
Dlaczego tagi Open Graph używają property zamiast name?
Protokół opiera się na RDFa, które używa atrybutu property. Przykłady na ogp.me zapisują meta property="og:title". Tagi Twitter card używają z kolei atrybutu name, jak w meta name="twitter:card".
Czy nadal potrzebuję tagów Twitter card?
Dodaj co najmniej twitter:card z wartością summary_large_image, jeśli chcesz układu z dużym obrazem. Wiele aplikacji czyta wartości og dla tytułu, opisu i obrazu, gdy brakuje odpowiadających tagów twitter, ale zasady platform się zmieniają, więc przetestuj opublikowany URL, zanim założysz, że to zastępstwo działa.
Czy strona może mieć więcej niż jeden og:image?
Tak. Protokół dopuszcza tablice: powtórz tag og:image, a szerokość, wysokość i alt każdego obrazu umieść zaraz po obrazie, który opisują. Gdy wartości są sprzeczne, protokół daje pierwszeństwo pierwszemu tagowi od góry.
Właściwości strukturalne należą do tagu nad nimi
Właściwości takie jak og:image:width opisują ostatni og:image zadeklarowany przed nimi. Kolejność ma znaczenie: najpierw zadeklaruj obraz, potem jego szerokość, wysokość, typ i alt, a dopiero potem kolejny obraz.
og:image:secure_url to dodatkowy adres https tego samego obrazu. Jeśli Twój og:image już używa https, nie jest Ci potrzebny.
Typy i ich dodatkowe tagi
website to wartość domyślna dla stron, które nie są konkretnym rodzajem obiektu. article udostępnia article:published_time, article:modified_time, article:author, article:section i article:tag.
Protokół definiuje też book, profile oraz grupy music i video. Używaj ich tylko wtedy, gdy strona naprawdę jest takim obiektem; strona produktu to zwykle website.