schema.org

Va spuneam in articolul trecut ca vom scrie despre Schema.org in Ecommerce. De ce Ecommerce? Pentru ca din informatiile noastre sunt peste 17 000 de magazine online. La GPEC, unul din criteriile de punctare al magazinelor este Schema.org. In ultimii ani de cand suntem in jurizarea GPEC, tot mai multe magazine au inceput sa o foloseasca dar numarul lor este inca destul de mic.

In Ecommerce intra si nisele de Turism, Bilete, Anunturi, Agregatoare, Servicii, etc. Pentru fiecare se pot adauga tipuri multiple de mark-up. Avand in vedere ca sunt foarte multe, nu le vom introduce pe toate in acest articol.

Pe langa faptul ca majoritatea magazinelor nu o folosesc, cele care au Schema deja implementata au erori, nu apare in Google search sau nu se foloseste la potentialul sau maxim. Majoritatea magazinelor au doar un tip de schema implementat in cele mai multe cazuri si anume Schema.org/Product. Din pacate nu se fructifica AggregateRating (care poate afisa in Google Search acele stelute de rating). Tot din informatiile de la magazinele analizate in cadrul GPEC am observat ca sunt magazine care fac Spam cu Schema, unele fiind chiar nume mari din nisele lor. Noi le-am depunctat pentru asta.

Sunt doua motive pentru care se face Spam cu Schema.

  1. Este foarte usor de implementat un rating pe categorii, care sa fie afisat in search (de ex: la o cautare Laptopuri, in search vor aparea categorii din magazinele online cu rating). In mod normal nici un client nu ofera rating unei categorii dintr-un site. Va oferi rating si un review la un produs.
  2. Nu trebuie sa astepti sa primesti ratinguri de la clienti. Poti sa le pui tu cum vrei. Ex: (Nu dam exemplul pentru a fi folosit, ci pentru a arata cum se foloseste): „Categoria Laptopuri a primit nota 5 din 156 de voturi„. In Google Search va aparea categoria: magazinulmeu.ro/laptopuri cu 5 stelute din 156 de voturi.

Cum se combate acest lucru? Foarte simplu, orice tip de spam se poate raporta la Google. URL-ul de raport Spam pentru Rich Snippets il gasiti aici. De ce sa raportezi spamul? Pentru ca stelutele de rating pot atrage mai multe click-uri din search. De ex: daca tu esti pe locul 2 pe cautarea laptouri, iar cel de pe locul 3 face Spam cu schema, tu poti pierde trafic, implicit vanzari. Daca nu stiai ca poti sa ii rapotezi, acum stii :). Spamul poate genera penalizari manuale sau algoritmice, adica, odata ce se gaseste problema, Schema nu va mai fi afisata in Search, iar site-ul va avea de suferit.

[responsive]

google-structured-data-penalty-800x210

[/responsive]

Spammy structured markup

Markup on some pages on this site appears to use techniques such as marketing up content that is invisible to users, marking up irrelevant or misleading content, and/or other manipulative behavior that violates Google’s Rich Snippet Quality guidelines. Link imagine.

Un client de-al nostru a avut o astfel de penalizare din cauza implementarii gresite. Nu a fost intentionatata, dar Google a actionat.

Inainte de a implementa Schema.org cititi Politicile pentru Date Structurate.

Tipuri de date / informatii declarate in Schema.org

Data, timp si durata se declara cu time. Pentru data, formatul este YYYY-MM-DD. Mai jos avem Nov 2, 2015. Se poate declara si ora in formatul hh:mm sau hh:mm:ss cu prefxiul T de la time.

<time datetime=”2015-11-02″>11/02/15</time>

<time datetime=”2015-11-02T19:30″>Nov 02, 7:30pm</time>

Acest tip de Schema se poate folosi pentru Events, Bilete la concerte, sau limited time offers (cum ar fi pentru Black Friday).

Enumerari: link cu href

Exista anumite proprietati care au un numar limitat de valori. De exemplu, pentru un produs care este pus la vanzare vom folosi /Offer care are valorile: In Stock, Out of Stock, Pre-order.

