SEO

Úvod do SEO

Co je to SEO

„optimalizace pro vyhledávače“
cílem SEO je zlepšit nalezitelnost stránek pro uživatele
výsledkem pak může být vyšší návštěvnost, větší zisk, …
jedná se o sadu postupů a technik, které stránkám pomůžou ve vyhledávačích

Jak fungují vyhledávače

crawling, indexování, vyhledávání
řazení výsledků podle relevance
druhý výsledků: organické, sponzorované, snippety, …

Jak optimalizovat

„on-page“ faktory
- obsah, klíčová slova, metadata, struktura stránek
- technické překážky indexace
„off-page“ faktory
- síť zpětných odkazů
vyhledávače se snaží preferovat weby, které mají dlouhodobě kvalitní obsah
penalizace nekalých praktik

Technické překážky indexace

většina vyhledávačů si neporadí s Flashem a JavaScriptem
vyhledávače mohou špatně pochopit nevalidní stránky
pozor na nefunkční odkazy
duplicitní obsah na více adresách/doménách

HTML a sémantika

HTML samo o sobě příliš skutečnou sémantiku postihnout nedokáže
explicitně vyjádřená sémantika by přitom hodně pomohla vyhledávačům
informace o tom, co je seznam, co adresa a odkaz nelze příliš smysluplně využít
do HTML lze vkládat základní metainformace jako autor, název a popis stránky

<head>
  <title>Elektromix, a.s. </title>
  <meta name="description"
        content="Elektromix je firma zabývající se prodejem
                 domácích spotřebičů na splátky">
  <meta name="keywords" 
        content="Elektromix, prodej, elektrické
                 spotřebiče, leasing">
</head>

Nedostatky HTML

neexistuje rozšiřitelný mechanismus pro vkládání vlastní sémantiky
prostředky pro vkládání základních metadat byly zneužívány a vyhledávači jsou proto používány v omezené míře

XML a sémantika

jazyk XML umožňuje vytváření vlastních elementů/atributů a pomocí nich můžeme snadno označit význam informace
pokud budou všichni pro jeden druh informace používat stejné elementy, půjde vše snadno indexovat a prohledávat

<ceník>
  …
  <položka kategorie="CD" kód="04400148712">
    <název>Entropicture</název>
    <interpret>Dan Bárta</interpret>
    <cena měna="Kč">140<cena>
  </položka>
  …
</ceník>

Problémy XML na webu

původní myšlenka, kdy mělo XML nahradit na webu HTML byla příliš revoluční
- předběhla schopnosti autorů i prohlížečů
schůdnější myšlenka kombinování XHTML a „sémantického“ XML v jednom dokumentu se také neprosadila
- specifikace jazyka XHTML byla napsána tak nešťastně, že to formálně neumožňovala
- nejrozšířenější prohlížeč nepodporoval XHTML

Využití XML ve specializovaných vyhledávačích

některé vyhledávače si definují vlastní formát, ve kterém jim jde dodávat data k indexování (tzv. „XML feed“)
tato data jsou poskytována paralelně k normálnímu webovému obsahu
využívá např. Zbozi.cz, Heureka.cz a Google Merchant Center

