Dodawanie tagów Open Graph w WordPress

Tagi Open Graph to małe fragmenty metadanych w HTML strony, które kontrolują, jak Twoja treść pojawia się, gdy ktoś udostępnia ją w mediach społecznościowych. Bez nich platformy takie jak Facebook, LinkedIn i Twitter muszą zgadywać, jaki tytuł, opis i obraz pokazać i często robią to źle. Udostępniony link z brakującym obrazem lub okaleczonym tytułem wygląda nieprofesjonalnie, a ludzie znacznie rzadziej w niego klikają. Prawidłowe ustawienie tagów Open Graph zajmuje tylko kilka minut i robi prawdziwą różnicę w ruchu z mediów społecznościowych.

Dlaczego tagi Open Graph mają znaczenie dla udostępniania w mediach społecznościowych

Za każdym razem, gdy ktoś udostępnia link na Facebooku, LinkedIn, Twitterze lub aplikacjach do wiadomości takich jak WhatsApp i Telegram, te platformy pobierają metadane Open Graph Twojej strony, aby zbudować kartę podglądu. Ta karta zwykle zawiera tytuł, opis i obraz. Jeśli Twoje tagi OG są brakujące lub źle skonfigurowane, możesz zobaczyć niewłaściwy obraz pobrany z reklamy w pasku bocznym, opis meta urwany w pół zdania lub w ogóle brak podglądu.

Liczby mówią same za siebie. Posty z bogatymi kartami podglądu otrzymują znacznie więcej zaangażowania niż linki w postaci zwykłego tekstu. Na Facebooku posty z obrazami widzą około 2-3x więcej zaangażowania niż bez. Na LinkedIn artykuły z atrakcyjnymi obrazami podglądu otrzymują więcej kliknięć i udostępnień. Prawidłowe ustawienie tagów OG to jeden z najprostszych sposobów na zwiększenie widoczności Twojej udostępnianej treści.

Lista wymaganych tagów Open Graph

Nie wszystkie tagi OG są równie ważne. Oto tagi, które powinieneś zawsze uwzględniać:

• og:title: Tytuł Twojej strony, jak ma się pojawić w udostępnianiach społecznościowych. Trzymaj go poniżej 60 znaków, aby uniknąć obcięcia na większości platform.
• og:description: Krótkie podsumowanie zawartości strony. Celuj w 120-200 znaków. To Twoja szansa na napisanie atrakcyjnego haka, który skłoni ludzi do kliknięcia.
• og:url: Kanoniczny URL strony. To zapewnia, że wszystkie udostępnienia wskazują na ten sam URL, konsolidując metryki zaangażowania.
• og:type: Typ zawartości. Użyj article dla wpisów blogowych, website dla strony głównej i product dla pozycji e-commerce.
• og:image: Obraz podglądu. To zdecydowanie najważniejszy tag OG dla zaangażowania. Zobacz poniżej więcej o najlepszych praktykach dotyczących obrazów.

Opcjonalne, ale zalecane tagi to og:site_name (nazwa Twojej strony), og:locale (język i region, np. pl_PL) oraz article:published_time dla wpisów blogowych.

Najlepsze praktyki og:image dla maksymalnego efektu

Obraz podglądu jest tym, co ludzie zauważają najpierw przewijając swoje społecznościowe feedy. Warto zrobić to dobrze:

• Rozmiar: Używaj obrazów o rozmiarze minimum 1200x630 pikseli. Facebook zaleca to jako minimum dla ekranów wysokiej rozdzielczości. Dla LinkedIn najlepiej działa 1200x627 pikseli.
• Proporcje: Trzymaj się 1.91:1 dla najlepszej kompatybilności między platformami. Ta proporcja działa dobrze na Facebooku, LinkedIn, Twitterze i aplikacjach do wiadomości.
• Format pliku: JPEG i PNG są uniwersalnie obsługiwane. Unikaj WebP dla obrazów OG, ponieważ niektóre platformy i crawlery jeszcze go nie obsługują.
• Rozmiar pliku: Trzymaj obrazy poniżej 5MB. Facebook może pominąć obrazy, których pobranie trwa zbyt długo.
• Zawartość: Unikaj obrazów z dużą ilością tekstu. Facebook kiedyś egzekwował zasadę 20% tekstu dla reklam i choć już nie obowiązuje dla udostępnień organicznych, czyste obrazy z minimalnym tekstem zwykle radzą sobie lepiej.
• Obraz fallback: Zawsze ustaw domyślny obraz OG dla całej witryny dla stron bez wyróżnionego obrazu. Brandowany obraz z Twoim logo działa dobrze jako fallback.

