La prima vedere, Schema.org poate fi foarte complicata dar odata ce se inteleg tipurile, la ce ajuta, cum poate fi folosita si implementata va fi destul de simplu de inteles.

Schema.org este un limbaj prin care motoarele de cautare inteleg mult mai bine continutul unei pagini web si servesc cele mai bune rezultate posibile. Aceasta a fost creata pentru utilizatori ai Google, Yahoo si Bing, iar de-a lungul timpului au fost mai multi colaboratori care au ajutat la imbunatatirea sa. Cea mai importanta modificare in Schema a fost aditia Good Relations, dezvoltata de catre Martin Hepp. Schema.org este cod si reprezinta date structurate sau un vocabular ce poate fi folosit cu:

  • RDFa

RDFa is an extension to HTML5 that helps you markup things like People, Places, Events, Recipes and Reviews. Search Engines and Web Services use this markup to generate better search listings and give you better visibility on the Web, so that people can find your website more easily.

  • Microdata

Microdata is a WHATWG HTML specification used to nest metadata within existing content on web pages. Search engines, web crawlers, and browsers can extract and process Microdata from a web page and use it to provide a richer browsing experience for users.

  • JSON-LD

JSONLD, or JavaScript Object Notation for Linked Data, is a method of transporting Linked Data using JSON. It was a goal to require as little effort as possible from developers to transform their existing JSON to JSONLD.

Desi Schema poate fi folosita cu cele 3 tipuri de date, motoarele de cautare recomanda folosirea Microdata.

Este folosita pentru a spune motoarelor ce inseamna informatiile dintr-o pagina si nu doar ce spun acele informatii. Pentru a intelege mai bine ce este Schema.org vom lua un exemplu pentru un e-commerce din fashion. Pe e-commerce exista produse. Orice utilizator care va intra pe site si va vedea produsul Camasa Smart Casual Navy, Marime L, Culoare Alb, Zara va sti ca este un produs, pentru ca este pe un magazin, se afla in categoria camasi si este afisat intr-o pagina de produs, listata cu un pret si cu adaugare in cos.

Ce „vede” un motor de cautare cand ajunge in acea pagina? El „poate citi” doar text si va „vedea” niste cuvinte puse unul langa altul, si anume: Camasa, Smart, Casual, Navy, Marime L, Culoare Alb, Zara. Motorul nu stie ca numele produsului este „Camasa Smart Casual Navy”, nu stie ca are, „marimea L”, „culoarea alb” si „brandul Zara”.

In schimb, daca in pagina de produs se adauga niste tag-uri (este cod pentru Schema.org) atunci se vor putea declara in HTML (acele tag-uri nu sunt vazute de catre utilizatori ci doar de catre motoarele de cautare): tipul paginii de pe e-commerce, Produs, Nume Produs, Marime, Culoare si atunci motorul va „intelege” exact despre ce este vorba in acea pagina.

Vom vorbi putin mai jos despre tipurile de Schema care pot fi folosite, cum se implementeaza si la ce ajuta fiecare. Vom da exemple cu astfel de tipuri.

ItemScope, ItemType, ItemProp

ItemScope declara tipul de Schema folosit. De exemplu, daca avem o pagina a unei carti vom declara in HTML, intr-un <div>, ca pagina este a unei carti. ItemScope si ItemType merg impreuna. Nu este util doar sa stim ca avem un „lucru” de declarat ci trebuie sa stim si tipul pe care il declaram. ItemType apare imediat dupa ItemScope.

Ex: <div itemscope itemtype=”http://schema.org/Book”>

Acum, la itemtype Book se vor adauga ItemProp’s care sunt de fapt proprietatile pentru tipul Book. Si putem avea: Titlu, Autor, ISBN, numberOfPages, Genre, Price.

De ce sa folosesti Schema.org?

Your web pages have an underlying meaning that people understand when they read the web pages. But search engines have a limited understanding of what is being discussed on those pages. By adding additional tags to the HTML of your web pages—tags that say, „Hey search engine, this information describes this specific movie, or place, or person, or video”—you can help search engines and other applications better understand your content and display it in a useful, relevant way. Microdata is a set of tags, introduced with HTML5, that allows you to do this.