<feed xmlns="http://www.w3.org/2005/Atom"
  xmlns:sc="http://schemas.google.com/structuredcontent/2009"
  xmlns:gd="http://schemas.google.com/g/2005"
  xmlns:scp="http://schemas.google.com/structuredcontent/2009/products"
  xmlns:app="http://www.w3.org/2007/app">
  <entry>
    <app:control>
      <sc:required_destination dest="CommerceSearch"/>
      <sc:excluded_destination dest="ProductSearch"/>
    </app:control>
    <title>Android Shirt</title>
    <content type="text">Catch some air with this cool Android Cartwheel Shirt. Since it's made of
      100% organic cotton and combed for extra softness. </content>
    <sc:id>1022316</sc:id>
    <link rel="alternate" type="text/html"
      href="http://www.googlestore.com/Kid+s/Youth+Organic+Cotton+Android+T-Shirt.axd"/>
    <sc:image_link>http://www.googlestore.com/content/images/standard/10%2081113%20blacka.jpg</sc:image_link>
    <sc:target_country>US</sc:target_country>
    <sc:content_language>en</sc:content_language>
    <sc:attribute name="myattribute" type="text" unit=""> Some Custom Attribute </sc:attribute>
    <sc:attribute name="yourCustomAttribute" type="text" access="private"> Another custom attribute
      for GCS </sc:attribute>
    <scp:brand>Acme</scp:brand>
    <scp:condition>new</scp:condition>
    <scp:gtin>AB23</scp:gtin>
    <scp:price unit="usd">15.20</scp:price>
    <scp:product_type>Clothing &amp; Accessories &gt; Clothing &gt; Outerwear &gt;
      Sweaters</scp:product_type>
    <scp:color>red</scp:color>
    <scp:color>blue</scp:color>
    <scp:quantity>30</scp:quantity>
  </entry>
  …
</feed>

Sémantický web

Definice sémantického webu

The Semantic Web is the representation of data on the World Wide Web. It is a collaborative effort led by W3C with participation from a large number of researchers and industrial partners. It is based on the Resource Description Framework (RDF), which integrates a variety of applications using XML for syntax and URIs for naming.

The Semantic Web is an extension of the current web in which information is given well-defined meaning, better enabling computers and people to work in cooperation.

—Tim Berners-Lee, James Hendler, Ora Lassila

Idea sémantického webu

doplnit síť webových stránek sítí výroků
výroky lze na rozdíl od webových stránek automatizovaně zpracovávat
výroky se zapisují ve standardizovaném formátu RDF (Resource Description Format)
- založen na XML
- výrok = (subjekt, predikát, objekt)
- jednotlivé části výroku jsou identifikovány URI adresou (případně hodnotou)
z „webu dokumentů“ se stane „web znalostí“

Příklad výroku a reprezentace v RDF

výroky:

Ema má maso

Webová stránka www.kosek.cz byla vytvořena 23. února 1999

reprezentace v RDF:

<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:vztahy="http://example.org/vztahy/"
         xmlns:exterms="http://www.example.org/terms/">
  <rdf:Description rdf:about="http://example.org/lide/Ema">
    <vztahy:ma rdf:resource="http://example.org/jidlo/maso"/>
  </rdf:Description>
  <rdf:Description rdf:about="http://www.kosek.cz/">
    <exterms:creation-date>1999-02-23</exterms:creation-date>
  </rdf:Description>
</rdf:RDF>

reprezentace v N3:

@prefix exterms: <http://www.example.org/terms/> .
@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix vztahy: <http://example.org/vztahy/> .
    
<http://example.org/lide/Ema>   vztahy:ma             <http://example.org/jidlo/maso> .
<http://www.kosek.cz/>          exterms:creation-date "1999-02-23" .

Perspektiva sémantického webu

na široké nasazení se zatím čeká
ruční vytváření RDF anotací je vzhledem k syntaxi a pracnosti nemyslitelné
RDF se proto dnes používá spíše opět jako alternativní formát pro prezentování informací, u kterých chceme ostatním usnadnit jejich automatické zpracování
pro agregaci RDF metadat a jejich další zpracování je potřeba sjednotit „slovníky pojmů“ (tzv. ontologie)
ontologie se zapisují pomocí jazyka OWL
v posledních letech je celý koncept oživován pod novým názvem linked data
byl vytvořen nový čitelnější a více „web-friendly“ formát pro reprezentaci dat – JSON-LD

Problémy sémantického webu

neexistuje aplikace, která by oslovila větší množství uživatelů a způsobila tak větší zájem o technologii
syntaxe RDF je zbytečně komplikovaná
identifikace pomocí URI není vždy jednoznačná
metadata musí být vytvářena odděleně od klasického webového obsahu

Mikroformáty

konvence pro vkládání strukturovaných metainformací do HTML, která využívá pouze stávající vlastnosti jazyka
„viditelná metadata“ – metadata jsou společná s viditelnou částí stránky a uživatel je nezapomene aktualizovat

