MIKROFORMATY
      I RICH SNIPPETS

Sławomir Borowy, Bartosz Sikorski
ROZKŁAD JAZDY:

Teoria
     podstawowe pojęcia

Praktyka
     jak szybko wystartować?

Case Study
     co to daje?

Hakowanie
     recepta na obrazki
NIE TAKA TRUDNA...   TEORIA
                       ...ale trochę nudna.
DEFINICJE



                     Rich Snippets




Mikroformaty
                     ?    hCard / hReview
                                            Mikrodane




               RDF
Definicje: MIKROFORMATY


●
    zbiór standaryzowanych formatów dla x/HTML
●
    wykorzystuje atrybuty: class, rel, rev
●
    standardy: hCard / hReview / hCalendar


      Więcej: http://microformats.org
Definicje: MIKROFORMATY

Przykład:
   <div class="hcard">
      <div class="fn">
        <span class="given-name">Steve</span>
        <span class="family-name">Jobs</span>
      </div>
      <div class="org">Apple Inc.</div>
   </div>
Definicje: RDF


●
    skrót od: Resource Description Framework
●
    wykorzystuje atrybuty: property, content, typeof


     Więcej: http://www.w3.org/TR/rdf-schema/
     lub: http://goo.gl/WUxZj
Definicje: RDF


Przykład:

   <div xmlns:v="http://rdf.data-vocabulary.org/#"
   typeof="v:Person">
      <span property="v:name">Steve Jobs</span>
      <span property="v:affiliation">Apple Inc.</span>
   </div>
Definicje: MIKRODANE


●
    standard dedykowany dla HTML 5
●
    wykorzystuje atrybuty: itemscope, itemprop, itemtype
●
    zalecany przez Google


      Więcej: http://schema.org
Definicje: MIKRODANE


Przykład:

   <div itemscope itemtype=
   "http://data-vocabulary.org/Person">
     <span itemprop="name">Steve Jobs</span>
     <span itemprop="affiliation">Apple Inc.</span>
   </div>
Definicje: RICH SNIPPETS

Rich Snippets = fragmenty rozszerzone w SERP
DEFINICJE


                  RICH SNIPPETS
                 (fragmenty rozszerzone)




MIKRODANE                 RDF              MIKROFORMATY


    itemtype         
                         property             
                                                  rel

    itemscope        
                         content              
                                                  rev

    itemprop         
                         typeof               
                                                  class
ROZSZERZENIA   W BOJU
POKAŻ SWOJĄ   TWARZ!
POKAŻ SWOJĄ TWARZ


1. Link do profilu Google+ z rel=”author”
POKAŻ SWOJĄ TWARZ


2. Link z profilu Google+ do docelowej domeny
POKAŻ SWOJĄ TWARZ


3. Zadbaj o WYRAŹNE zdjęcie w profilu G+ i...


                 ...voila!
Ale zamiast kodować samemu…




...wykorzystuj gotowe wtyczki!
Implementacja autora: WORDPRESS

           Fancier Author Box




http://wordpress.org/extend/plugins/fancier-author-box/screenshots/
lub: http://goo.gl/ZZqOu
Implementacja ocen: WORDPRESS

               kk Star Ratings




http://wordpress.org/extend/plugins/kk-star-ratings/
lub: http://goo.gl/54WcI
Implementacja ocen: JOOMLA


                    Rich Snippets Vote




http://www.deconf.com/en/projects/rich-snippets-vote-plugin-for-joomla
lub: http://goo.gl/p1eNv
JAK TESTOWAĆ?

Narzędzie do testowania danych strukturalnych Google:




  http://www.google.com/webmasters/tools/richsnippets
  lub: http://goo.gl/VBJZo
CASE STUDY
Case study: SBART.PL




 Gwiazdki w SERP:
Case study: SBART.PL
Case study: SBART.PL




CTR:             1,35%...
Case study: OKRAZYCSWIAT.PL



     Obrazki w SERP:
Case study: OKRAZYCSWIAT.PL
Case study: OKRAZYCSWIAT.PL




CTR:              19,05%!
CO NA TO INNI?




                                       CTR:                  20-30%



http://static.seomoz.org/user_files/blog_imges/Rich-Snippets-Guide.png
lub: http://goo.gl/TFhYS
Czy Rich Snippets zawsze poprawiają CTR?



1. Niska pozycja strony w Google

2. Niewyświetlanie rozszerzeń dla wszystkich podstron

3. „Spowszednienie” gwiazdek
SnippetHACKING
„HAKOWANIE” wg POBIERACZKA :)




http://www.wykop.pl/ramka/1135797/niepokojace-wyniki-wyszukiwania/
lub: http://goo.gl/EvfGY
HAKOWANIE ENCJAMI


             Encja &#9733; w „breadcrumbs”:




                                                    © SearchEngineLand
                                                   & Piotr „Shpyo” Cichosz




http://blog.shpyo.net/324/nadaj-sobie-gwiazdki-w-serpach-sam-zamiast-snippetow.html
lub: http://goo.gl/4sr2N
PRZEPIS NA OBRAZEK




        VS
PRZEPIS NA OBRAZEK




<div itemscope itemtype="http://schema.org/Recipe">
<meta itemprop="name" content="Wyspy Brytyjskie - trzy pomysły">
<meta itemprop="image" content="http://okrazycswiat.pl/St-
Michael.jpg"/>
<meta itemprop="prepTime" content="Kornwalia, wyspa-niewyspa St.
Michael">
<meta itemprop="ingredients" content="Wyspy Brytyjskie - trzy
pomysły">
</div>
Wtyczka dla WP: GRAFIKI W SERPach
WTYCZKA „GRAFIKI W SERPach” DO POBRANIA




http://marketingdlaludzi.pl/do-pobrania
                    lub
           http://goo.gl/xFsPq

          ZA DARMO! :)
DOKĄD TERAZ?




       http://marketingdlaludzi.pl

–   prezentacja
–   wszystkie ważne linki
–   wtyczka dla grafik w WordPress do pobrania
–   dyskusja w komentarzach
ROZSZERZENIA ROZGRYZALI:

Sławomir Borowy         Bartosz Sikorski
borowy@4people.pl
                    &   sikorski@4people.pl

Mikroformaty i Rich Snippety