WordPress OG Tags: jak zwiększyć liczbę kliknięć swojego posta w mediach społecznościowych

Czy słyszałeś o metatagach og? Czy wdrażasz metatagi og na swojej witrynie WordPress? W tym artykule dowiesz się, czym są metatagi og i jak je zaimplementować w witrynie WordPress.

Gdy post z Twojego bloga lub adres URL z Twojej witryny jest udostępniany na Facebooku, portal społecznościowy wykonuje dobrą robotę, pobierając z niego odpowiednie dane. Zostaną wyświetlone takie elementy, jak adres URL Twojego bloga lub witryny, fragment tekstu posta, wyróżniony obraz itp., co zachęci użytkowników do kliknięcia.

Jeśli jednak jesteś zagorzałym użytkownikiem Facebooka, być może zauważyłeś, że dane, które pobiera ze stron internetowych (w tym z Twojej), nie zawsze są doskonałe. 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 dobre, a co gorsza, tam to sytuacje, w których nie ma danych innych niż tytuł posta (lub zawartość contents tag) i URL są w ogóle udostępniane!

Zwykle dzieje się tak, jeśli nie wdrażasz odługopis gmetatagi raph (inaczej metatagi og) w witrynie WordPress. Bez tych ważnych tagów Facebook (i inne serwisy społecznościowe) nie będą w stanie uzyskać odpowiednich informacji do wyświetlenia w udostępnionym poście lub linku.

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

Udostępnij na Facebooku bez tagów og

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

Udostępnij na Facebooku za pomocą og1

Metatags Open Graph (OG) Facebooka

Metatagi otwartego wykresu Facebooka definiują sposób, w jaki witryna innej firmy (np. Twój blog) będzie prezentowana na Facebooku.

Chociaż jest rozwijany przez Facebooka, metatagi otwartego wykresu są używane również przez inne sieci społecznościowe (takie jak Twitter i LinkedIn) w celu dostosowania udostępniania, które się tam odbywa.

Aby uwzględnić metatagi Open Graph w witrynie WordPress, musisz dodać dodatkowe tagi w Twojej witryny. Według protokół otwartego wykresu, wymagane są następujące właściwości:

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

 

og tagi facebook1

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

Jak sprawdzić metatagi OG w witrynie WordPress?

Spójrz na kod źródłowy swojej witryny WordPress, jeśli nie masz pewności, czy tagi og zostały już umieszczone w Twojej witrynie. W systemie Windows lub Linux naciśnij Ctrl + U, a na Macu 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, aby zobaczyć, co Facebook czyta o Twojej witrynie.

Dodawanie metatagów OG do WordPressa bez wtyczki

Aby dodać og metatagi do swoich postów i stron w WordPressie bez użycia wtyczki, po prostu dodaj następujący fragment kodu do swojego motywu functions.php plik.

// Dodanie Open Graph w funkcji Language Attributes 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 funkcję Open Graph Meta Info add_og_meta_tag() { global $post; if( !is_singular() ) // jeśli nie jest to post lub 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 post nie zawiera polecanego obrazu, użyj obrazu domyślnego $default_image="https://example.com/image.jpg"; // zastąp to domyślnym obrazem na twoim serwerze lub obrazem w twojej bibliotece multimediów echo ' '; } else { $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'duży' ); Echo ' '; } echo "\n \n"; } add_action( 'wp_head', 'add_og_meta_tag', 0 );

Upewnij się, że zmieniłeś „TWÓJ ID UŻYTKOWNIKA” w część z własnym identyfikatorem użytkownika Facebooka.

Możesz znaleźć swój identyfikator użytkownika Facebooka, odwiedzając stronę swojego profilu na Facebooku w przeglądarce na komputerze.

  1. Kliknij swoje zdjęcie profilowe i wybierz „Wyświetl zdjęcie profilowe”
  2. Spowoduje to otwarcie przeglądarki zdjęć Facebooka dla Twojego zdjęcia profilowego.
  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 go i użyj go, aby zastąpić „TWÓJ ID UŻYTKOWNIKA” w powyższym fragmencie kodu.