Se poate delara in doua moduri: unul nu foarte specific si unul foarte specific si mult mai usor de inteles de motoare. A doua varianta este mult mai relevanta si se declara cu link href si se indica tipul proprietatii pentru Offer, care este schema.org/InStock.

Exemple:

  • <span itemprop=”availability”>Oferta valabila azi!</span>
  • <link itemprop=”availability” href=”http://schema.org/InStock”/>Oferta valabila azi!

URL-uri:

Pentru URL-ul produsului, in cazul in care acest URL nu este afisat in pagina ca link.

  • <link itemprop=”url” href=”http://domeniulmeu.ro/url-produs” />

Pentru a declara un link:

  • <a itemprop=”url” href=”http://domeniulmeu.ro”>Domeniul Meu</a>

Alte informatii care pot fi puse in Schema

Exista situatii cand anumite informatii merita sa fie puse in schema.org dar modul in care apar in pagina nu permite acest lucru. De exemplu, o imagine care reprezinta stelutele de rating 5 din 5. Tagul meta se foloseste alaturi de content.

Ex:

  • <meta itemprop=”ratingValue” content=”4″ />
  • <meta itemprop=”bestRating” content=”5″ />

Atentie!!! Folositi tagul meta doar cand informatiile nu pot fi altfel adaugate in schema.

Ce tipuri de Schema folosim in Ecommerce?

Am scris in articolul trecut tipurile de Schema care pot fi folosite pe toate site-urile. Nu le vom detalia din nou aici. Pentru Ecommerce, din punctul nostru de vedere, sunt obligatorii:

  • Schema.org/WebSite
  • Schema.org/SearchAction
  • Schema.org/BreadcrumbList
  • Schema.org/Product
  • Schema.org/AggregateRating
  • Schema.org/Offer sau AggregateOffer
  • Schema.org/Organization
    • Pentru organization folositi https://schema.org/Store si selectati tipul de magazin pe care il aveti. Pentru o florarie veti declara In HTML Schema.org/Florist. Daca nu veti gasi tipul de magazin pe care il aveti puteti folosi LocalBusiness sau Store, care sunt generale. Vedeti tipurile in imaginea de mai jos:

[responsive]

tipuri de schema.org Store

[/responsive]

Cel mai important tip de Schema pentru Ecommerce este https://schema.org/Product, care se poate folosi si pentru servicii.

Any offered product or service. For example: a pair of shoes; a concert ticket; the rental of a car; a haircut; or an episode of a TV show streamed online.
Usage: Over 1,000,000 domains
 

Cum se foloseste Schema.org/Product?

Cum spuneam in articolul trecut, fiecare tip de Schema (itemscope, itemtype) are mai multe proprietati (itemprop). Pentru Product exista o lista foarte mare de proprietati, odata cu introducerea GoodRelations. Din toate acele proprietati doar cateva sunt obligatorii.

Pentru a folosi la maxim schema.org/Product, trebuie sa adaugam Schema.org/Offer, Shema.org/AggregateRating si Schema.org/Review. Ordinea lor de implementare este urmatoarea:

  • Schema.org/Webpage (daca se foloseste)
  • Schema.org/Product
  • Schema.org/Offer sau Schema.org/AggregateOffer
  • Shema.org/AggregateRating
  • Schema.org/Review
Pentru a beneficia de toate proprietatile din Schema, sfatul nostru este sa adaugati cat mai multe informatii si caracteristici ale produsului. Aveti in vedere ca tot ce adaugati in Schema trebuie sa fie vizibil pe site sub forma text. Puteti adauga:
  • name: numele produsului
  • URL: URL-ul produsului
  • image: imaginea / imaginile produsului
  • AggregateRating: ratingul total bazat pe media ratingurilor ale unui produs.
  • audience: exemplu: daca exista produse pentru 18+
  • award: daca produsul respectiv a primit un premiu din industrie
  • brand: brandul produsului, ex: Adidas, Nike, etc
  • category: categoria din care face parte produsul: Incaltaminte
  • color: alb
  • gtin12, gtin13, gtin14, gtin8 (Global Trade Item Number)
  • height: inaltime
  • itemCondition: nou sau second hand
  • logo: un logo asociat brandului
  • manufacturer: producatorul produsului
  • model: merge foarte bine pentru electronice si electrocasnice
  • productionDate: data de fabricatie a produsului (pentru alimente de exemplu)
  • releaseDate: data lansarii pe piata a produsului
  • sku: codul produsului
  • weight: greutate
  • width: latime

