Projektowanie stron internetowych • 29-11-2024

Objaśnienie zasad funkcjonowania i celu metatagów OG na stronach internetowych

Struktura metatagów OG i innych metadanych


 
html

 

 
<head> <!-- Podstawowe metadane Open Graph --> <meta property="og:title" content="Przykładowa Domena - Portal Informacyjny"> <meta property="og:description" content="Najlepsze artykuły, informacje i wiadomości na Przykładowa-Domena.com.pl"> <meta property="og:type" content="website"> <meta property="og:url" content="https://przykladowa-domena.com.pl"> <meta property="og:image" content="https://przykladowa-domena.com.pl/images/og-image.jpg"> <meta property="og:locale" content="pl_PL"> <!-- Dodatkowe metadane SEO --> <link rel="canonical" href="https://przykladowa-domena.com.pl"> <meta name="date" content="2024-11-29T12:00:00Z"> <!-- Data utworzenia --> <meta name="last-modified" content="2024-11-29T12:00:00Z"> <!-- Data ostatniej modyfikacji --> <!-- Dla Twittera --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Przykładowa Domena - Portal Informacyjny"> <meta name="twitter:description" content="Najlepsze artykuły, informacje i wiadomości na Przykładowa-Domena.com.pl"> <meta name="twitter:image" content="https://przykladowa-domena.com.pl/images/og-image.jpg"> <!-- Favicon --> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <title>Przykładowa Domena - Portal Informacyjny</title> </head>

Objaśnienie zasad funkcjonowania i celu metatagów OG

  1. Co to są metatagi OG? Metatagi OG (Open Graph) to elementy HTML w <head> strony, opracowane przez Facebooka, aby umożliwić lepsze udostępnianie treści w mediach społecznościowych i poprawę widoczności strony. Informacje zawarte w tagach OG pozwalają platformom (Facebook, LinkedIn, Twitter itp.) na generowanie bogatych podglądów strony.

  2. Najważniejsze metatagi OG:

    • og:title — Tytuł strony, wyświetlany jako nagłówek podglądu.
    • og:description — Krótkie streszczenie strony.
    • og:type — Typ obiektu, np. website, article, video, itp.
    • og:url — URL strony, używany do weryfikacji unikalności treści.
    • og:image — URL obrazka, który pojawia się w podglądzie.

  3. Funkcja i cel:

    • Lepsze udostępnianie w mediach społecznościowych: Wykorzystanie metatagów OG pozwala na lepsze dopasowanie tego, jak treści z Twojej strony są prezentowane, np. podgląd z odpowiednim obrazkiem i opisem.
    • Poprawa UX i SEO: Atrakcyjnie prezentujące się linki w mediach społecznościowych generują wyższe wskaźniki klikalności (CTR).
    • Standardizacja: Wielu dostawców, takich jak Facebook czy LinkedIn, używa tych samych tagów, co eliminuje potrzebę dodawania różnych tagów dla każdej platformy.

  4. Dodatkowe elementy:

    • Canonical URL: Wskazuje preferowany URL dla wyszukiwarek, eliminując problem duplikacji treści.
    • Data utworzenia i modyfikacji: Pomocne dla SEO i użytkowników do określenia świeżości treści.
    • Favicon i inne: Poprawiają branding i rozpoznawalność strony.

  5. Jak to działa w praktyce? Kiedy ktoś udostępnia link do Twojej strony, platformy (np. Facebook) odwiedzają Twoją stronę, analizują zawarte w niej tagi OG i generują podgląd (obrazek, tytuł, opis). Bez tych tagów platformy próbują "zgadywać", jakie elementy strony powinny być użyte, co może prowadzić do nieestetycznego lub błędnego podglądu.

 

ZOBACZ RÓWNIEŻ:

Pozostałe kategorie