identyfikator użytkownika facebooka

Jesteś skończony! Twoja witryna została zaktualizowana o tagi Open Graph

Dodawanie metatagów OG do WordPressa za pomocą wtyczki

Dwie popularne wtyczki SEO, Yoast SEO i All in One SEO Pack zawiera funkcje metatagu otwartego wykresu.

Dodawanie tagów OG za pomocą wtyczki Yoast SEO

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

Aby dodać tagi og z Yoast, przejdź do SEO > Obserwuj Nas za pośrednictwem menu paska bocznego administratora.

Po wejściu na stronę przejdź do zakładki Facebook.

seo i tagi yoast

Domyślnie Yoast SEO dodaje otwarte tagi wykresów do twoich postów po wyjęciu z pudełka. Nie musisz niczego konfigurować. 

Musisz jednak 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 to używane do og: image właściwość Twojej strony głównej. 

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

Wreszcie jest Ustawienia domyślne Sekcja. Pozwala to na zdefiniowanie domyślnego adresu URL obrazu, który będzie używany w postach og: image właściwość na wypadek, gdyby nie zdefiniowano polecanego obrazu.

Gdy skończysz, nie zapomnij kliknąć Zapisz zmiany aby Twoje zmiany zostały zastosowane.

Konfiguracja tagów OG per Post z Yoast SEO

Jeśli chcesz ręcznie ustawić tagi og na post, możesz to zrobić, przechodząc do edytora postów i przewijając w dół do sekcji Metabox Yoast i przechodząc do sekcji Obserwuj Nas patka.

drożdże na post og tagi

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

Po zakończeniu dodawania tagów og do posta pamiętaj, aby go zapisać, zaktualizować lub opublikować, w zależności od tego, co ma zastosowanie, aby zatwierdzić wprowadzone zmiany.

Dodawanie tagów OG z pakietem SEO „wszystko w jednym”

Najpierw zainstaluj All in One SEO Pack. Po instalacji przejdź do All in One SEO > Sieci społeczne za pomocą menu administracyjnego na pasku bocznym witryny. Gdy znajdziesz się na stronie, przejdź do Facebook patka.

wszystko w jednym tagach SEO og

Dzięki All in One SEO Pack tagi og są domyślnie dodawane do twojego postu po wyjęciu z pudełka, podobnie jak w Yoast.

W porównaniu z Yoastem jest więcej konfigurowalnych opcji, ale niektóre są dostępne tylko podczas korzystania z wersji pro. Nigdyless, ilość konfigurowalnych opcji w darmowej wersji jest więcej niż wystarczająca.

  • Domyślny obraz posta - określa jaki obraz zostanie użyty do postu og: image własność.
  • Domyślny obraz posta na Facebooku - jeśli wybierzesz opcję domyślnego obrazu (ustawionego poniżej) w opcji domyślnego obrazu posta, w tym miejscu możesz przesłać niestandardowy obraz.
  • Domyślne typy obiektów typu post - pozwala zdefiniować domyślną wartość 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ą stroną internetową. Włączenie tej opcji umożliwia połączenie posta z Twoim profilem na Facebooku, umożliwiając czytelnikom bezpośrednie śledzenie Twojej strony/profilu na FB. Możesz dowiedzieć się więcej o tym, jak to skonfigurować, od AIOSEO strona Pomoc.
  • Nazwa strony - pozwala skonfigurować jakie wartości będą używane do postu og: nazwa_witryny własność. Możesz użyć tagów do dynamicznego generowania wartości dla tej właściwości, możesz również dodać domyślny tekst lub możesz również mieszać te dwa, jeśli chcesz.

