Mikroformaty i Rich Snippety

Post on 26-Jun-2015

3.312 views 1 download

description

Prezentacja przygotowana na 8 spotkanie SilesiaSEM

Transcript of Mikroformaty i Rich Snippety

MIKROFORMATYI RICH SNIPPETS

Sławomir Borowy, Bartosz Sikorski

Teoriapodstawowe pojęcia

Praktykajak szybko wystartować?

Case Studyco to daje?

Hakowanierecepta na obrazki

ROZKŁAD JAZDY:

NIE TAKA TRUDNA... TEORIA

...ale trochę nudna.

Rich Snippets

RDF

Mikrodane

Mikroformaty

hCard / hReview

??

DEFINICJE

Sławomir Borowy
- najpierw rozrzucone pojęcia- potem wyjaśnienie każdego- potem poskładane w drzewko połączeń

● 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: MIKROFORMATY

● 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

<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>

Przykład:

Definicje: RDF

● 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: MIKRODANE

Definicje: RICH SNIPPETS

Rich Snippets = fragmenty rozszerzone w SERP

RICH SNIPPETS(fragmenty rozszerzone)

DEFINICJE

MIKRODANE MIKROFORMATYRDF

property content typeof

itemtype itemscope itemprop

rel rev 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

kk Star Ratings

http://wordpress.org/extend/plugins/kk-star-ratings/

lub: http://goo.gl/54WcI

Implementacja ocen: WORDPRESS

Rich Snippets Vote

http://www.deconf.com/en/projects/rich-snippets-vote-plugin-for-joomla

lub: http://goo.gl/p1eNv

Implementacja ocen: JOOMLA

Narzędzie do testowania danych strukturalnych Google:

http://www.google.com/webmasters/tools/richsnippets

lub: http://goo.gl/VBJZo

JAK TESTOWAĆ?

CASE STUDY

Gwiazdki w SERP:

Case study: SBART.PL

Case study: SBART.PL

CTR: 1,35%...

Case study: SBART.PL

Obrazki w SERP:

Case study: OKRAZYCSWIAT.PL

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

1. Niska pozycja strony w Google

2. Niewyświetlanie rozszerzeń dla wszystkich podstron

3. „Spowszednienie” gwiazdek

Czy Rich Snippets zawsze poprawiają CTR?

SnippetHACKING

„HAKOWANIE” wg POBIERACZKA :)

http://www.wykop.pl/ramka/1135797/niepokojace-wyniki-wyszukiwania/

lub: http://goo.gl/EvfGY

© SearchEngineLand & Piotr „Shpyo” Cichosz

HAKOWANIE ENCJAMI

Encja &#9733; w „breadcrumbs”:

http://blog.shpyo.net/324/nadaj-sobie-gwiazdki-w-serpach-sam-zamiast-snippetow.html

lub: http://goo.gl/4sr2N

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>

PRZEPIS NA OBRAZEK

Wtyczka dla WP: GRAFIKI W SERPach

WTYCZKA „GRAFIKI W SERPach” DO POBRANIA

http://marketingdlaludzi.pl/do-pobrania

lub

http://goo.gl/xFsPq

ZA DARMO! :)

http://marketingdlaludzi.pl

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

DOKĄD TERAZ?

ROZSZERZENIA ROZGRYZALI:

Sławomir Borowyborowy@4people.pl

Bartosz Sikorskisikorski@4people.pl&