Cele mai cool proprietati pentru Product, care au fost introduse de curand, sunt:

  • isAccessoryorSparePartFor: se foloseste pentru alt produs (de ex: un RAM care este compatibil cu toata gama de MAC)
  • isConsumableFor: exemplu: un cartus compatibil cu un anume model de imprimanta
  • isRelatedTo: pentru produse similare
  • isSimilarTo: un alt produs similar care are aproximativ aceleasi functionalitati. Se poate folosi pentru doua modele de produs: Mouse A1 si Mouse A2 (a doua generatie de Mouse A).
  • owns: de cine este detinut produsul (persoana sau organizatie/brand)
  • productSupported: exemplu: baterii pentru telefoane mobile care pot intra in categoria Samsung sau Smartphones.

Inainte de a va arata un exemplu trebuie sa trecem in revista:

  • Schema.org/Offer sau Schema.org/AggregateOffer
  • Shema.org/AggregateRating
  • Schema.org/Review

Cum se folosesc:

  • Schema.org/Offer se foloseste doar atunci cand exista un produs si un pret.
    • Proprietati foarte utile ale Offer:
    • Availability: Daca un produs este in stoc sau nu
    • availabilityEnds: oferta valabila pe termen scurt, ca ofertele din turism. Merge foarte bine pentru BlackFriday.limited-time-offer
    • availabilityStarts: cand incepe oferta. Merge foarte bine pentru BlackFriday.
    • AvailableAtOrFrom: exemplu – daca este o oferta valabila doar intr-un magazin fizic. Se foloseste schema.org/Place. Merge foarte bine pentru magazinele mari care au mai multe puncte de desfacere: Altex, Flanco, Dedeman, Metro, Decathlon etc.
    • avalibleDeliveryMethod: metoda de livrare, curier, posta, ridicare personala
  • Schema.org/AggregateOffer se foloseste atunci cand avem un produs cu mai multe preturi. De ex: avem acelasi produs de la 2 vanzatori si fiecare are cate un pret diferit. Sau avem un produs care este customizabil in functie de marime/dimensiuni/materiale/culoare si fiecare model are un pret diferit.
      • pentru aggregate offer avem LowPrice si HighPrice, offerCount (numarul de oferte), priceCurrency, availability
    • [responsive]

    rich snippets aggregateoffer

  • [responsive]
  • Shema.org/AggregateRating: agrega notele date de clienti unui produs, face o medie intre ele si o afiseaza in search. Fiecare nota va fi data de un client printr-un Review.
  • AggregateRating nu se foloseste pentru categoriile magazinului. Am vazut asta implementata dar nu exista un tip de Ratings pentru categoriile unui shop. Poate fi implementata doar ca Spam. In schimb, se poate implementa pentru magazin. Ele vor fi tratate ca testimoniale pentru intreaga experienta de cumparare pe magazin. Dupa ce un client cumpara un produs de la tine, ii poti cere un testimonial, in care sa iti ofere o nota.
  • Exista cateva probleme cu AggregateRating. Prima problema: cum obtin review-uri de la clienti? Este simplu: le ceri :). Am vazut foarte multe magazine online care nu cer feedback, testimoniale sau review-uri pentru produsele cumparate. De ce nu fac asta? Poate ca nu stiu ca le pot cere pareri clientilor lor. La 1 zi dupa ce clientul a primit comanda ii poti trimite un mail prin care sa ii ceri un review. Emag, PCGarage cer feedback, iar de la Emag am primit si o cerere pentru un review, la un produs recent cumparat.

[responsive]

formular feedback emag

[/responsive]

[responsive]

emag cerere review

[/responsive]

[responsive]

formular feedback pcgarage