Ustawianie tagów Open Graph z Yoast SEO

Yoast SEO automatycznie generuje tagi Open Graph i Twitter Card dla każdej strony w Twojej witrynie. Oto jak to skonfigurować:

Dla ustawień całej witryny:

1. Zainstaluj i aktywuj Yoast SEO.
2. Przejdź do Yoast SEO, następnie Social w menu admin.
3. Na zakładce Facebook włącz "Add Open Graph meta data".
4. Prześlij domyślny obraz, który zostanie użyty, gdy wpis lub strona nie ma wyróżnionego obrazu.
5. Na zakładce Twitter włącz metadane Twitter Card i wybierz "Summary" lub "Summary with large image" jako domyślny typ karty.

Dla pojedynczych wpisów i stron:

1. Edytuj wpis lub stronę.
2. W metaboksie Yoast SEO kliknij zakładkę "Social" (ikona udostępniania).
3. Pod "Facebook preview" dostosuj tytuł, opis i obraz do udostępniania w mediach społecznościowych.
4. Pod "Twitter preview" ustaw inny tytuł, opis lub obraz w razie potrzeby (w przeciwnym razie Twitter użyje wartości Facebook OG).

Yoast automatycznie wybiera wyróżniony obraz jako og:image, jeśli nie ustawisz niestandardowego. Generuje również og:title z tytułu SEO i og:description z opisu meta, więc Twoje udostępnienia społecznościowe pozostają spójne z Twoimi ustawieniami SEO.

Ustawianie tagów Open Graph z Rank Math

Rank Math obsługuje tagi OG w podobny sposób co Yoast:

1. Zainstaluj i aktywuj Rank Math.
2. Przejdź do Rank Math, następnie General Settings, następnie Social Meta.
3. Włącz "Add Open Graph meta data to your site's header".
4. Ustaw domyślny obraz udostępniania społecznościowego dla wpisów bez wyróżnionego obrazu.

Dla personalizacji per wpis kliknij ikonę Rank Math podczas edytowania wpisu i przejdź do zakładki "Social". Możesz ustawić osobne tytuły, opisy i obrazy dla Facebooka i Twittera.

Ręczne dodawanie tagów Open Graph przez functions.php

Jeśli wolisz nie używać wtyczki SEO, możesz dodać tagi OG przez functions.php swojego motywu. To podejście daje Ci pełną kontrolę nad każdym tagiem:

function custom_open_graph_tags() {
    if (is_singular()) {
        global $post;
        $title = get_the_title();
        $description = has_excerpt() ? get_the_excerpt() : wp_trim_words($post->post_content, 30);
        $url = get_permalink();
        $image = get_the_post_thumbnail_url($post->ID, 'large');
        $site_name = get_bloginfo('name');

        echo '<meta property="og:title" content="' . esc_attr($title) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url($url) . '" />' . "\n";
        echo '<meta property="og:type" content="article" />' . "\n";
        echo '<meta property="og:site_name" content="' . esc_attr($site_name) . '" />' . "\n";
        if ($image) {
            echo '<meta property="og:image" content="' . esc_url($image) . '" />' . "\n";
            echo '<meta property="og:image:width" content="1200" />' . "\n";
            echo '<meta property="og:image:height" content="630" />' . "\n";
        }
    } elseif (is_front_page()) {
        $site_name = get_bloginfo('name');
        $description = get_bloginfo('description');
        echo '<meta property="og:title" content="' . esc_attr($site_name) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url(home_url('/')) . '" />' . "\n";
        echo '<meta property="og:type" content="website" />' . "\n";
    }
}
add_action('wp_head', 'custom_open_graph_tags');

Nie dodawaj tego razem z wtyczką SEO, która już generuje tagi OG. Zduplikowane tagi OG mogą zmylić crawlery mediów społecznościowych.

Tagi Open Graph dla produktów WooCommerce

Jeśli prowadzisz sklep WooCommerce, Twoje strony produktów korzystają z dodatkowych tagów OG. Zarówno Yoast SEO, jak i Rank Math mają integracje WooCommerce, które automatycznie ustawiają og:type na product i zawierają metadane specyficzne dla produktu, takie jak cena i dostępność.

