SCHEMA.ORG – Структурирани данни и речници

Всички уебмастъри и разработчици са наясно с множеството HTML тагове използвани за означаването на отделните обекти в страниците, по които работят. С развитието на интернет и експоненциалното нарастване на броя на сайтовете, както и тяхното съдържание, търсещите машини започват да създават все по-сложни алгоритми, по които да определят дали един определен елемент трябва да бъде включен в определен списък или не, въпреки че името на елемента е също от съществена важност.

За пример един стандартен h2 таг:

<h2> Речник  </h2>

може да означава, че съдържанието под него е описание на това какво е речник или пък може да значи, че следва речник на определени елементи, но дори и тогава няма яснота точно на какви елементи.

Страниците имат съдържание, което един потребител може да разбере при прочитане и да реши дали е това, което той търси. Търсещите машини са по-ограничени в това отношение и често имат нужда от разяснения, за да решат дали определена страница е резултат, който отговаря на вашето търсене или не. Schema.org обединява множество записи в колекция от речници, предназначени да дадат конкретен отговор на това, какво точно представлява описания елемент и как съответно следва да бъде индексиран и съответно намерен.

Схемата се разработва и съответно се разпознава от основните търсещи машини Google, Microsoft, Yahoo и Yandex. Данните в съдържанието на страниците могат да бъдат маркирани с някой от форматите  Microdata, RDFa, и JSON-LD  и по този начин да се окаже вида им, връзките между тях и действията, които се извършват. Преди за започнем да маркираме отделните елементи в страниците си трябва да познаваме поне основно отделните речници, които ги описват, както и въпросните формати определящи как да бъдат описани.

Microdata

Микродата представлява колекция от тагове в HTML среда , предназначени да се вградят в съдържанието на страниците като се добавят към съответните елементи, които те описват. По този начин уебмастъра може да маркира съдържанието си директно в процеса на въвеждането му, а търсещите машини да могат да извлекат данните така, че да могат те да ги разберат и съответно да дадат по-точни резултати на потребителите си.

Пример:

<div itemscope itemtype=”http://schema.org/Person”>
<span itemprop=”name”>Никола Минков</span>
<span itemprop=”jobTitle”>СЕО  експерт</span>
<span itemprop=”email”>info@serpact.com</span>
<p itemprop=“address” itemscope itemtype=”http://schema.org/PostalAddress”>Адрес:
<span itemprop=”streetAddress”>Д. Благоев 7</span>
<span itemprop=”addressLocality”>Свиленград</span>
<span itemprop=”addressRegion”>България</span>
</p>
</div>

Въпросната маркировка описва един индивид и дава съответно някои данни за него – име, адрес, имейл, позиция. Това далеч не е всичко, което може да се каже за Никола Минков, но това са данни, с които искаме търсещите машини да разполагат, така че евентуално, ако някой иска да го намери през тях, да може да се свърже с него, те да са на разположение. Подадени по този начин машините са наясно, че това са точно данните за връзка, които трябва да бъдат подадени при едно такова търсене.

Основните тагове в Микродата маркирането са както следва:

• itemscope – създава елемент и указва, че всички поделементи, които го съставят, са информация за него.
• itemtype – Валиден интернет адрес на речника описващ съответния елемент, чрез който търсещите машини да могат да определят точния му вид и предназначение.
• itemid – указва уникален идентификатор за един елемент
• itemprop – показва, че съдържанието на тага, към който е придаден, описва свойството на елемента описано от него ( <span itemprop=”name”>Никола Минков</span> )
• itemref – указва, че описаното свойство не е част от елемента описан с itemscope.

Ще забележите в описания пример, че имаме два елемента описани с  itemscope – човек и адрес. Адреса сам по себе си не би означавал нищо особено за търсещите машини, но в случая той е подаден като поделемент на Person. По този начин се указва връзката между двата елемента – това е адреса на описания човек ( p  се съдържа в div, описващ главния елемент и носи едновременно itemprop=“address” и itemscope ). По този начин може едновременно да се работи по дизайн на елементите и да се поставя маркирането им едновременно.

Друг момент в текущия пример, който привлича вниманието, е че всички елементи, които описват въпросния Person, се визуализират на текущата уеб страница. Освен, разбира се, ако нямат зададено изрично “display:none;”. Може обаче един уебмастър да иска да подаде чрез въпросния елемент и данни, които не иска да се визуализират – или понеже ще развали облика на сайта, или просто защото теста на структурната дата би дал грешка, понеже не ги намира, а ги смята за задължителни, а вие все пак искате елемента ви да се индексира.

В този случай е подходящо използването на мета таг вътре в описания елемент. Например:

…
< meta itemprop=“image” content=“https://serpact.com/wp-content/uploads/2016/06/Nikola-Minkov-CEO-at-SEO-Agency-Serpact-1.png” />
…

Google може да използва микродата данните в страниците на резултатите си. Това е и предпочитан формат за Google+ .

RDFa