Un prim raspuns a fost dat mai sus. Este in interesul tau ca Google sau alt motor sa „inteleaga” continutul site-ului. Un alt factor foarte important il reprezinta „Rich Snippets” care in traducere sunt „descrieri imbogatite”. Stim si noi ca nu suna bine in Romana :).

La ce ajuta aceste Rich Snippets? Atunci cand ai review-uri la un produs si sunt marcate prin Schema, Google va afisa in SERPs (Search Engine Result Pages) meta descrierile tale alaturi de alte informatii utile pentru useri. Vedeti mai jos:

[responsive]

schema.org recipe google.ro

[/responsive]

Aceste site-uri au folosit Schema.org/Recipe si au afisate in Rich Snippets urmatoarele: poza, rating, numar de reviews/votes si timp de gatire. Acele rezultate sunt de la pozitia 7 pana la 10 pe prima pagina in Google si cu siguranta atrag click-uri. Acestea imbunatatesc CTR-ul (Click Through Rate sau Rata de Click), care este un factor de Ranking in Google. Acest lucru este foarte important, pentru ca daca ai implementata Schema poti creste traficul cu pozitii joase in search.

Knowledge Graph

Google foloseste informatii despre companii pentru a le afisa in Knowledge Graph. Cele mai importante sunt: Logo, Contacte si Profile de Social Media, pe langa Name, Logo si Website URL. Este important ca acele informatii sa fie prezente in HTML prin microdate.

[responsive]

ing knowledge graph schema

[/responsive]

[responsive]

dacia knowledge graph schema

[/responsive]

Dupa cum se vede in imagini, Knowledge Graph a preluat informatiile de contact: logo, customer service, credit card support si profile de social. Din pacate, sunt putine companii care au aceste tipuri de schema implementate. Am luat random din top 100 companii romanesti si am mai gasit informatii in Knowledge Graph doar pentru Banca Transilvania. Ajuta foarte mult si o pagina de Wikipedia.

Recomandari Schema.org

Odata implementate pe site, ele sunt afisate automat de Google in functie de markup (asa se numeste procesul de adaugare Schema pe elementele din HTML). Daca acest markup este implementat corect si ofera descrieri foarte bune ale continutului in pagina, atunci ele vor fi afisate in search.

Daca ele sunt spammy, nu reflecta contintul din pagina, se abuzeaza cu ele (de exemplu se pune schema.org pe un text generat automat pentru a pune niste review-uri care nu exista), atunci Google poate lua decizia sa nu le afiseze. Se pot lua chiar actiuni manuale prin care site-ul sa fie penalizat pentru Schema si ele sa nu mai fie afisate deloc.

Pentru a fi siguri ca se vor afisa, urmati pasii de mai jos:

  • implementati toate tipurile de schema potrivite pentru tipul de site, sunt sute 🙂
  • asigurati-va ca toate elementele din Schema sunt vizibile pentru utilizatori (nu puneti Schema pe elemente ascunse)
  • daca aveti review-uri pe un e-commerce in pagina de produs, aveti grija ca acele review-uri sa fie strict pentru produse si nu pentru site
  • testati cu Structured Data Testing Tool pentru a fi siguri ca nu exista erori la implementare
  • Verificati Structured Data Policies

Dupa implementare, Google spune ca va dura o perioada pana cand se vor afisa in SERPs. Pentru a accelera procesul se pot face cateva lucruri:

  • mergeti in Search Console si dati un fetch as Google bot pe site pentru a forta botul sa crawleze site-ul
  • faceti resubmit la sitemap
  • ajuta si cateva linkuri spre site

IMPORTANT!

Nu toate datele structurate vor genera rich snippets. Asta nu inseamna ca ele nu trebuie implementate.

Vocabularul Schema.org: tipuri si proprietati (Type / Property)

Cele mai comune:

  • Creative works:
    • CreativeWork
    • Book
    • Movie
    • MusicRecording
    • Recipe
    • TVSeries
  • Event
  • Organization
  • Person
  • Place, LocalBusiness, Restaurant, etc
  • Product, Offer, AggregateRating

Exista de asemenea si tipuri mult mai specifice. Pentru product exista: IndividualProduct, ProductModel, SomeProducts, Vehicle. Fiecare tip are mai multe proprietati care pot fi folosite pentru a descrie „lucrul” mult mai bine. Exemplu:

  • Type: Product
  • Properties:
    • Brand
    • Category
    • Color
    • Height
    • Weight
    • Width
    • itemCondition
    • logo
    • model
    • sku
    • releaseDate
    • aggregateRating

