SEO

Jirka Kosek

Poslední modifikace: $Date: 2016/12/16 09:00:19 $

Ú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 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

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í

  • 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

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ů

  • zatím chybí přímá podpora v prohlížečích, je potřeba používat pluginy nebo Web 2.0 aplikace

  • 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

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 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>
    <html prefix="db: http://dbpedia.org/resource/">
      …
      <div about="db:Albert_Einstein">…</div>
      <div about="db: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"/>
        …
      </head>
      …
    </html>
  • podobný mechanismus používají i jiné internetové služby

Problémy RDFa

Mikrodata

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

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

  • příklon k jednoduchosti a „viditelným“ metadatům

  • několik soutěžících formátů – v nejbližší době jsou nejperspektivnější asi mikrodata 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