Czy słyszałeś o tagach meta og? Czy implementujesz tagi meta og na swojej stronie WordPress? Ten artykuł pokaże Ci, czym są tagi meta og i jak je implementować na swojej stronie WordPress.

{automatycznie}

Gdy post z Twojego bloga lub adres URL z Twojej witryny są udostępniane na Facebooku, serwis społecznościowy dobrze sobie radzi z pobieraniem z nich właściwych danych. Wyświetlane są takie rzeczy, jak adres URL Twojego bloga lub witryny, fragment tekstu posta, wyróżniony obraz itp., co zachęca użytkowników do kliknięcia.

Jeśli jednak jesteś zapalonym użytkownikiem Facebooka, być może zauważyłeś, że dane pobierane ze stron internetowych (w tym Twojej) nie zawsze są idealne. Czasami pobiera obraz, który nie odzwierciedla dokładnie treści udostępnionego posta, lub może wyodrębnić tekst pod koniec posta i użyć go jako fragmentu, co prawie zawsze nie jest dobrą rzeczą, a co gorsza, zdarzają się sytuacje, gdy nie są dostępne żadne dane poza tytułem posta (lub treścią tag) i adres URL nie są w ogóle udostępniane!

Dzieje się tak zazwyczaj, jeśli nie wdrożysz odługopis graph meta tagi (znane również jako og meta tagi) na Twojej stronie WordPress. Bez tych ważnych tagów Facebook (i inne serwisy społecznościowe) nie będą w stanie uzyskać właściwych informacji do wyświetlenia dla udostępnionego posta lub linku.

Tak może to wyglądać, gdy udostępniasz na Facebooku adres URL ze strony internetowej, która nie jest aktualizowana o znaczniki Open Graph:

udostępnianie na facebooku bez tagów og

Z drugiej strony, tak to wygląda, gdy udostępniasz adres URL, który implementuje metatagi Open Graph:

udostępnij na facebooku og1

Tagi meta Open Graph (OG) Facebooka

Meta tagi Open Graph Facebooka określają sposób prezentacji witryny internetowej osoby trzeciej (np. Twojego bloga) na Facebooku.

Mimo że meta tagi Open Graph zostały opracowane przez Facebooka, są używane również przez inne serwisy społecznościowe (np. Twitter i LinkedIn) w celu dostosowania udostępniania danych.

Aby uwzględnić meta tagi Open Graph w witrynie WordPress, należy dodać dodatkowe tagi w Twojej witryny. Zgodnie z protokół Open Graph, wymagane są następujące właściwości:

  • og: tytuł
  • og:typ
  • og: image
  • o:url

 

og tagi facebook1

Korzystając z otwartych grafów na stronach internetowych, Neil Patel znaleziono wzrost współczynnika klikalności o 39%.

Jak sprawdzić obecność tagów OG Meta w witrynie WordPress?

Sprawdź kod źródłowy swojej witryny WordPress, jeśli nie jesteś pewien, czy tagi og zostały już umieszczone na Twojej stronie. W systemie Windows lub Linux naciśnij Ctrl + U, a w systemie Mac naciśnij Command + Alt + U, aby wyświetlić kod źródłowy.

Jeśli jest już dodawany, znajdziesz swoje tagi og w sekcja wewnątrz „

og

Dodatkowo możesz użyć Facebook Sharing Debugger narzędzie pozwalające zobaczyć, co Facebook czyta na temat Twojej witryny.

Dodawanie tagów OG Meta do WordPressa bez wtyczki

Aby dodać tagi meta og do swoich wpisów i stron w WordPressie bez użycia wtyczki, wystarczy dodać następujący fragment kodu do motywu functions.php plik.

// Dodanie Open Graph do atrybutów języka function add_opengraph_doctype( $output ) { return $output . ' xmlns:og="https://opengraphprotocol.org/schema/" xmlns:fb="https://www.facebook.com/2008/fbml"'; } add_filter('language_attributes', 'add_opengraph_doctype'); // Dodajmy metadane Open Graph function add_og_meta_tag() { global $post; if( !is_singular() ) // jeśli nie jest to post ani strona, nie dodawaj tagów og return; echo " \n"; echo ' ' . "\n"; echo ' ' . "\n"; echo ' ' . "\n"; echo ' ' . "\n"; echo ' ' . "\n"; echo '  ' . "\n"; if( !has_post_thumbnail( $post->ID ) ) { // jeśli wpis nie ma wyróżnionego obrazu, użyj domyślnego obrazu $default_image="https://example.com/image.jpg"; // zamień go na domyślny obraz na swoim serwerze lub obraz ze swojej biblioteki multimediów echo ' '; } else { $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' ); echo ' '; } echo "\n \n"; } dodaj_akcję( 'wp_head', 'add_og_meta_tag', 0 );