[/responsive]

  • Pe langa asta de ce sa nu ceri direct un review pentru produs/produsele cumparate. Nu toti vor fi deschisi sa lase o parere dar pentru un produs este de ajuns un singur review cu nota pentru ca Google sa afiseze stelutele de rating in Search.
  • A doua problema este la Google. Ei nu garanteaza ca rich snippets vor fi afisate in Search. Pentru asta sunt cateva lucruri care se pot face:
    • Asigurati-va ca site-ul este crawlat si indexat bine: Robots, Sitemap, Etc.
    • Aduceti linkuri spre produse (merg si cele de afiliere)
    • Aduceti social signals spre produse (la fel ca la reviews: cere-ti :))
  • Aceste reviews ajuta foarte mult la SEO pentru ca:
    • adaugati continut nou si relevant in paginile de produse
    • cresteti CTR-ul in search
    • freshness: continut fresh in pagini
    • va diferentiati de competitia care vinde aceleasi produse. Acesta este unul din motivele pentru care emag.ro rankeaza foarte bine pe produse.

Reviews vs Ratings:

Sunt doua lucruri separate dar complementare. Ele sunt folosite pentru evaluarea unui produs in Ecommerce. Un review reprezinta evaluarea scrisa (Acest telefon este foate bun pentru mine, bateria este ok, are 4G si ma ajuta sa vorbesc cu prietenii), iar un rating este evaluarea pe o scara numerica (de obicei de la 1 la 5). Un rating poate fi folosit cu un review. Google accepta reviews si ratings pentru o paleta mare de tipuri de schema (business, produse, carti, filme, etc). Cand Google le „vede” pe site si considera ca sunt valide atunci le va afisa in Search ca Rich Snippets. Vedeti Emag: are aggregateRating, Offer cu Price si Availability. Toate apar in Rich Snippets.

Pentru ca ratingurile sa fie afisate in search trebuie facute cateva lucruri:

Se pot adauga: cuvinte, numere sau imagini (stelute) atata timp cat in rating sunt specificate:

  • best possible rating (5, 10, 100)
  • actual rating (4, 9, 80%)
  • number of ratings (132), care sunt Votes (cate voturi are un produs, sau cate pareri a generat acel produs).

Best possible rating: puteti pune pe o scara de la 1 – 5, 1 – 10 sau 1 – 100. Ele vor fi afisate diferit in search. Exemple:

  • 90% – best possible rating este 100, actual rating este 90
  • rating stars – best possible rating este 5, ratingul actual este 4
  • 7 out of 10 sau 7/10 – best possible rating este 10, ratingul actual este 7.

[responsive]

emag rich snippets aggregate rating/[responsive]

Reviews:

Un review apare atunci cand cineva evalueaza ceva. De ex: Pe magazinulmeu.ro exista 2 experti in IT care fac review-uri la produsele listate pe site. Din pacate pe .ro nu am gasit astfel de review-uri.

[responsive]

rich snippets review by/[responsive]

Imagini si Video

Se implementeaza cu Schema.org/ImageObject si Schema.org/VideoObject. Din pacate nu prea sunt afisate de Google. Am observat doar la Youtube. La cautari pentru termeni comerciali nu am vazut. Imaginile sunt afisate, de obicei, in rezultate de tip imagini.

Exemplu de implementare Schema.org/Product in HTML:

Vom folosi un exemplu complex pentru a integra mai multe elemente. Tot ce este cu bold este vizibil pe site. Sunt mai multe tipuri si proprietati pe care le puteti folosi. In exemplul de mai jos am incercat sa cuprind cat mai multe:

<div itemscope itemtype=”http://schema.org/Product”>
<span itemprop=”name”>Nume Produs</span>
<link itemprop=”url” href=”https://domeniulmeu.ro/url-produs”>
<img src=”imagine-produs.jpg” alt=’Nume Produs’ />
<span itemprop=”brand”>Brand Produs</span>
<span itemprop=”category”>Categorie Produs</span>
<span itemprop=”color”>Culoare Produs</span>
<span itemprop=”height”>Inaltime</span>
<span itemprop=”width”>Latime</span>
<span itemprop=”weight”>Greutate</span>
<span itemprop=”model”>Model Produs</span>
<span itemprop=”productID”>ID produs</span>
<time itemprop=”releaseDate” datetime=”2015-11-02″>11/02/15</time>
<span itemprop=”sku”>123456</span>