Pod powyższymi elementami znajduje się sekcja, w której można skonfigurować tagi ogólne strony głównej witryny. Pod Ustawienia strony głównej sekcji, możesz zdefiniować:

  • 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 do dynamicznego generowania tego.
  • 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 pozwala na zdefiniowanie dodatkowych metatagów open graph, takich jak fb: identyfikator_aplikacji, fb: admins, itp.

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

Konfigurowanie tagów OG na post za pomocą pakietu SEO „wszystko w jednym”

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

aioseo na post og tagi

Opcje tutaj są podobne do tych omówionych powyżej. Możesz iść dalej i zdefiniować niestandardowe parametry dla swoich tagów og dla tego postu, zastępując wszelkie opcje, które zdefiniowałeś w ustawieniach AIOSEO.

Po zakończeniu dodawania tagów og do posta pamiętaj, aby go zapisać, zaktualizować lub opublikować, w zależności od tego, co ma zastosowanie, aby zatwierdzić wprowadzone zmiany.

Obejmuje to, jak dodać tagi og do witryny WordPress. Mamy nadzieję, że ten artykuł pomógł Ci wybrać lepsze podejście do tego problemu i dowiedziałeś się trochę o tym, jak ważne jest zaimplementowanie tagów og w Twojej witrynie.

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

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

101 sztuczek WordPress

Kliknij tutaj, aby pobrać teraz

// Dodanie otwartego wykresu w atrybutach języka

funkcja add_opengraph_doctype( $output ) {

return $wyjście . ' xmlns:og="https://opengraphprotocol.org/schema/" xmlns:fb="https://www.facebook.com/2008/fbml"';

}


add_filter('language_attributes', 'add_opengraph_doctype');


// Dodajmy metainformacje Open Graph

funkcja add_og_meta_tag() {


global $ post;


if( !is_singular() ) // jeśli nie jest to post lub 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 polecanego obrazu, użyj domyślnego obrazu

$default_image="https://example.com/image.jpg"; // zastąp to domyślnym obrazem na twoim serwerze lub obrazem w twojej bibliotece multimediów

Echo ' ';

}


else {

$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'duży' );

Echo ' ';

}


echo "\n \n";

}


add_action( 'wp_head', 'add_og_meta_tag', 5 );

O autorze
Dawid Attar
David pracuje w branży internetowej i cyfrowej od 21 lat. Ma ogromne doświadczenie w branży oprogramowania i projektowania stron internetowych, wykorzystując WordPress, Joomla i nisze je otaczające. Współpracował z agencjami rozwoju oprogramowania, międzynarodowymi firmami zajmującymi się oprogramowaniem, lokalnymi agencjami marketingowymi, a obecnie jest dyrektorem ds. operacji marketingowych w Aphex Media – agencji SEO. Jako konsultant cyfrowy koncentruje się na pomaganiu firmom w uzyskaniu przewagi konkurencyjnej dzięki połączeniu ich strony internetowej i dostępnych obecnie platform cyfrowych. Połączenie wiedzy technologicznej z dużym zmysłem biznesowym zapewnia jego pismom przewagę konkurencyjną.

Jeszcze jedna rzecz... Czy wiesz, że osoby, które udostępniają przydatne rzeczy, takie jak ten post, również wyglądają NIESAMOWITE? ;-)
Proszę zostaw użyteczny skomentuj swoje przemyślenia, a następnie udostępnij to na swoich grupach na Facebooku, które uznają to za przydatne i wspólnie zbierzmy korzyści. Dziękuję za udostępnienie i bycie miłym!

Ujawnienie: Ta strona może zawierać linki do zewnętrznych witryn produktów, które kochamy i gorąco polecamy. Jeśli kupisz sugerowane przez nas produkty, możemy otrzymać opłatę za polecenie. Takie opłaty nie wpływają na nasze rekomendacje i nie przyjmujemy płatności za pozytywne recenzje.

Autorzy promowani w:  Inc Czasopismo Logo .   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   i wiele więcej ...