Upewnij się, że zmieniłeś „TWÓJ IDENTYFIKATOR UŻYTKOWNIKA” w podziel się swoim własnym identyfikatorem użytkownika na Facebooku.

Swój identyfikator użytkownika Facebooka znajdziesz, odwiedzając stronę swojego profilu na Facebooku w przeglądarce na komputerze stacjonarnym.

  1. Kliknij na swój obrazek profilowy i wybierz „Zobacz zdjęcie profilowe”
  2. Spowoduje to otwarcie przeglądarki zdjęć Facebooka, w której znajdziesz swoje zdjęcie profilowe.
  3. Adres URL powinien teraz wyglądać mniej więcej tak: „https://www.facebook.com/photo?fbid=xxxxxxxxxxxxxxx&set=a.xxxxxxxxxxxxxxx"
  4. Poszukaj części fbid=xxxxxxxxxxxxxx. Liczby po fbid parametr „xxxxxxxxxxxxxxxx” to Twój identyfikator użytkownika.
  5. Skopiuj to i użyj, aby zastąpić „TWOJE IDENTYFIKATORY UŻYTKOWNIKA” we fragmencie kodu powyżej.

identyfikator użytkownika facebooka

Gotowe! Twoja strona internetowa jest teraz zaktualizowana o tagi open graph.

Dodawanie tagów OG Meta do WordPressa za pomocą wtyczki

Dwie popularne wtyczki SEO, Yoast SEO oraz All in One SEO Pack zawiera funkcje meta tagów Open Graph.

Dodawanie tagów OG za pomocą wtyczki Yoast SEO

Najpierw zainstaluj Yoast SEO. Po instalacji powinieneś zobaczyć nowy element SEO w lewym menu bocznym administratora.

Aby dodać tagi og za pomocą Yoast, przejdź do SEO > Obserwuj Nas poprzez menu boczne administratora.

Gdy już będziesz na stronie, przejdź do zakładki Facebook.

yoast seo og tag

Domyślnie Yoast SEO dodaje tagi open graph do Twoich postów od razu. Nie musisz niczego konfigurować. 

Będziesz jednak musiał skonfigurować tagi og dla strony głównej swojej witryny.

Pod Ustawienia strony głównej sekcji, możesz zdefiniować adres URL obrazu dla swojej strony głównej. Będzie on używany do og: image własność Twojej strony głównej. 

Możesz również dodać tytuł i opis, które są używane do og: tytuł oraz og: opis właściwości odpowiednio.

Wreszcie jest Ustawienia domyślne Sekcja. Pozwala to zdefiniować domyślny adres URL obrazu, który będzie używany w poście. og: image właściwość w przypadku gdy nie zdefiniowano żadnego wyróżnionego obrazu.

Po zakończeniu nie zapomnij kliknąć Zapisz zmiany aby zmiany zostały zastosowane.

Konfigurowanie tagów OG dla każdego posta za pomocą Yoast SEO

Jeśli chcesz ręcznie ustawić tagi og dla każdego wpisu, możesz to zrobić, przechodząc do edytora wpisów i przewijając w dół do sekcji Yoast Metabox, a następnie wybierając Obserwuj Nas patka.

yoast za post i tagi

Następnie możesz tutaj zdefiniować niestandardowy parametr dla różnych tagów og.

Gdy już skończysz dodawać tagi og do wpisu, pamiętaj o jego zapisaniu, zaktualizowaniu lub opublikowaniu (w zależności od sytuacji), aby zatwierdzić wprowadzone zmiany.

Dodawanie tagów OG za pomocą pakietu All in One SEO

Najpierw zainstaluj All in One SEO Pack. Po instalacji przejdź do All in One SEO > Sieci społeczne za pośrednictwem menu bocznego administratora Twojej witryny. Gdy już będziesz na stronie, przejdź do Facebook patka.

wszystko w jednym seo og tagi

Dzięki pakietowi All in One SEO tagi og są dodawane do wpisów domyślnie, podobnie jak w przypadku Yoast.

