Jak wyświetlić zdjęcie nowego wpisu w social media?

Dodajesz nowy artykuł na bloga w swoim sklepie internetowym Shoper. Napisałeś super treść z wykorzystaniem ChatGPT, przygotowałeś porywającą grafikę z Midjourney i chcesz podzielić się tym wpisem ze swoimi flowersami na social media.

Jednak dodając wpis na social media w podglądzie linku nie wyświetla się zdjęcie, które dodałeś przed chwilą? Mamy na to rozwiązanie. Przeczytaj poniższy artykuł i ulepsz swojego bloga.

Co to są meta tagi i open graph?

Open Graph to protokół, który pozwala na kontrolowanie wyglądu i treści, które są wyświetlane na Facebooku, Twitterze i innych serwisach społecznościowych, gdy użytkownik dzieli link do Twojego artykułu. Meta tagi Open Graph pozwalają na określenie tytułu, opisu, obrazka i innych informacji dotyczących strony, które są wykorzystywane przez serwisy społecznościowe podczas wyświetlania linka.

Poprawne ustawienie meta tagów Open Graph to klucz do osiągnięcia sukcesu na serwisach społecznościowych. Dzięki nim, Twoje posty będą wyglądały bardziej atrakcyjnie i zachęcająco, a tym samym zwiększą się szanse na to, że użytkownicy klikną w Twój link i odwiedzą Twoją stronę. Warto więc zadbać o to, aby meta tagi Open Graph były właściwie skonfigurowane dla każdej strony na Twojej stronie internetowej.

Zobacz już teraz nasze polecane dodatki Shoper

Co zrobić aby moje posty wyglądały lepiej niż konkurencji?

Domyślnie w Shoperze nie ma zaimplementowanych meta tagów Open Graph, jednak możesz je łatwo dodać za pomocą paru linijek kodu stworzonych przez nas.

Tak wygląda dodany post na social media bez modyfikacji meta tagów.

Tak wygląda dodany artykuł na social media po naszych modyfikacjach.

Musisz pamiętać!
Każda modyfikacja w plikach TPL, powoduje nie aktualizowanie się zmodyfikowanego pliku.

Aby dodać nasz kod do swojego sklepu musisz w panelu administracyjnym utworzyć kopię swojego aktualnego szablon przechodząc do Wygląd i treści -> Wygląd sklepu -> Obecny szablon graficzny, a następnie na nowo otwartej stronie w prawym górnym rogu najechać na Więcej i wybrać opcje Utwórz kopię.

Na tak stworzonej kopii możemy teraz edytować pliki TPL szablonu bez obawy, że aktualnie działający sklep przestanie funkcjonować. W nowo otwartym oknie znowu najeżdżamy w prawym górnym rogu na link Więcej, tym razem po rozwinięciu się opcji wybieramy Edytor stylu.
W edytorze w lewej kolumnie otwieramy plik header.tpl i wklejamy poniższy kod w linijce 49 (będzie to linijka 49 jeżeli ten plik nie był wcześniej edytowany).

{if $body_id|strstr:"shop_news"}
    <meta property="og:title" content="{$article->article->name|escape}" />
    <meta property="og:image" content="{$shop_url}/{$article->image}" />
    <meta property="og:url" content="{$shop_url}{route function='news' key=$article->getIdentifier() newsId=$article->getIdentifier() newsName=$article->article->name newsYear="Y"|date:$article->articleTimestamp newsMonth="m"|date:$article->articleTimestamp newsDay="d"|date:$article->articleTimestamp}" />
    <meta property="og:image:secure_url" content="{$shop_url}{route function='news' key=$article->getIdentifier() newsId=$article->getIdentifier() newsName=$article->article->name newsYear="Y"|date:$article->articleTimestamp newsMonth="m"|date:$article->articleTimestamp newsDay="d"|date:$article->articleTimestamp}" />
    <meta property="og:description" content="{$article->article->short_content|strip_tags:false}" />
{/if}

Jest to ulepszony kod ze strony Shopera, który w opisie niewyświetlanym w social media nie pokazuje znaczników HTML z krótkiego opisu.

Sebastian

W branży web od 2009 roku, swoją przygodę rozpoczął jako Frontend Developer. Pracował z takimi firmami jak Eturysta, Eduweb, Trening Biegacza, Forward Thinking Systems, SimonIoT. Natomiast z Shoperem związany od 2016 roku.