Przewodnik dla początkujących: Jak korzystać z Rich Snippets w WordPressie

Nie pozwól, aby Twoja witryna WordPress została zakopana pod konkurencją. Bogate fragmenty kodu przeniosą cię na górę strony wyników wyszukiwania, zwiększając ruch na twojej treści.

Fragment kodu rozszerzonego to wynik wyszukiwania, który wyświetla dodatkowe informacje poza standardowym tytułem, adresem URL i opisem. Te dodatkowe informacje są pobierane z uporządkowanych danych w twojej witrynie internetowej i wzbogacają twoją listę wyszukiwania, czyniąc ją bardziej atrakcyjną wizualnie i informacyjną dla użytkowników.

Okazuje się, że te specjalne listy wyszukiwania naprawdę się wyróżniają i przyciągają uwagę czytelników, poprawiając widoczność naszej witryny internetowej i zwiększając ruch na naszej witrynie. Fragmenty rozszerzone kodu można uzyskać dla specjalnych treści, takich jak recenzje, przepisy kulinarne, wydarzenia i inne.

Ten przewodnik wyjaśnia wszystko, co musisz zrobić, aby dodać fragmenty kodu rozszerzonego do twojej witryny internetowej WordPress.

Dlaczego warto używać Rich Snippets na twojej witrynie WordPress?

Bogate fragmenty kodu wykorzystują tak zwane znaczniki schematu, aby zapewnić wyszukiwarkom dodatkowe informacje o twojej treści.

Boty wyszukiwarek wykorzystują te dane do wyświetlania dodatkowych informacji o twoich wpisach i stronach w wynikach wyszukiwania.

Dzięki temu twoje wpisy i strony będą bardziej wyróżniać się w wynikach wyszukiwania, co może poprawić organiczny współczynnik klikalności i pomóc zwiększyć ruch na blogu.

Potwierdzają tostatystyki wyszukiwarki Google, według których wyniki rozszerzone uzyskują 58 kliknięć na każde 100 wyszukiwań, przewyższając zwykłe wyniki wyszukiwania.

Pomaga również budować autorytet w swojej niszy, ponieważ twoja witryna staje się bardziej widoczna w wynikach wyszukiwania.

Rich snippets nie są przeznaczone tylko dla witryn z recenzjami lub przepisami kulinarnymi. Możesz używać fragmentów kodu rozszerzonego dla wydarzeń, produktów, osób, poradników, filmów, muzyki, aplikacji, artykułów, wpisów na blogach i wielu innych.

W związku z tym pokażemy, jak dodać fragmenty kodu rozszerzonego do WordPressa. Skorzystaj z poniższych odnośników, aby przejść bezpośrednio do wybranej metody.

Metoda 1. Dodawanie fragmentów kodu za pomocą wtyczki WordPress

Najprostszym sposobem na dodanie fragmentów kodu do WordPressa jest użycie wtyczki AIOSEO. Jest to najlepsza wtyczka WordPress SEO na rynku, używana przez ponad 3 miliony witryn internetowych.

Pomaga łatwo zoptymalizować twoją witrynę pod kątem wyszukiwarek bez konieczności zatrudniania eksperta SEO. Co więcej, możesz skonfigurować fragmenty kodu na swojej witrynie za pomocą kilku kliknięć.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki AIOSEO. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Po włączaniu zostaniesz natychmiast przeniesiony do kreatora konfiguracji AIOSEO. Należy kliknąć przycisk „Rozpocznijmy”.

Jeśli kreator konfiguracji nie pojawi się od razu, wystarczy przejść do All in One SEO ” Dashboard.

W tym miejscu można kliknąć przycisk „Uruchom kreator konfiguracji”. Kreator przeprowadzi cię przez kolejne etapy konfiguracji wtyczki dla twojej witryny internetowej.

Po przejściu przez kreator konfiguracji należy włączyć dodatek „Advanced Rich Snippets + Schema Markups”.

Wystarczy zaznaczyć pole, aby zmieniło kolor na niebieski, a następnie kliknąć przycisk „Zapisz i kontynuuj”.

Na ostatnim ekranie należy wpisz klucz licencyjny, a następnie kliknij przycisk „Połącz”.

Informacje te można znaleźć na stronie Twojego konta w witrynie internetowej AIOSEO.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat prawidłowej konfiguracji AIOSEO dla WordPress.

Następnie możesz przejść do AIOSEO ” Search Appearance w twoim panelu administracyjnym WordPress, a następnie kliknąć na kartę „Content Types”.

Następnie możesz ustawić typ znaczników schematu dla twoich wpisów i stron.