Jest tu więcej konfigurowalnych opcji w porównaniu do Yoast, ale niektóre są dostępne tylko, gdy używasz wersji pro. Niemniej jednak ilość konfigurowalnych opcji w wersji bezpłatnej jest więcej niż wystarczająca.

  • Domyślny obraz posta - definiuje, jaki obraz będzie używany w poście og: image własność.
  • Domyślny Post Obraz Facebooka - jeśli wybierzesz opcję domyślnego obrazu (ustawionego poniżej) w opcjach domyślnego obrazu posta, w tym miejscu możesz przesłać niestandardowy obraz.
  • Domyślny typ obiektu Post Type - umożliwia zdefiniowanie wartości domyślnej dla posta, strony lub załącznika og:typ własność.
  • Pokaż autora na Facebooku - możesz połączyć swój profil na Facebooku ze swoją witryną. Włączenie tej opcji umożliwia połączenie posta z profilem na Facebooku, dzięki czemu czytelnicy mogą bezpośrednio śledzić Twoją stronę/profil na Facebooku. Więcej informacji o tym, jak to skonfigurować, znajdziesz w AIOSEO strona Pomoc.
  • Nazwa strony - umożliwia skonfigurowanie, jakie wartości będą używane w poście og:nazwa_strony property. Możesz użyć tagów, aby dynamicznie generować wartość dla tej właściwości, możesz również dodać domyślny tekst lub możesz również wymieszać oba, jeśli chcesz.

Po powyższych elementach znajduje się sekcja służąca do konfigurowania tagów og strony głównej witryny. Pod Ustawienia strony głównej w sekcji możesz zdefiniować następujące elementy:

  • Obraz - dla Twojej strony głównej og: image własność.
  • Tytuł - dla Twojej strony głównej og: tytuł Własność. Możesz użyć zmiennych, aby dynamicznie to wygenerować.
  • OPIS - dla Twojej strony głównej og: opis własność.
  • Rodzaj obiektu - dla Twojej strony głównej og:typ własność.

Wreszcie jest Ustawienia zaawansowane sekcja, która umożliwia zdefiniowanie dodatkowych meta tagów Open Graph, takich jak fb:identyfikator_aplikacji, fb:administratorzy, itp.

Gdy już będziesz zadowolony ze swojej konfiguracji, nie zapomnij Zapisz zmiany.

Konfigurowanie tagów OG dla każdego posta za pomocą pakietu All in One SEO

Możesz skonfigurować tagi per post og z AIOSEO, np. Yoast. Przejdź do edytora postów i przewiń w dół do metaboxa AIOSEO, a następnie przejdź do Obserwuj Nas patka.

oprócz postów i tagów

Opcje tutaj są podobne do tych, które zostały omówione powyżej. Możesz przejść dalej i zdefiniować niestandardowe parametry dla tagów og dla tego posta, nadpisując wszelkie opcje zdefiniowane w ustawieniach AIOSEO.

Gdy już skończysz dodawać tagi og do wpisu, pamiętaj o jego zapisaniu, zaktualizowaniu lub opublikowaniu (w zależności od sytuacji), aby zatwierdzić wprowadzone zmiany.

To obejmuje sposób dodawania tagów og do witryny WordPress. Mam nadzieję, że ten artykuł pomógł Ci wybrać lepsze podejście do tego i że dowiedziałeś się trochę o tym, jak ważne jest wdrożenie tagów og do swojej witryny.

Jeśli chcesz zobaczyć więcej wskazówek i trików dotyczących WordPressa, zapoznaj się z naszą pełną wersją Lista 101 wskazówek i trików dotyczących WordPressa.

Pobierz listę 101 sztuczek WordPress, które powinien znać każdy bloger

101 sztuczek WordPress

Kliknij tutaj, aby pobrać teraz

// Dodawanie Open Graph w atrybutach języka

funkcja add_opengraph_doctype( $output ) {

zwróć $output . ' xmlns:og="https://opengraphprotocol.org/schema/" xmlns:fb="https://www.facebook.com/2008/fbml"';

}


add_filter('atrybuty_języka', 'add_opengraph_doctype');


// Dodajmy metadane Open Graph

funkcja add_og_meta_tag() {


global $ post;


if( !is_singular() ) // jeśli nie jest to post ani strona, nie dodawaj tagów og

powrotu;

echo" \N";

echo ' ' . "\N";

echo ' ' . "\N";

echo ' ' . "\N";

echo ' ' . "\N";

echo ' ' . "\N";

echo ' ' . "\N";


if( !has_post_thumbnail( $post->ID ) ) { // jeśli post nie ma wyróżnionego obrazu, użyj domyślnego obrazu

$default_image="https://example.com/image.jpg"; // zamień to na domyślny obraz na swoim serwerze lub obraz ze swojej biblioteki multimediów

echo ' ';

}


else {

$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );

echo ' ';

}


echo "\n \N";

}


dodaj_akcję( 'wp_head', 'add_og_meta_tag', 5 );