<div class="vevent">
  <span class="summary">Devátý ročník konference Znalosti 2010</span>
  se bude se konat 
  <abbr class="dtstart" title="2010-02-03">3.</abbr>–
  <abbr class="dtend" title="2010-02-06">5. února 2010</abbr>
  na 
  <a class="location" href="http://www2.fm.vse.cz/znalosti/misto.html/">
    fakultě managementu VŠE v Jindřichově Hradci</a> 
  (<span class="geo">Pozice: 
     <abbr class="latitude"
           title="49.14887111111111">49°8'55.936"N</abbr>, 
     <abbr class="longitude"
           title="15.005985277777778">15°0'21.547"E</abbr>
   </span>).
  <a class="url" href="http://www2.fm.vse.cz/znalosti/">Podrobnosti
    o konferenci</a>
</div>

Základní fakta

mikroformáty nevadí prohlížečům (ani těm starším)
mikroformáty lze strojově zpracovávat
vyvinuly se a navazují na důsledné použití tříd v CSS
postupně je začínají podporovat zejména vyhledávače
- některé informace na stránkách s výsledky jsou označeny pomocí mikroformátů pro snazší další zpracování
- mikroformáty ve stránce využívají vyhledávače pro zlepšení vyhledávání a zobrazení výsledků
prohlížeče zatím nemají přímo integrovanou podporu, ale dají se používat pluginy

Nejpoužívanější mikroformáty

přehled definovaných mikroformátů je dostupný na http://microformats.org/
hCard

Vizitka – umožňuje reprezentovat osoby, organizace a jejich základní údaje jako jméno a a adresa
XFN

Reprezentace vztahů mezi osobami
hCalendar

Informace o údalostech jako je jejich místo a čas
rel-license

Informace o licenci, pod kterou je vydán obsah na stránce
rel-tag

„Tagování“ obsahu

Problémy mikroformátů

chybí přímá podpora v prohlížečích, je potřeba používat extenze
zneužívá se atribut class

není vyřešena kolize identifikátorů

částečně řeší profily

<head profile="http://microformats.org/profile/hcalendar">

<link rel="profile" href="http://microformats.org/profile/hcalendar">

není definováno standardní API pro práci s mikroformáty v JavaScriptu
v současnosti již mikroformáty ustupují mikrodatům a RDFa

RDFa

rozšíření XHTML o několik atributů, které umožní pohodlné vkládání libovolného RDF přímo do XHTML kódu
RDFa = RDF in … attributes
lze využívat jakoukoliv ontologii, není potřeba pro každá data vymýšlet novou syntaxi jakou u mikroformátů
princip je podobný jako u mikroformátů, ale jsou odstraněny nedostatky jako potencionální kolize identifikátorů

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:cal="http://www.w3.org/2002/12/cal/ical#"
      xmlns:xs="http://www.w3.org/2001/XMLSchema#"
      xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