Ce inseamna acest lucru? Prima data se defineste tipul elementului care va fi pus in datele structurate apoi, pentru el, se vor defini caracteristicile. De cand au fost introduse si GoodRelations in Schema.org, au fost predefinite mult mai multe caracteristici. Vedeti mai jos pentru Product si Offer:

[responsive]

schema.org good relations

[/responsive]

Schema.org si pozitiile in Google

Aceste discutii exista de foarte multa vreme in lumea SEO. Nu exista o corelatie directa intre folosirea microdatelor si rankingul in Google dar exista teste care arata ca afisarea Rich Snippets in search imbunatateste CTR-ul, deci traficul. In studiul SearchMetrics, CTR-ul este un factor de ranking.

Tipuri de Schema.org care pot fi folosite pentru orice site:

Intr-un articol viitor ne vom axa doar pe e-commerce si va vom arata ce tipuri de schema.org pot fi folosite in e-commerce, exemple din search si modalitati de implementare.

1. WebSite: Schema.org/WebSite

Acest tip de schema este destul de vechi, dar, de curand, Google a introdus o noua optiune pentru afisarea URL-urilor in Google Search. Acest tip de schema functioneaza foarte bine alaturi de Schema.org/Breadcrumbs. Aceasta este utila pentru a afisa in Search numele real al site-ului si nu numele domeniului. Momentan este doar pentru US si Mobile, dar cu siguranta va fi introdusa si in alte limbi.

  • Numele site-ului trebuie sa fie similar cu numele domeniului
  • Folositi nume simple: Agile Media si nu Agile Media Romania
  • Numele trebuie sa fie unic

Implementare:

<head itemscope itemtype=”http://schema.org/WebSite”>
<title itemprop=’name’>Your WebSite Name</title>
<link rel=”canonical” href=”https://example.com/” itemprop=”url”>

[responsive]

domain_replacement_before

[/responsive]

[responsive]

domain_replacement_after

[/responsive]

2. Sitelinks Search Box: Schema.org/SearchAction

Google afiseaza in search SiteLinks, care sunt afisate in functie de anumiti factori ca relevanta si autoritate. Daca un utilizator cauta un brand atunci cu siguranta vrea sa gaseasca un continut pe acel site. Acest Search Box foloseste functia site:domeniu.ro pentru a face cautari in paginile indexate ale acelui domeniu. De asemenea,va functiona si Google autocomplete.

  • implementati codul pe prima pagina

<div itemscope itemtype=”http://schema.org/WebSite”>
<meta itemprop=”url” content=”https://www.example.com/”/>
<form itemprop=”potentialAction” itemscope itemtype=”http://schema.org/SearchAction”>
<meta itemprop=”target” content=”https://query.example.com/search?q={search_term_string}”/>
<input itemprop=”query-input” type=”text” name=”search_term_string” required/>
<input type=”submit”/>
</form>
</div>

[responsive]

schema.org search action emag

[/responsive]

3. Breadcrumbs: Schema.org/BreadcrumbList

[responsive]

schema breadcrumbs

[/responsive]

Acest tip de breadcrumbs merge foarte bine cu Schema SiteName.

Home > SEO > Link Building > Audit Link Building

  • Proprietati Breadcrumbs
    • Item: URL individual din lista, contine URL si Title (in exemplul de mai sus putem avea SEO)
    • Name: Numele breadcrumbului
    • Position: in cazul SEO avem 1.

Implementare:

<ol itemscope itemtype=”http://schema.org/BreadcrumbList”>
<li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”https://example.com/arts”>
<span itemprop=”name”>Arts</span></a>
<meta itemprop=”position” content=”1″ />
</li>

<li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”https://example.com/arts/books”>
<span itemprop=”name”>Books</span></a>
<meta itemprop=”position” content=”2″ />
</li>

<li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”https://example.com/arts/books/poetry”>
<span itemprop=”name”>Poetry</span></a>
<meta itemprop=”position” content=”3″ />
</li>
</ol>

Daca acest tip de schema nu se afiseaza in search atunci se poate folosi data-vocabulary/Breadcrumb. Noi am testat prima varianta si Google nu o afisa.