RDFa е различен метод за подаване на метаданни. Поради естеството си може да се определи като CSS за значения. Както CSS и при него може да има главни елементи, които да са от значение за цялата страница или целия сайт – например маркирането познато на всеки работещ по-дълбоко в WORDPRESS:

<meta name=”description” content=”A site about fish” />
<link rel=”next” href=”nextpage.html” />
<link rel=”canonical” href=”https://serpact.com/novini”/>

Тези записи заедно с индексацията на <html тага дават някои от най-важните данни за сайта.

Отделно RDFa може да се използва и за отделни и по-малки елементи. Например горния пример в RDFa формат би изглеждал така:

<div typeof=”Person” vocab=”http://schema.org/” >
<span property=”name”>Никола Минков</span>
<span property=”jobTitle”>СЕО  експерт</span>
<span property=”email”>info@serpact.com</span>
<p property=“address” typeof=”PostalAddress”>Адрес:
<span property=”streetAddress”>Д. Благоев 7</span>
<span property=”addressLocality”>Свиленград</span>
<span property=”addressRegion”>България</span>
</p>
< meta property=“image” content=“https://serpact.com/wp-content/uploads/2016/06/Nikola-Minkov-CEO-at-SEO-Agency-Serpact-1.png” />
</div>

Други сходства с CSS е възможността отделни елементите да се групират, да се използват повторно или да са отделни от HTML на страницата.

Речник на отделните атрибути:

• about – Определя обекта на връзката на елемента. Ако е празен се има предвид текущата страница.
• rel – Определя връзката между обекта и URL получено или чрез href или чрез resource.
• rev – Подобно на rel, но връзката е обратна.
• property – определя, че съдържанието на тага, към който е придаден, описва свойството на елемента описано от него ( RDF варианта на itemprop ).
• content  – незадължителен атрибут, който заменя съдържанието  на property
• datatype – незадължителен атрибут, описващ типа на данните в property
• typeof – незадължителен атрибут, описващ типа на RDF елемента.
• href – Определя адреса на rev или rel атрибутите.
• resource – Определя адреса на rev или rel, когато  href го няма.
• src – определя обекта на връзката.

Трябва да се отбележи, че доста браузери и приложения към тях могат да вземат така форматираните данни и да работят с тях. Например, ако имате описано предстоящо събитие, от което се интересувате, то може да бъде прибавено към календара ви.

JSON-LD

Различен модел за предаване на метаданни е JSON-LD. Този метод използва Java базиран скрипт, чрез който да предава въпросните данни по възможно най-прост начин, с минимални усилия, стилизиран по JSON стандарта.

Поради отделянето на маркирането в отделен Java script то обикновено няма част, която да се визуализира на браузерите, но пък е удобно за разчитане от отделни приложения, които биха желали да използват данните получени през него.

Локален пример за JSON маркиране:

<script type=”application/ld+json“> {
“@context”: “http://schema.org”,
“@type”: “LocalBusiness”,
“address”: {
“@type”: “PostalAddress”,
“addressLocality”: “Свиленград”,
“addressRegion”: “BG”,
“postalCode”:”6500″,
“streetAddress”: “ул. Д. Благоев 7”
},
“telephone”: “+359 885-014-972”,
“email”: “info@serpact.com”,
“url”: “https://serpact.com/ “,
“sameAs”:
[ “https://plus.google.com/u/0/+SerpactBg”,
“https://www.facebook.com/Serpact/”],
“description”: “SEO агенция Serpact прави клиентите си печеливши, продаващи и популярни! Компетентни сме в SEO оптимизация, On-Page / Off-Page SEO и PPC.”,
“name”: “SEO Агенция Serpact”,
“alternateName”: “Serpact”,
“legalname”: “Серпакт EООД”,
“branchCode”: “Serpact BG”,
“taxID”: “202477340”,
“openingHours”: “Понеделник-Петък 8:00-17:00”,
“priceRange”:”1000-2600 BGN”,
“geo”: {
“@type”: “GeoCoordinates”,
“latitude”: “41.7676176”,
“longitude”: “26.202593”
},
“hasMap”: “https://www.google.com/maps/place/Serpact/@41.7676176,26.2004043,17z/data= !3m1!4b1!4m5!3m4!1s0x0:0x4df134a68b714c27!8m2!3d41.7676176!4d26.202593”,
“logo”: “https://serpact.com/wp-content/uploads/2016/03/serpact-small.png”,
“image”: “https://serpact.com/wp-content/uploads/2016/03/serpact-small.png”,
“award”: ” “,
“contactPoint”: [ {
“@type”: “ContactPoint”,
“contactType”: “customer service”,
“telephone”: “+359 885-014-972”,
“email”: “info@serpact.com”,
“productSupported”: “SEO оптимизация, SEO анализ”
}],
“currenciesAccepted”: “BGN, GBP, USD, EUR”,
“paymentAccepted”: “Банков път”,
“founder”: [ {
“@type”: “Person”,
“name”: “Nikola Minkov”,
“nationality”: “Bulgarian”,
“jobTitle”: “CEO”,
“gender”: “male”,
“sameAs”: [
“https://plus.google.com/+katqvalentinova”,
“https://www.facebook.com/nikola.t.minkov”
] } ],
“foundingDate”: “2012”,
“foundingLocation”: “Димитровград”
}
</script>

Някои особености за JSON

Форматът е базиран около “context” елемента, за да осигури връзката между JSON и RDF модела. Поради това моделът позволява отделните стойности да се форматират в специфициран формат или да се свържат с определен език. Поради начина на структуриране ( като отделен скрипт ) JSON маркирането може да бъде вградено в страницата или изведено в отделен файл, към който може да се обръщат различни страници.

Както се вижда освен <script type=”application/ld+json“> , което указва типа на речника , този вид маркиране няма особен собствен речник. Трябва да се вземат предвид обаче някои основни правила при маркирането.

1. Отделните елементи на маркировката са съставени от два основни аргумента – свойството на описаното поле и стойността на въпросното свойство. Типа на въпросната стойност трябва да бъде съобразен със стандарта на типа за въпросната стойност ( Ако полето изисква URL, не можете да сложите обикновен текст без да получите грешка). Можете да проверите въпросните формати в сайта на http://schema.org за съответната маркировка.

2. При случаите, когато определен атрибут има няколко стойности ( например в горния пример полето “sameAs” описва страниците на описвания обект в различните социални мрежи, а те са повече от една), то тези стойности се групират в [ ] и се отделят със запетая.

3. Комплексната маркировка, описваща зависими елементи се осъществява чрез събиране на свойствата на въпросния елемент в { }. Всеки такъв елемент трябва да бъде маркиран чрез собствен “@type” индекс, който определя типа му и съответно какви полета се очаква да има.

Други речници, които трябва да се споменат са microformat и OpenGraph.

Мicroformat

Мicroformat е речник от колекция от HTML тагове, вградени в кода на страницата ви, който характеризират определени елементи от нея – хора, събития и други, чийто елементи се прихващат от външни източници като отделни приложения или допълнения към браузера ви и влияят на това как и какви данни ще бъдат предоставени. Например гео маркирането

<span class=“geo”>
<span class=“latitude”>41.7676176</span>,
<span class=“longitude”>26.202593</span>
</span>

Може да се прихване от GPS приложение, използвано за навигация или да определи езика, чрез който да предаде текущата страница.

Някои основни маркировки на microformat:

• hCalendar – за събития
• hCard – за контактна информация , включва:
  • adr – за адрес
  • geo – за гео кооординати (latitude, longitude)
• hNews – за новини
• hProduct – за продукти
• hReview – за отзиви
• rel-license – за копирайт лицени
• rel-nofollow, – за да изключи следването на една връзка, често за спиране на евентуален спам.

WORDPRESS и повечето по-сериозни Уеб платформи често добавят  автоматично подобна маркировка към отделни елементи елементи от сайта ви. ( например фийда ).

Open Graph

Open Graph е речник, разработен през FaceBook , за да може той коректно да приема съдържанието, да го разчита и да го извежда в подходящ формат.

Пример:

<meta property=”og:locale” content=”bg_BG“/>
<meta property=”og:type” content=”article“/>
<meta property=”og:title” content=”Кой побеждава – съдържанието или линка? | Новини | Serpact™“/>
<meta property=”og:description” content=”За съжаление на въпроса кое е по-важно съдържанието или линка няма точен отговор? Линковете и съдържанието вървят ръка за ръка, но защо?“/>
<meta property=”og:url” content=”https://serpact.com/koy-pobezhdava-sydyrzhanieto-ili-linka/“/>
<meta property=”og:site_name” content=”SEO Агенция Serpact™“/>

Това е Open Ggraph маркирането на определена статия на Serpact.

Основните полета, използвани от Facebook при индексирането на съдържанието в собствен пост са: og:type – за вида на поста, og:title – за името , og:url – за адреса на източника, og:image – за основното изображение ( ако има такова ).  В нашия случай имаме и og:locale – за езика на поста, og:description – за описание , og:site_name – за име на сайта на източника.

Трябва да се има в предвид, че Facebook ( а и другите социални платформи ) имат свой собствен поглед и изисквания към съдържанието, което евентуално биха приели, както и към това как да го приемат, и този поглед се различава от този на останалите търсещи машини. Затова и си има собствен речник за маркиране.

Така съобразявайки се с това, каква информация имате на сайта си, как и за какво искате тя да послужи , можете да изберете какви елементи искате да маркирате и каква маркировка да използвате, така че отделните търсещи машини да могат най-точно и лесно да разчетат съдържанието ви и да могат коректно да го подадат в отговорите си.

Надяваме се с примерите си и описаните атрибути към отделните модели на маркиране ще можете да извършите това маркиране коректно. Можете да използвате за контрола онлайн теста на структурната дата на гугъл https://search.google.com/structured-data/testing-tool    ,за да проверите маркировката си за грешки и предложения за поправка. От http://schema.org  можете да изведете изискванията и правилните атрибути, които са ви необходими за маркирането на елементите, които искате да обозначите.