…
<p typeof="cal:Vevent">
  <span property="cal:summary">Devátý ročník konference
    Znalosti 2010</span>
  se bude se konat 
  <span property="cal:dtstart" content="2010-02-03"
        datatype="xs:date">3.</span>–
  <span property="cal:dtend" content="2010-02-06"
        datatype="xs:date">5. února 2010</span>
  na 
  <a property="cal:location" 
     href="http://www2.fm.vse.cz/znalosti/misto.html/">fakultě 
     managementu VŠE v Jindřichově Hradci</a> 
  (Pozice: 
     <span property="geo:lat"
           content="49.14887111111111">49°8'55.936"N</span>, 
     <span property="geo:long"
           content="15.005985277777778">15°0'21.547"E</span>).
  <a rel="cal:url" href="http://www2.fm.vse.cz/znalosti/">Podrobnosti
    o konferenci</a>
</p>
…
</html>

je dán algoritmus, jak libovolné RDFa převést na RDF

Speciální atributy RDFa

RDFa definuje několik atributů, které lze používat pro obohacení v podstatě jakéhokoliv jazyka o možnost zápisu RDF tripletů
dnes je definováno použití RDFa společně s XHTML i s HTML5, podporu nabízejí i některé další formáty jako ODF 1.2 nebo DocBook 5.1

Tabulka 1. Atributy používané pro zápis RDFa

Atribut	Typ	Význam
`rel`	seznam CURIE	Zachycuje vztah (predikát) mezi dvěma zdroji.
`rev`	seznam CURIE	Zachycuje reverzní vztah (predikát) mezi dvěma zdroji.
`content`	řetězec	Strojově čitelný tvar hodnoty, pokud je jiný než obsah elementu.
`href`	URI	URI reprezentující objekt ve výroku (pro externí objekty).
`src`	URI	URI reprezentující objekt ve výroku (pro objekty vnořené do stránky jako jsou např. obrázky).
`about`	URI nebo bezpečné CURIE	Určení předmětu výroku.
`property`	seznam CURIE	Určení vlastnosti (predikátu).
`resource`	URI nebo bezpečné CURIE	URI reprezentující objekt ve výroku (pro externí objekty, na které nemá jít přejít pomocí odkazu).
`datatype`	CURIE	Určení datového typu hodnoty.
`typeof`	seznam CURIE	Určení RDF typu předmětu.
`prefix`	prefix: URL	Delarace prefixu a jeho mapování na URL pro HTML, ve kterém nelze použít jmenné prostory
`vocab`	URI	Identifikace ontologie použité na elementu a jeho podelementech

CURIE

v RDF je vše identifikováno pomocí URI
v jednom dokumentu se mohou opakovat URI se stejnou počáteční částí a ruční zápis je zbytečně zdlouhavý
CURIE (compact URI) dovolují zkrátit zápis
bezpečné CURIE = CURIE ve hranatých závorkách pro odlišení od URI

zápis bez CURIE

<div about="http://dbpedia.org/resource/Albert_Einstein">…</div>
<div about="http://dbpedia.org/resource/Germany">…</div>

různé alternativy s využitím CURIE

<html prefix="db: http://dbpedia.org/resource/">
  …
  <div about="db:Albert_Einstein">…</div>
  <div about="db:Germany">…</div>
  …
</html>

<html xmlns:db="http://dbpedia.org/">
  …
  <div about="[db:resource/Albert_Einstein]">…</div>
  <div about="[db:resource/Germany]">…</div>
  …
</html>

<html xmlns:dbr="http://dbpedia.org/resource/">
  …
  <div about="[dbr:Albert_Einstein]">…</div>
  <div about="[dbr:Germany]">…</div>
  …
</html>

Ukázky použití

Open Graph – lze přiřadit metadata využívaná Facebookem

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
  <head>
    …
    <meta property="og:title" content="Titulek pro sdílení stránky na FB"/>
    <meta property="og:type" content="blog"/>
    <meta property="og:image" content="preview-image.jpg"/>
    …
  </head>
  …
</html>

podobný mechanismus používají i jiné internetové služby

Problémy RDFa

pomalu jej začínají podporovat největší poskytovatelé obsahu
API pro čtení v JavaScriptu se teprve vytváří

Mikrodata

přidávají do HTML několik nových atributů, aby vkládání metadat bylo „čistší“ než v případě mikroformátů
pro identifikaci typů objektů je možné používat URI a předejít tak problémům s kolizními identifikátory
používají vlastní datový model (odlišný od RDF)

<div itemscope 
     itemtype="http://schema.org/Event">
  <span itemprop="description">Devátý ročník konference
    Znalosti 2010</span> se bude se konat 
  <time itemprop="startDate" datetime="2010-02-03">3.</time>–
  <time itemprop="endDate" datetime="2010-02-06">5. února 2010</time>
  na 
  <span itemprop="location" itemscope itemtype="http://schema.org/Place">
    <a itemprop="name" 
       href="http://www2.fm.vse.cz/znalosti/misto.html/">fakultě 
       managementu VŠE v Jindřichově Hradci</a> 
    (<span itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates">Pozice: 
       49°8'55.936"N, 15°0'21.547"E
       <meta itemprop="latitude" content="49.148871"/>
       <meta itemprop="longitude" content="15.005985"/>
     </span>).
  </span>
  <a itemprop="url" href="http://www2.fm.vse.cz/znalosti/">
    Podrobnosti o konferenci</a>
</div>

Perspektiva mikrodat

schema.org – slovníky běžných metadat podporované vyhledávači Google, Microsoft, Yahoo a Yandex
nezapadá zcela do konceptu sémantického webu, ale podporují je silní hráči
samotný vznik mikrodat byla poněkud partyzánská akce editora specifikace HTML5, který nemá rád RDFa (a sémantický web vůbec)
až čas ukáže, zda zvítězí mikrodata nebo RDFa

JSON-LD

JSON-LD je způsob jak reprezentovat linked-data ve formátu JSON
v poslední době je mnoha vyhledávači preferován před mikrodaty/RDFa
všechna metadata jsou pohromadě na jednom místě (výhoda i nevýhoda)
vyhledávače nejvíce podporují slovníky ze http://schema.org/

JSON-LD ukázka

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Event",
  "location": {
    "@type": "Place",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Jindřichův Hradec"
    },
    "geo": {
        "@type": "GeoCoordinates",
        "latitude": "49.148871",
        "longitude": "15.005985"
    },      
    "name": "Fakulta managementu VŠE"
  },
  "name": "Znalosti 2010",
  "description": "Devátý ročník konference Znalosti 2010",
  "url": "http://www2.fm.vse.cz/znalosti/",
  "startDate": "2010-02-03",
  "endDate": "2010-02-06"  
}
</script>