<div itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>
Rating <span itemprop=”ratingValue”>3</span>/5
bazat pe <span itemprop=”reviewCount”>100</span>Pareri ale clientilor
</div>

<div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”>
<span itemprop=”priceCurrency” content=”RON”>RON</span>
<span itemprop=”price” content=”1000.00″>1,000.00</span>
Pret valid pana la <time itemprop=”priceValidUntil” datetime=”2015-11-21″>21 Noiembrie</time>
<link itemprop=”ItemCondition” href=”http://schema.org/NewCondition”>Nou
<link itemprop=”availability” href=”http://schema.org/InStock” />In stoc
</div>

Descriere produs:
<span itemprop=”description”>Descriere Produs</span>

Pareri ale clientilor:
<div itemprop=”review” itemscope itemtype=”http://schema.org/Review”>
<span itemprop=”name”>Produs bun</span> –
by <span itemprop=”author”>Daniel</span>,
<meta itemprop=”datePublished” content=”2015-11-02″>Nov 2, 2015

<div itemprop=”reviewRating” itemscope itemtype=”http://schema.org/Rating”>
<meta itemprop=”worstRating” content = „1”>
<span itemprop=”ratingValue”>4</span>/
<span itemprop=”bestRating”>5</span>stars
</div>
<span itemprop=”description”>Produsul este bun si ma ajuta.</span>
</div>

<div itemprop=”review” itemscope itemtype=”http://schema.org/Review”>
<span itemprop=”name”>Scump</span> –
by <span itemprop=”author”>Dan</span>,
<meta itemprop=”datePublished” content=”2015-11-02″>Nov 2, 2015

<div itemprop=”reviewRating” itemscope itemtype=”http://schema.org/Rating”>
<meta itemprop=”worstRating” content = „1”/>
<span itemprop=”ratingValue”>2</span>/
<span itemprop=”bestRating”>5</span>stars
</div>
<span itemprop=”description”>Produsul nu isi merita banii.</span>
</div>

Produse similare:
<div itemprop=”isSimilarTo” itemscope itemtype=”http://schema.org/Product”>
<span itemprop=”name”>Produs 2</span>
</div>
<div itemprop=”isSimilarTo” itemscope itemtype=”http://schema.org/Product”>
<span itemprop=”name”>Product 3</span>
</div>

</div>

Cum verificam codul HTML?

Odata implementata pe site, schema trebuie verificata. Daca exista erori la implementare, mai mult ca sigur Google nu va afisa rich snippets-urile in Search. Intrati pe Structured Data Testing Tool si testati fie codul HTML, fie URL-ul produsului unde este implementata schema.org. Eu am verificat codul de mai sus si nu exista erori.

[responsive]

schema validator[/responsive]

Pentru blog puteti folosi Schema.org/Article.

<div itemscope itemtype=”http://schema.org/Article”>
<h1 itemprop=”name”>Titlu Articol</h1>
<span itemprop=”description”>Descrierea articolului</span>
<span itemprop=”author”>Daniel Ene</span>
<span itemprop=”articleBody”>Intregul continut al articolului.</span>
<img itemprop=”image” src=”/imagine1.jpg” alt=”Imagine 1″/>
<img itemprop=”image” src=”/imagine2.jpg” alt=”Imagine 2″/>
<meta itemprop=”datePublished” content=”2015-11-02T09:30″/>
</div>

Intr-un articol viitor vom vorbi despre Data Highlighter si de cum puteti sa implementati Schema.org fara a scrie o linie de cod. Tool-ul este foarte util in ce priveste persoanele non tehnice sau pentru cele care nu au un programator prin preajma. Se pot folosi si plugin-uri pentru platforme ca Magento, OpenCart, CSCart, PrestaShop, WordPress, care sunt mai usor de customizat si instalat.

Pentru a duce la maxim schema.org, apelati la un programator care va poate ajuta cu toate implementarile si customizarile.

featured image