Email: info@firemniweb.comTel.: +420 737 111 709 Facebook Twitter RSS firemniweb.com - blog

Píšeme vám o novinkách a věcech, které vás zajímají...

Muž

Microdata aneb buďte ještě více vidět ve vyhledávači

Co jsou to vlastně microdata?

Jedná se o atributy (Itemscope, Itemtype, Itemprop) u jednotlivých HTML elementů, které specifikují obsah elementu. Tímto způsobem se robotům předávájí přesnější informace o obsahu stránky a oni poté může lépe zobrazit podrobnosti ve výsledcích vyhledávání. Zvyšuje se tak sémantika webu.

K čemu nám pomůžou?

Microdata nemají prozatím žádný nebo minimální vliv na pozici stránky ve vyhledávání. Když se již ale stránka zobrazí, ve výsledcích může připojit k výsledku detailnější informace a zvýšit tak důvěryhodnost a možnost prokliku na stránky.

Jak může vypadat výsledek ve vyhledávání?

Jak vypadá výsledek ve vyhledávání

Výsledek vyhledávání na googlu, rozdíl mezi výsledky je jasné patrný...

Kde se zobrazí?

Pokud čekáte zobrazení microdat ve výsledcích na Seznam.cz, čekáte marně. Alespoň prozatím. Microdata podporují Google, Bing, Yahoo aj.. Ty také stály za vznikem webu Schema.org kde můžeme najít specifikaci a dokumentaci k microdatům.

Jak se microdata používají?

Microdata zapisujeme pomocí atributů Itemscope, Itemtype, Itemprop.

  • Itemscope – deklaruje objekt
  • Itemtype – deklaruje co je to za objekt, jaké schéma využívá a odkazuje na dané schéma (např. produkt v našem případě)
  • Itemprop – popisuje již vlastnosti daného objektu (jméno, obrázek…..)

V příkladu níže využíváme schéma Product, který lze aplikovat např. do eshopu k detailu produktu.

<!--HTML zápis bez microdat-->
      Mutsy 4-rider Single Spoke NEXT
      <img src="obrazek_produktu.jpg" alt='Mutsy 4-rider Single Spoke NEXT' />
      Hodnocení 8/10 od 25 zákazníků
      7 884 Kč
      Skladem
      Popis produktu:
      Podvozek ke kočárkům Mutsy. Díky dvěma předním otočným kolům o 360° nabízí lehkou ovladatelnost....

<!--HTML zápis s microdaty-->
<div itemscope itemtype="http://schema.org/Product"> <!-- Zde je objekt typu Product -->
  <span itemprop="name">Mutsy 4-rider Single Spoke NEXT</span><!-- Vlastnost name objektu Product -->
  <img src="obrazek_produktu.jpg" alt='Mutsy 4-rider Single Spoke NEXT' itemprop="image"/><!-- Vlastnost image objektu Product -->
  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"><!-- Vlastnost aggregateRating objektu Product a zároveň objekt AggregateRating (souhrné hodnoscení) -->
    Hodnocení <span itemprop="ratingValue">8</span><!-- Vlastnost ratingValue objektu AggregateRating -->
    /10 od
    <span itemprop="reviewCount">11</span> zákazníků <!-- Vlastnost reviewCount objektu AggregateRating -->
  </div>
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"><!-- Vlastnost offers objektu product a zároveň objekt Offer (nabídka) -->
   <span itemprop="price">7 884 Kč</span><!-- Vlastnost price objektu Offer -->
   <link itemprop="availability" href="http://schema.org/InStock" />Skladem<!-- Vlastnost availability objektu Offer -->
  </div>
  Popis produktu:
  <span itemprop="description">Podvozek ke kočárkům Mutsy. Díky dvěma předním otočným kolům o 360° nabízí lehkou ovladatelnost....</span><!-- Vlastnost description objektu Product -->
</div>

A takto vypadá schéma Person na Schema.org.

Person Schema.org

Person Schema.org

Další schémata můžete najít již na zmiňovaném webu Schema.org nebo si i vytvořit své vlastní.

Zdroje a další informace :

Autor:

Lukáš Pavel

Věnuje se především kódování HTML, CSS, JS, SEO optimalizaci a grafické tvorbě v programu Adobe Photoshop. Pracuje jako externí kódér pro firmy a studuje Design webových aplikací na JČU.

Další články - Web - Sledujte mě na:TwitterFacebookDelicious

2 reakce na “Microdata aneb buďte ještě více vidět ve vyhledávači”

  1. Jopie napsal:

    Hi, I am implementing the buottn, with snippets and I would like some support :) it would be awesome if there are some more example on how to optimise the +snippets for realworld situations. My example is I want to implement this to a webshop (sumobrickshop.com) I have product pages, that is pretty straight forward. Set it as ‘product’ But what about the index page? what about category pages? I see there is a choice to set is as ‘toystore’ But that sounds like what I would use for the ‘about’ pages and ‘contact’ pages.So my question, can you help me setting the different pages on a complete website, either webshop, or just commercial website. To an optimum solution?I think having an example would be very helpfull for all us webmasters out there :) Cheers,Vincent

    • Lukáš Pavel napsal:

      Hi, your website „sumobrickshop.com“ is not available. But you can use a diferent schema from schema.org for other pages. For example schema oraginazation for contact page…

Napsat komentář

*

Nejvíce Vás zajímá

Poslední komentáře

Facebook

RSS feed

RSS firemniweb.com - blog  - odebírat novinky