<div>
<span itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
<a href=”http://www.domeniu.ro/” itemprop=”url”>
<span itemprop=”title”>Nume Domeniu</span>
</a> »
</span>

<span itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
<a href=”http://www.domeniu.ro/categorie/” itemprop=”url”>
<span itemprop=”title”>Fashion</span>
</a> »
</span>

<span itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
<a href=”http://www.domeniu.ro/categorie/subcategorie/” itemprop=”url”>
<span itemprop=”title”>Subcategorie</span>
</a> »
</span>
<span itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
<a href=”http://www.domeniu.ro/categorie/subcategorie/subcategorie/” itemprop=”url”>
<span itemprop=”title”>Sub Subcategorie</span>
</a>
</span>
</div>

4. Schema.org/Organization.

La organization intra urmatoarele tipuri de organizatii: Airline, Corporation, EducationalOrganization, GovernmentOrganization, LocalBusiness (cu tipuri mai specifice) si altele. Mergeti in lista de LocalBusiness si vedeti ce tip de business vi se potriveste. De exemplu, pentru o agentie de turism exista tipul TravelAgency. Alte tipuri: Bakery, Winery, Restaurant, InsuranceAgency, BeautySalon, Dentist, RealEstateAgent etc.

  • Cele mai importante proprietati ale Organization:
    • Name
    • URL
    • Logo
    • Company Contact Numbers
    • Social Profile Links
    • email
    • telephone
    • addressLocality
    • addressRegion
    • si proprietatile de la PostalAddress
  • Alte proprietati utile:
    • openingHours
    • paymentAccepted
    • postalCode
    • aggregateRating
    • faxNumber
    • founder
    • foundingDate
    • geo
    • photo
    • description
    • sameAs

Exemplu de implementare cu mai multe tipuri de proprietati/caracteristici:

<div itemscope itemtype=”http://schema.org/Bakery”>
<h1><span itemprop=”name”>French Bakery</span></h1>
<span itemprop=”description”> Produse de panificatie si patiserie frantuzesti.</span>
<a itemprop=”url” href=”https://frenchbakery.ro/”>
<a itemprop=”sameAs” href=”http://www.facebook.com/FrenckBakery”>FB</a>
<a itemprop=”sameAs” href=”http://www.twitter.com/FrenchBakery”>Twitter</a>
<a itemprop=”sameAs” href=”http://www.pinterest.com/FrenchBakery”>Pinterest</a>
<img itemprop=”logo” src=”https://frenchbakery.ro/logo.png” />

<div itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>
<span itemprop=”ratingValue”>5</span> stele din <span itemprop=”reviewCount”>150</span> review-uri
</div>

<div itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>
<span itemprop=”streetAddress”>Bd Magheru, 159</span>
<span itemprop=”addressLocality”>Bucuresti</span>
<span itemprop=”addressRegion”>RO</span>
<span itemprop=”postalCode”>010123</span>
<span itemprop=”contactType”>Comenzi</span>
<span itemprop=”telephone”>021 1234 1234</span>
</div>

Telefon <span itemprop=”telephone”>021-123-123</span>
Fax:<span itemprop=”faxNumber”>021-123-123</span>
E-mail: <span itemprop=”email”>[email protected]</span>

Program:
<meta itemprop=”openingHours” content=”Mo-Sa 11:00-14:30″>Luni-Dum 9am – 22:30pm

Bucatarie:
<span itemprop=”servesCuisine”>European</span>
Preturi: <span itemprop=”priceRange”>RON</span>
</div>

Aproape toate tipurile de schema.org pot fi combinate. Exista insa niste reguli: tipurile trebuie sa fie nested, afisate in pagina intr-o ordine in care pot fi recunoscute.

De exemplu, ca sa pot folosi AggregateRating pentru un produs va trebuie sa am implementat:

  • WebPage
    • Product
      • AggregateRating

Ordinea lor este foarte importanta. Nu putem afisa de exemplu:

  • Schema.org/Offer
    • Schema.org/AggregateRating
      • Schema.org/Product
        • Schema.org/BreadcrumbList
          • Schema.org/Webpage

Schema.org/Product trebuie sa aiba Offer sau AggregateOffer

  • Product
    • Offer/AggregateOffer
      • ItemAvailability
        • AggregateOffer
          • alte proprietati

Resurse Schema / Date Structurate

featured image