W tym artykule omówimy, jak dodać Facebook Open Graph i Twitter Cards do Joomla bez wtyczki lub modułu.
Jeśli nie mieszkałeś pod kamieniem przez ostatnią dekadę, prawdopodobnie bardzo często widziałeś ludzi dzielących się artykułami na Facebooku z ładnym zdjęciem i tytułem, a także podobną rzeczą na Twitterze z dużymi, ładnymi kartami z dużymi wizerunek.
Najlepszym sposobem na kontrolowanie tego jest wdrożenie tzw Otwórz Wykres protokół. Jest to zestaw tagów, które podpowiadają Twitterowi, Facebookowi i innym robotom indeksującym, jakich treści powinni używać.
Możesz to łatwo zrobić w Joomla bez instalowania jakiegokolwiek rozszerzenia innej firmy, tworząc nadpisanie szablonu.
Oto jak to zrobić:
Karty na Twitterze Joomla
Podczas wdrażania kart na Twitterze za pomocą tagów Open Graph Joomla – zamiast wyświetlania losowego obrazu lub braku obrazu, Twój artykuł Joomla będzie sugerował najlepszy obraz do użycia.
Zobacz poniższy przykład z CollectiveRay kanał na Twitterze.
Przykład otwartego wykresu Facebook Facebook
Z drugiej strony – na Facebooku, używając tagów Joomla Open Graph, Twoje posty po udostępnieniu będą wyglądały jak poniżej.
Jak włączyć tagi Joomla Open Graph
1. Utwórz nadpisanie szablonu dla artykułów
Rozszerzenia > Szablony > Szablony > (Twój szablon) Szczegóły i pliki > Utwórz zastąpienia > Komponenty > com_content > artykuł
Po utworzeniu zastąpienia szablonu artykułu możesz dodać metadane do zastąpienia, które będzie używane do wyświetlania artykułu. Zasadniczo musisz dodać do artykułu następującą treść, tak aby metadane zostały pobrane z Twojego artykułu.
2. Dodaj metadane dla otwartego wykresu Facebook / Twitter
Przejdź do Rozszerzenia > Szablony > Szablony > (Twój szablon) Szczegóły i pliki > Edytor > html > com_content > artykuły > default.php
Dodaj poniższy kod na górze między tagami php: - uważaj, gdzie to dodać, możesz tymczasowo przerwać szablon, jeśli dodasz go w niewłaściwym miejscu ... więc wykonaj pełną kopię zapasową pliku przed wykonaniem dowolnej z tych edycji
if (isset($images->image_intro) and !empty($images->image_intro)){ $timage= htmlspecialchars(JURI::root().$images->image_intro); } elseif (isset($images->image_fulltext) and !empty($images->image_fulltext)){ $timage= htmlspecialchars(JURI::root().$images->image_fulltext);}else{ $timage= 'https://www.joomlawire.com/joomla3/images/joomla_logo_black.jpg';}$doc =& JFactory::getDocument();$doc->addCustomTag( ' <meta name="twitter:title" content="'.$this->escape($this->item->title).'"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@DARTCreations"> <meta name="twitter:creator" content="@DARTCreations"> <meta name="twitter:url" content="'.str_replace('" ','"',JURI::current()).'" <meta name="twitter:description" content="'.strip_tags($this->item->introtext).'"> <meta name="twitter:image" content="'.$timage.'"> <meta property="og:title" content="'.$this->escape($this->item->title).'"/> <meta property="og:type" content="article"/> <meta property="og:email" content="info@dart-creations.com";/> <meta property="og:url" content="'.str_replace('" ','"',juri::current()).'" <meta property="og:image" content="'.$timage.'"/> <meta property="og:site_name" content="DARTCreations"/> <meta property="fb:admins" content="xxxxxxxxxxx"/> <meta property="og:description" content="'.strip_tags($this->item->introtext).'"/>');
3. Dostosuj tagi Open Graph do swoich wartości
Powyższy kod jest dostosowany do CollectiveRay, więc oczywiście edytuj wartości do elementów, które chcesz dla swojej witryny.
Oto linie, które musisz zmienić:
$timage= 'https://www.joomlawire.com/joomla3/images/joomla_logo_black.jpg';
Powinna to być lokalizacja domyślnego obrazu, jeśli artykuł nie zawiera obrazu wprowadzającego lub obrazu pełnego tekstu.
<meta name="twitter:site" content="@DARTCreations"> <meta name="twitter:creator" content="@DARTCreations">
Powyższa wartość @ powinna zostać zmieniona, aby odzwierciedlała Twoją nazwę użytkownika Twittera.
<meta property="og:email" content="info@dart-creations.com";/>
Powyższy adres e-mail należy zaktualizować na własny adres e-mail.
Powyższe należy zaktualizować do nazwy Twojej witryny.
Zamiast tego XXXXXXXXXXX tagu fb:admins, będziesz musiał wpisać numeryczny identyfikator użytkownika Facebooka, który będzie wykonywał takie rzeczy jak Page Insights. Aby znaleźć numer, możesz chcieć spojrzeć na takie narzędzie, jak to narzędzie - znajdź mój identyfikator na Facebooku.
Propozycja czytelnika:
Eddie zasugerował, że możesz ograniczyć długość opisu do określonej liczby znaków, jeśli użyjesz poniższego kodu:
Możesz chcieć ograniczyć długość opisu do ok. 45 znaków, używając mb_strimwidth lub substr w następujący sposób:
<meta name="twitter:description" content="'.mb_strimwidth(strip_tags($this->item->introtext),0,45).'"/>
or
Ed przedstawił również drugą sugestię, która w rzeczywistości pozwala wybrać dane z metaopisu artykułu, co jest całkiem dobrą sugestią.
Poprawiłem trochę kod i otrzymałem następujące informacje:
.
Jest to wytwarzane przez ten kod (uwaga ">" jest usunięta):
<meta property="og:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'opis' )),0,45, " ...").'"=""/>
Widać, że otrzymuję opis meta, ograniczony do 45 znaków i dodając wielokropek, jeśli opis jest obcięty. W ten sposób mogę „kliknąć przynętę” na mój opis, aby uzyskać lepszy CTR, jednocześnie zachowując czytelność tekstu wprowadzającego zgodnie ze „stylem” lub „głosem” mojej witryny. Używając metaopisu, mogę również dodać część tego kodu do zastąpienia dla kategorii!
Inny czytelnik: Thomas Meredith skomentował poniżej, że kod
był podatny na luki XSS, a poprawny kod powinien być:
<meta property="og:url" content="'.str_replace('" ','"',JURI::current()).'"
Zaktualizowaliśmy kod o tę poprawkę i powinieneś zrobić to samo.
Pomóżmy Ci lepiej zarządzać Joomlą
Więcej aktualizacji od naszych gości
Jeśli podążysz za konwersacją poniżej, zauważysz, że nawet jeśli powyższy kod działa w większości sytuacji, istnieją konkretne przypadki, w których kod to nie działa. Michael z N8 Solutions podjął się znalezienia rozwiązania dla tych przypadków, w których to nie działało.
W duchu społeczności Joomla o otwartym kodzie źródłowym udostępnili kod pozostałym odwiedzającym w komentarzach poniżej. Dla jasności powielam kod i komentarze Michaela dosłownie:
Udało mi się rozwiązać problem nie tylko dla strony "Kontakt", ale także dla stron pozycji menu "Blog" i "Polecane".
Po pierwsze, co napisałem powyżej dla strony kontaktowej, za przechwycenie "Nazwiska" kontakt jest zapisywany, jak będzie działał. „twitter:title” i „og:title” powinny wyglądać tak, jeśli chcesz użyć zapisanej nazwy kontaktu.
<meta name="twitter:title" content="'.$this->escape($this->item->name).'" />
Jeśli jednak chcesz wykorzystać informacje z menu, możesz to zrobić za pomocą tego nowego kodu, który będzie działał również na stronach menu „Blog” i „Polecane”.
Możesz wybrać „Tytuł menu”, „Tytuł strony przeglądarki” lub „Nagłówek strony”. Wolę używać nagłówka strony i ustawić menu tak, aby nie wyświetlało nagłówka strony. W ten sposób mogę wykorzystać nagłówek strony dla Open Graph tak, jak chcę, ponieważ nie pojawi się on nigdzie indziej w przeciwieństwie do tytułu menu lub tytułu strony przeglądarki.
Aby to zrobić, musisz dodać poniższy kod między "$timage" a powyżej "$doc".
$active = JFactory::getApplication()->getMenu()->getActive();
$title = $active->title;
$browserpagetitle = $active->params->get('page_title');
$pageheading = $active->params->get('page_heading');
Następnie należy zastąpić kod „twitter:title” i „og:title” poniższym kodem, aby użyć „Nagłówka strony”.
<meta name="twitter:title" content="'.$this->escape($pageheading).'" />
<meta property="og:title" content="'.$this->escape($pageheading).'" />
Jeśli zamiast tego chcesz użyć "Tytułu menu" lub "Tytułu strony przeglądarki", w kodzie należy zastąpić "$pageheading" albo "$title", aby użyć tytułu menu lub "$browserpagetitle", aby użyć przeglądarki Tytuł strony.
Możesz utworzyć nadpisania tutaj:
Utwórz nadpisania > Komponenty > com_content > kategoria
Utwórz nadpisania > Komponenty > com_content > polecane
Utwórz nadpisania > Komponenty > com_kontakt > kontakt
Następnie edytuj nadpisania, dodając powyższy kod w odpowiednich lokalizacjach:
Edytor > html > com_content > kategoria > blog.php
Edytor> html> com_content> polecane> default.php
Edytor > html > com_contact > kontakt > default.php
Usunąłem również instrukcję "if" dla obrazu Open Graph, pozostawiając tylko podstawową linię:
$timage= 'https://www.domain.com/custom-open-graph-image.jpg';
Zrobiłem to, ponieważ wyrażenie "if" nie jest konieczne dla tych stron, ponieważ nie ma obrazu wprowadzającego ani obrazu pełnego tekstu.
Kolejna ważna sprawa dotycząca „Opisów”.
Dla KONTAKTÓW:
W kodzie strony kontaktowej dla „twitter:opis” i „og:opis” „introtext” należy zastąpić „metadesc”, aby pobrać Meta opis ustawiony dla kontaktu. Jeśli nie ustawisz opisu dla kontaktu, nic nie będzie wyświetlane dla tagów opisu otwartego wykresu.
W przypadku BLOGÓW i WYRÓŻNIANYCH Artykułów:
Tak jak powyżej w przypadku kontaktów „twitter:opis” i „og:opis”, „introtekst” należy zastąpić powyższym kodem Eddiego, aby pobrać meta opis, który jest ustawiony dla pozycji menu bloga lub polecanego artykułu. Ponownie, jeśli nie ustawisz tam opisu, nic nie będzie wyświetlane. Więc nie musisz tego szukać, oto kod podany powyżej przez Eddiego i jak powinny wyglądać linie opisu.
<meta name="twitter:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'description' )),0,45, " ...").'" />
<meta property="og:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'description' )),0,45, " ...").'" />
Wolę zmienić długość znaków z 45 na 160, ponieważ nie jestem zainteresowany "kliknięciem na przynętę" potencjalnymi użytkownikami witryny.
Mam nadzieję, że to pomoże innym!
4. Testuj z walidatorem Twittera i Facebookiem Linter
Sprawdź artykuł na swojej stronie w porównaniu z walidatorem Twittera: https://cards-dev.twitter.com/validator
oraz
Linter na Facebooku: https://developers.facebook.com/tools/debug/
I tak dodajesz metadane Open Graph do swoich artykułów Joomla :)
Często Zadawane Pytania
Co to jest protokół Open Graph?
Protokół Open Graph to sposób na umożliwienie stronom internetowym kontrolowania treści wyświetlanych, gdy zawartość ich witryny jest udostępniana na Facebooku, Twitterze lub innych platformach przyjaznych dla Open Graph. Jeśli Twoja witryna nie używa tych tagów, platforma może zdecydować, jaki obraz wyświetlić i prawdopodobnie pokaże niepowiązany obraz.
Czy Google używa Open Graph?
Nie, Google nie używa protokołu Open Graph dla stron wyników wyszukiwania. Zamiast tego używa Dane strukturalne, która jest kolejną metodą umożliwiającą robotom indeksującym lepsze zrozumienie treści w Twojej witrynie. Mimo że Google nie używa tagów OG per se, ruch do Twojej witryny jest sygnałem rankingowym, więc prawdopodobnie przyniesie korzyści Twoim rankingom organicznym, aby mieć witrynę przyjazną dla mediów społecznościowych.
Jak ustawić tagi Open Graph w Joomla?
Aby ustawić tagi otwartego wykresu w Joomla, możesz użyć nadpisania szablonu i wypełnić tagi z treści swoich artykułów, jak opisaliśmy w powyższym artykule. Alternatywnie możesz zainstalować wtyczkę, która jest w stanie automatycznie generować te tagi z zawartości Twojej witryny.
Jak sprawdzić tagi Open Graph?
Aby sprawdzić tagi Open Graph, możesz użyć Facebooka Linter lub Sharing Debuggera albo użyć walidatora kart Twittera.
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.
i wiele więcej ...