Dla ręcznych implementacji możesz podłączyć się do danych produktu WooCommerce:

function woo_product_og_tags() {
    if (is_product()) {
        global $product;
        $price = $product->get_price();
        $currency = get_woocommerce_currency();
        echo '<meta property="og:type" content="product" />' . "\n";
        echo '<meta property="product:price:amount" content="' . esc_attr($price) . '" />' . "\n";
        echo '<meta property="product:price:currency" content="' . esc_attr($currency) . '" />' . "\n";
    }
}
add_action('wp_head', 'woo_product_og_tags');

Testowanie tagów Open Graph

Po ustawieniu tagów OG przetestuj je, zanim udostępnisz coś ważnego. Oto narzędzia, których potrzebujesz:

• Facebook Sharing Debugger: Odwiedź developers.facebook.com/tools/debug i wprowadź swój URL. Pokazuje dokładnie, co widzi Facebook, w tym tytuł, opis i obraz. Kliknij "Scrape Again", aby odświeżyć cache, jeśli wprowadziłeś zmiany.
• LinkedIn Post Inspector: Odwiedź linkedin.com/post-inspector i wprowadź swój URL. LinkedIn agresywnie cache'uje, więc użyj tego narzędzia, aby wymusić odświeżenie po aktualizacji tagów OG.
• Twitter Card Validator: Odwiedź cards-dev.twitter.com/validator. Wprowadź swój URL, aby zobaczyć podgląd, jak będzie wyglądać Twoja Twitter Card.
• Skan InspectWP: Uruchom skan, aby zweryfikować, że Twoje tagi OG są obecne w wyjściu HTML strony.

Czyszczenie cache mediów społecznościowych po zmianach

Platformy mediów społecznościowych mocno cache'ują Twoje dane OG. Jeśli zaktualizujesz tagi OG, a stary podgląd nadal pojawia się przy udostępnianiu, musisz wyczyścić cache:

• Facebook: Użyj narzędzia Sharing Debugger i kliknij "Scrape Again". Możesz musieć kliknąć dwa razy dla uporczywych cache.
• LinkedIn: Użyj narzędzia Post Inspector, aby wymusić ponowne scrapowanie. LinkedIn może czasem potrzebować do 7 dni, aby naturalnie zaktualizować cache.
• Twitter: Użyj Card Validator, aby zażądać nowego crawl. Twitter zazwyczaj aktualizuje się w ciągu kilku minut.
• WhatsApp i Telegram: Te aplikacje cache'ują podglądy po stronie klienta. Poproś ludzi o wyczyszczenie cache aplikacji lub poczekaj, aż cache naturalnie wygaśnie (zwykle 24-72 godziny).

Częste błędy Open Graph, których należy unikać

• Brakujący og:image: Najczęstszy błąd. Bez obrazu udostępnienia społecznościowe wyglądają nudno i są ignorowane. Zawsze ustaw wyróżniony obraz lub domyślny obraz dla całej witryny.
• Obraz za mały: Obrazy poniżej 200x200 pikseli mogą w ogóle nie być wyświetlane na Facebooku. Celuj w minimum 1200x630 pikseli.
• Zduplikowane tagi OG: Działanie dwóch wtyczek SEO lub wtyczki SEO plus wtyczki mediów społecznościowych, które obie generują tagi OG, prowadzi do sprzecznych metadanych. Używaj tylko jednego źródła dla swoich tagów OG.
• Niezgodność og:url: og:url powinien odpowiadać Twojemu kanonicznemu URL. Jeśli wskazują na różne URL, platformy społecznościowe mogą być zdezorientowane co do tego, która strona powinna otrzymać zaangażowanie.
• Brak ustawienia og:type: Niektóre platformy domyślnie ustawiają website jako og:type, gdy go brakuje, co jest w porządku dla strony głównej, ale nie idealne dla wpisów blogowych. Ustaw article dla wpisów, aby platformy wyświetlały datę publikacji i informacje o autorze.
• Zapomnienie o tagach specyficznych dla Twittera: Choć Twitter może wrócić do tagów OG, dodanie tagów twitter:card i twitter:site daje Ci większą kontrolę nad formatem podglądu Twittera.