SEO-grafika

Rich snippets – przykład opisu osoby

Strony internetowe / Łukasz Socha / 23 lipca 2014

Od kilku lat Google udostępnia możliwość zamieszczania szczegółów na temat strony w wynikach wyszukiwania – produkty zawierają np. ceny i ocenę, a filmy i muzyka informacje o autorze. W kilku najbliższych artykułach pokażę jak prawidłowo opisać różne typy informacji.

Trochę teorii…

Rich Snippets (tłum. Google fragmenty sformatowane) są to dodatkowe informacje (zdjęcia, oceny, informacje o autorze itp.) wyświetlane w wynikach wyszukiwarki Google.

Przykłady rich Snippets

  • Opinie
  • Ludzie
  • Produkty
  • Firmy i organizacje
  • Przepisy
  • Zdarzenia
  • Filmy

Po co mi to?

Z prostego powodu, opisy rozszerzone przyciągają uwagę i zachęcają użytkownika do wejścia na stronę. Już na etapie wyszukiwania stron internauta wie, co może znaleźć na danej stronie. Statystyki pokazują, że Rich Snippets korzystnie wpływa na wskaźnik CTR.

Jak dodać opisy rozszerzone na stronie?

Opisy rozszerzone można utworzyć za pomocą jednego z trzech formatów:

Przykład opisu osoby

We wszystkich przykładach będę wykorzystywał mikrodane – format ten jest zalecany przez Google. W tym wpisie pokażę jak poprawnie opisać osobę.

Poniżej przykładowa strona HTML zawierająca CV:

<!DOCTYPE html>
<html>
<head>
    <title>Jan Kowalski - CV</title>
</head>
<body>
<div itemscope itemtype="http://schema.org/Person">
    Imię i nazwisko: <span itemprop="name">Jan Kowalski</span><br/>
    Zdjęcie: <img src="jan-kowalski.jpg" itemprop="image" /><br/>
    Adres:<br/>
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">
      Jakaś Ulica 15
    </span>
        <span itemprop="addressLocality">Warszawa</span>,
        <span itemprop="addressRegion">Mazwoieckie</span>
        <span itemprop="postalCode">24-300</span>
    </div><br/>
    Telefon:   <span itemprop="telephone">(425) 123-4567</span><br/>
    Adres strony www: <a href="http://www.example.com" itemprop="url">www.example.com</a><br/>
    Adres e-mail: <a href="mailto:email@example.com" itemprop="email">email@example.com</a><br/>
    Studia: <a href="http://www.xyz.edu/students/umcs.html" itemprop="colleague">
    UMCS</a><br/>
    Praca: <span itemprop="jobTitle">programista</span> w firmie <span itemprop="affiliation">Racy Mind</span>
</div>
</body>
</html>

Dla głównego bloku treści informuję jaki jest to typ informacji itemscope itemtype=”http://schema.org/Person”. Dla poszczególnych elementów w atrybucie itemprop podaje się jakie informacje zawiera znacznik. Myślę, że w tym przypadku opis osoby jest jasny i nie muszę opisywać każdego znacznika :). Dzięki temu prostemu zabiegowi wyszukiwarkom łatwiej zebrać informacje o danej osobie, a my zyskujemy dodatkowe informacje w wynikach Google:

rich-snippets-opis-osoby

Zapewne w przyszłości Google zacznie wyświetlać dodatkowe informacje na temat osoby :)

Co sądzisz o wpisie?
BeżnadziejnySłabyŚredniDobryBardzo dobry (Brak ocen, bądź pierwszy!)
Loading...