Wystarczy kliknąć opcję menu „Schema Markup”, a następnie wybrać rodzaj schematu z listy rozwijanej.

Będziesz mógł zobaczyć różne rodzaje treści, które możesz utworzyć za pomocą wtyczki. Lista obejmuje:

• Kurs
• Produkt
• Przepis
• Oprogramowanie/Aplikacja
• FAQ
• Strona internetowa
• Profil
• Artykuł

Kliknięcie dowolnego rodzaju treści spowoduje wyświetlenie dostępnych pól.

Ustawienia te będą ustawieniami domyślnymi po utworzeniu nowego wpisu na blogu. Można je jednak zmienić również dla poszczególnych wpisów.

Poniżej znaczników schematu wpisów można również kontrolować domyślny schemat dla twoich stron.

Wystarczy wybrać rodzaj schematu z listy rozwijanej. Następnie dostępne będą dodatkowe opcje dla wybranego rodzaju schematu.

Po zakończeniu wprowadzania zmian, kliknij przycisk „Zapisz zmiany” przed opuszczeniem strony.

Dodawanie informacji Rich Snippet do twoich wpisów i stron

Teraz możesz dodać informacje schematu do swoich wpisów i stron, dzięki czemu będą one wyświetlać unikatowe fragmenty kodu w wynikach wyszukiwania.

Aby to zrobić, wystarczy otworzyć wpis na blogu i przewinąć w dół poniżej edytora wpisów. Tutaj zobaczysz pole meta o nazwie „Ustawienia AIOSEO”.

Należy kliknąć kartę „Schema”, a następnie przycisk „Generate Schema”.

Spowoduje to otwarcie katalogu schematów. Kliknij przycisk „Add Schema” obok rodzaju schematu, który chcesz dodać.

Teraz dostępne będą różne pola do wypełnienia, w zależności od wybranej opcji. Na przykład rodzaj schematu „Oprogramowanie” zawiera pola na nazwę, system operacyjny, cenę, opis, recenzję i inne.

Po zakończeniu kliknij przycisk „Dodaj schemat”. Nie zapomnij kliknąć „Aktualizuj” lub „Opublikuj” we wpisie, aby zapisać twoje zmiany.

Dodawanie znaczników schematu do poszczególnych stron WordPress jest podobne. Musisz otworzyć stronę, którą chcesz edytować, a następnie przewinąć w dół do pola meta „Ustawienia AIOSEO” pod edytorem strony.

Następnie kliknij opcję menu „Schemat”, kliknij przycisk „Generuj schemat” i wybierz twój rodzaj schematu strony z katalogu schematów.

W zależności od wybranego rodzaju schematu pojawią się różne opcje.

Podobnie jak powyżej, gdy skończysz, musisz kliknąć przycisk „Dodaj schemat” i nacisnąć „Aktualizuj” lub „Opublikuj” na stronie, aby wprowadzić twoje zmiany.

Dodanie fragmentu kodu rozszerzonego nie zrobi różnicy na front-endzie twojego bloga WordPress. Będziesz jednak przekazywać botom wyszukiwarek dodatkowe dane, które będą wyświetlane wraz z twoimi wpisami i stronami w wynikach wyszukiwania.

Metoda 2. Dodawanie fragmentów kodu do WordPressa

Innym sposobem na dodanie fragmentów kodu do WordPressa jest dodanie do niego kodu. Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym przewodnikiem na temat kopiowania i wklejania kodu w WordPress.

Rich snippets lub znaczniki danych strukturalnych mogą być zapisane w trzech różnych słownikach. Te słowniki to mikrodane, RDFa i JSON-LD. Możesz użyć dowolnego z nich na swojej witrynie. Jednak większość początkujących uważa RDFa za bardziej przyjazny dla początkujących.

Oto przykład strony o użytkowniku w WordPress. Normalnie tekst strony będzie wyglądał mniej więcej tak:

John Smith
<img src="johnsmith.jpg" alt="Photo of John Smith"/>
Support Technician
342 Acme Inc.
101 Washington Avenue
Eagleton IN 98052
(425) 123-4567
<a href="mailto:johnsmith@example.com">johnsmith@example.com</a>
Website:
<a href="http://www.example.com">example.com</a>

Można to łatwo zmienić za pomocą fragmentów kodu rozszerzonego.

Jeśli jesteś zaznajomiony z HTML, z łatwością zrozumiesz poniższy przykład:

<div vocab="http://schema.org/" typeof="Person">
  <span property="name">John Smith</span>
  <img src="johnsmith.jpg" property="image" alt="Photo of John Smith"/>
  <span property="jobTitle">Support Technician</span>
  <div property="address"  typeof="PostalAddress">
    <span property="streetAddress">
      342 Acme Inc.
      101 Washington Avenue
    </span>
    <span property="addressLocality">Eagleton</span>,
    <span property="addressRegion">IN</span>
    <span property="postalCode">46818</span>
  </div>
  <span property="telephone">(425) 123-4567</span>
  <a href="mailto:johnsmith@example.com" property="email">johnsmith@example.com</a>
Website
  <a href="http://example.com" property="url">example.com</a>
</div>

Dla każdego rodzaju treści istnieją pewne specjalne właściwości, które należy zdefiniować.

Schema.org to organizacja, która pomaga w utrzymaniu standardu dla różnych rodzajów treści. Na ich witrynie internetowej można znaleźć obszerną dokumentację z przykładami dla każdego rodzaju treści schematu.

Oto kolejny przykład przepisu z fragmentami kodu rozszerzonego.

<div vocab="http://schema.org/" typeof="Recipe">
  <span property="name">Mom's World Famous Banana Bread</span>
  By <span property="author">John Smith</span>,
    <img property="image" src="bananabread.jpg"
    alt="Banana bread on a plate" />
  <span property="description">This classic banana bread recipe comes
  from my mom -- the walnuts add a nice texture and flavor to the banana
  bread.</span>
  Prep Time: <meta property="prepTime" content="PT15M">15 minutes
  Cook time: <meta property="cookTime" content="PT1H">1 hour
  Yield: <span property="recipeYield">1 loaf</span>
  Ingredients:
  - <span property="recipeIngredient">3 or 4 ripe bananas, smashed</span>
  - <span property="recipeIngredient">1 egg</span>
  - <span property="recipeIngredient">3/4 cup of sugar</span>
  ...
  Instructions:
  <span property="recipeInstructions">
  Preheat the oven to 350 degrees. Mix in the ingredients in a bowl. Add
  the flour last. Pour the mixture into a loaf pan and bake for one hour.
  </span>
</div>

Jeśli ręcznie dodajesz fragmenty kodu do swoich wpisów w WordPressie, będziesz musiał ręcznie dodać kod HTML do WordPressa. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dla początkujących, jak edytować HTML w edytorze kodu WordPress.

Konieczne może być również zapoznanie się z zasobami Google dla programistów dotyczącymi danych strukturalnych, aby zrozumieć, które właściwości są wymagane dla każdego rodzaju treści.

Testowanie twoich fragmentów kodu i znaczników Schema

Jeśli ręcznie dodajesz fragmenty kodu rozszerzonego, upewnij się, że poprawnie dodałeś dane strukturalne do twojej witryny internetowej WordPress.

Aby sprawdzić twoje fragmenty kodu, po prostu przejdź do Narzędzia do testowania danych strukturalnych Google. Następnie możesz uruchomić dwa różne testy, aby przetestować twoje dane strukturalne.

Najpierw kliknij przycisk „Przejdź do testu wyników wzbogaconych”. Spowoduje to sprawdzenie, jakie wyniki wzbogacone można wygenerować dla twojej strony.

Następnie wpisz adres URL twojej strony lub wpisu w polu.

Następnie kliknij przycisk „Testuj adres URL”.

Spowoduje to automatyczne wygenerowanie raportu w celu sprawdzenia, które funkcje wyników rozszerzonych mogą pojawić się, gdy dana strona lub wpis zostanie wyświetlony w wynikach wyszukiwania.

Wyświetli on wszelkie błędy lub ostrzeżenia, dzięki czemu będziesz mógł poprawić swoje dane strukturalne. Możesz kliknąć strzałkę rozwijaną obok dowolnego ostrzeżenia, a otrzymasz szczegółowe instrukcje, jak je poprawić.

Następnie możesz przetestować twój znacznik schematu, wracając na stronę Narzędzi do testowania danych strukturalnych Google.

Następnie kliknij przycisk „Go to the Schema Markup Validator”.

Następnie wpisz swój adres URL lub fragment kodu w wyskakującym okienku „Testuj dane strukturalne”.

Następnie kliknij przycisk „Uruchom test”.

Narzędzie automatycznie przeanalizuje twój kod, aby sprawdzić, czy są w nim jakieś błędy.

Chcesz zobaczyć 0 błędów po prawej stronie strony.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak korzystać z fragmentów kodu rozszerzonego na twojej witrynie WordPress. Zachęcamy również do zapoznania się z naszym przewodnikiem na temat dodawania sekcji często zadawanych pytań (FAQ) w WordPressie oraz z naszą listą najlepszych wtyczek do WordPressa.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.