<p>Devátý ročník konference Znalosti 2010 se bude konat 
3.–5. února 2010 na fakultě managementu VŠE v Jindřichově Hradci
<a href="http://www2.fm.vse.cz/znalosti/">Podrobnosti o konferenci</a></p>

Závěr

Shrnutí

nepoužívejte „black hat“ SEO techniky, ale pouze „white hat“
explicitně vyjádřená sémantika na stránkách může pomoci vyhledávačům a „mash-up“ aplikacím
několik soutěžících formátů – v současné době je asi nejperspektivnější JSON-LD a slovník schema.org
důležité je sledovat především aktuální podporu ve vyhledávačích a v prohlížečích

Další zdroje informací – SEO

Další zdroje informací – sémantika

mikroformáty
- http://microformats.org – hlavní stránka o mikroformátech
RDFa
- http://www.w3.org/TR/xhtml-rdfa-primer/ – RDFa Primer (úvod do RDFa)
- http://www.w3.org/TR/rdfa-syntax/ – RDFa in XHTML: Syntax and Processing
- http://www.w3.org/TR/rdfa-in-html/ – HTML+RDFa 1.1
- http://www.w3.org/TR/rdfa-lite/ – RDFa Lite 1.1
mikrodata
- http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html – návrh specifikace
- schema.org – slovník metadat podporovaný největšími vyhledávači

SEO

4IZ268 – Webové technologie

Úvod do SEO

Co je to SEO

Jak fungují vyhledávače

Jak optimalizovat

Technické překážky indexace

HTML a sémantika

HTML a sémantika

Nedostatky HTML

XML a sémantika

XML a sémantika

Problémy XML na webu

Využití XML ve specializovaných vyhledávačích

Sémantický web

Definice sémantického webu

Idea sémantického webu

Příklad výroku a reprezentace v RDF

Perspektiva sémantického webu

Problémy sémantického webu

Mikroformáty

Mikroformáty

Základní fakta

Nejpoužívanější mikroformáty

Problémy mikroformátů

RDFa

RDFa

Speciální atributy RDFa

CURIE

Ukázky použití

Problémy RDFa

Mikrodata

Mikrodata

Perspektiva mikrodat

JSON-LD

JSON-LD

JSON-LD ukázka

Závěr

Shrnutí

Další zdroje informací – SEO

Další zdroje informací – sémantika