SEO-grafika

Rich snippets – przykład karty produktu

Strony internetowe / Łukasz Socha / 27 sierpnia 2014

Kilka tygodni temu pokazywałem jak wyświetlić informacje o osobie w wynikach Google, w kolejnym artykule z cyklu pokażę jak poprawnie opisać produkt. W tym przypadku możemy wyświetlić nieco więcej informacji.

<!DOCTYPE html>
<html>
<head>
    <title>Produkt</title>
    <meta itemprop='productID' content='isbn:123-456-789'/>.
</head>
<body>
<div itemscope itemtype="http://schema.org/Product">
    Nazwa produktu: <span itemprop="name">Produkt XYZ</span><br/>
    Zdjęcie: <img src="http://racymind.pl/wp-content/themes/racymind/images/logo.png" itemprop="image" /><br/>
    Ocena:<br/>
    <div itemprop="aggregateRating"
         itemscope itemtype="http://schema.org/AggregateRating">
        ocena <span itemprop="ratingValue">3.5</span>/5
        ilość ocen <span itemprop="reviewCount">11</span> customer reviews
    </div><br/>
    Cena:<br/>
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <span itemprop="price">200.00 zł</span>
        <link itemprop="availability" href="http://schema.org/InStock" />In stock
    </div><br/>
    Producent: <span itemprop="manufacturer">Racy Mind</span><br/>
    Marka: <span itemprop="brand">Marka produktu</span><br/>
    Opis produktu: <span itemprop="description">Opis produktu  XYZ</span><br/>
    Kolor produktu: <span itemprop="color">czarny</span><br/>
    Opinię klientów:<br/>
    <div itemprop="review" itemscope itemtype="http://schema.org/Review">
        <span itemprop="name">Niezadowolony klient</span> -
        by <span itemprop="author">Jan Kowalski</span>,
        <meta itemprop="datePublished" content="2011-04-01">1. kwietnia 2011
        <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
            <meta itemprop="worstRating" content = "1">
            <span itemprop="ratingValue">1</span>/
            <span itemprop="bestRating">5</span>stars
        </div>
        <span itemprop="description">Barzdo słaba jakość</span>
    </div><br/>
    <div itemprop="review" itemscope itemtype="http://schema.org/Review">
        <span itemprop="name">Zadowolony klient</span> -
        by <span itemprop="author">Jan Nowak</span>,
        <meta itemprop="datePublished" content="2011-04-05">5. kwietnia 2011
        <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
            <meta itemprop="worstRating" content = "5">
            <span itemprop="ratingValue">5</span>/
            <span itemprop="bestRating">5</span>stars
        </div>
        <span itemprop="description">Ładny</span>
    </div><br/>
</div>
</body>
</html>

Dla głównego bloku treści informuję jaki jest to typ informacji itemscope itemtype=”http://schema.org/Product”. Dla poszczególnych elementów w atrybucie itemprop podaje się jakie informacje zawiera znacznik. Myślę, że dla osób znających podstawy HTML jest to łatwe do odczytania. A co tym razem wyświetli Google?

Przykład opisu produktu z użyciem Rich SNippets

Tym razem Google wyświetli cenę, dostępność oraz ocenę użytkowników. Dzięki temu użytkownik już na etapie wyszukiwania wie ile dany produkt kosztuje i czy jest aktualnie dostępny. Ponadto, osobiście zwracam uwagę przed wejściem na stronę jaką ocenę ma dany link. Zapewne podobnie zachowuje się spora część internautów, dlatego warto zwracać uwagę, czy Twoja strona udostępnia takie informacje.

Bez dużego wysiłku możemy w tak prosty sposób zwiększyć ilość wejść z wyszukiwarki Google na stronę www :).

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