Voordeel halen uit zoekmachines en semantic web
•Télécharger en tant que PPTX, PDF•
0 j'aime•291 vues
Hoe kan gestructureerde, semantische opmaak en machineleesbare content ervoor zorgen dat zoekmachines websites beter gaan "begrijpen". Presentatie tijdens het "Make your website great again" event.
Recommandé
Contenu connexe
Similaire à Voordeel halen uit zoekmachines en semantic web
Similaire à Voordeel halen uit zoekmachines en semantic web (20)
Plus de Bart Hanssens
Plus de Bart Hanssens (20)
Voordeel halen uit zoekmachines en semantic web
- 1. BOSA.be MYWGA Residence Palace, Brussel 2019-10-22 Bart Hanssens FOD BOSA Digitale Transformatie Voordeel halen uit zoekmachines en Semantic Web
- 2. Content is King ! 2
- 3. • Analyseren / indexeren van beelden duurt veel langer • Goede “alt tekst” beschrijvingen dus ook nuttig voor SEO • Machines lezen mee • Chatbots en virtuele assistenten (Siri, Cortana, Alexa …) • Logisch opgebouwde, heldere zinnen Toegankelijkheid en zoekmachines 3
- 4. Semantische opmaak van webpagina’s 4
- 5. • Als extra attributen in bestaande HTML elementen • Voordeel: weinig of geen dubbele informatie • Als apart blok in de header • “Moderne” manier • Voordeel: iets makkelijker te verwerken door machines • Nadeel: herhaling van gegevens • (Aparte pagina / API / web service) Meerdere manieren, onzichtbaar voor de gebruiker 5
- 6. • Machines in staat stellen pagina’s te “begrijpen” • Geen garantie op betere ranking ! • “Linked data”, “Semantic Web”, “RDF”… zijn 20+ jaar oud • Apple, Netscape, WorldWideWeb Consortium… < 2000 • Wel vernieuwde interesse • Informatie-uitwisseling Europees niveau (zie JoinUp.EU) • Veel onderzoek en projecten in Vlaanderen (o.a. UGent) • Zoekmachines ! Is het nieuw ? 6
- 7. 7
- 8. • Nieuwe semantische elementen • <header>, <footer>, <nav>, <main> … • Ter vervanging van “div”-soep (class=“nav”/”navigation”/…) • Reeds zeer goed ondersteund door browsers en CMS • Drupal: HTML 5 Tools module (zit al in Drupal 8 core) • Nieuwe attributen HTML5 8
- 9. <nav> … </nav> <main> … </main> <footer> … </footer> <div class=“navigation”> ... </div> <div class=“content”> … </div> <div class=“bottom”> … </div> 9 Voorbeeld nieuwe HTML5 elementen
- 10. • Data attributen mogelijk op zowat alle elementen • itemid, itemref, itemscope, itemprop • https://html.spec.whatwg.org/#toc-microdata • HTML5 specificatie bevat geen “vocabularies” • Geen standaard metadata voor persoon, evenement, … • http://microformats.org/ HTML5 Microdata 10
- 11. 11
- 12. • Gelanceerd in 2012 door Twitter • Mooiere opmaak en meegeven metadata in Tweet links • https://developer.twitter.com/en/docs/tweets/optimize- with-cards/ • https://cards-dev.twitter.com/validator • Drupal: Meta Tags module Twitter Cards 12
- 13. <head> ... <meta name="twitter:card" content="summary" /> <meta name="twitter:url" content="https://www.belgium.be/nl" /> <meta name="twitter:title" content="Belgium.be" /> <meta name="twitter:description" content="Informatie en diensten van de overheid"/> Voorbeeld: Belgium.be 13
- 14. 14
- 15. • Gelanceerd in 2011 door Facebook • Voor delen van stukjes content via sociale media • Facebook, LinkedIn, Pinterest, Twitter, Google, … • https://ogp.me/ • https://developers.facebook.com/tools/debug/sharing/ • Basic metadata + beperkt aantal uitbreidingen • music, video, article, book, profile • Drupal: Meta Tags module OpenGraph 15
- 16. Voorbeeld: DoeMaarDigitaal.be delen (LinkedIn) 16
- 17. <html lang="nl" prefix="og: http://ogp.me/ns#“... ... <meta property="og:title" content="Welkom bij de digitale overheid." /> <meta property="og:description" content="Communiceren met de overheid? …." <meta property="og:image" content= …default_social_nl.jpg" /> Voorbeeld: DoeMaarDigitaal.be (opmaak) 17
- 18. • Vrij vergelijkbaar met HTML 5 microdata • http://rdfa.info/ • Bruikbaar in HTML 4, HTML 5, XHTML, XML, SVG, … • “Lite” versie met enkele eenvoudige attributen • vocab, typeof, property, resource, prefix • https://www.w3.org/TR/rdfa-lite/ RDFa 18
- 19. • Principes van linked data • Wereldwijde unieke IDs (proberen) te definiëren • Properties / beschrijvingen van velden ook unieke IDs geven • Deze unieke IDs (URIs) lijken heel erg op linken / URLs • En in de ideale wereld gedragen ze zich ook zo, voor machines Dit was hergebruik door linked data ! 19
- 20. Gestructureerde / linked data en zoekmachines 20
- 21. 21
- 22. • Gelanceerd in 2011 door & voor zoekgiganten • Google, Microsoft Bing, Yahoo! en Yandex • https://schema.org/docs/developers.html • Veel uitgebreider dan twitter cards / open graph • Als microdata, RDFa of JSON-LD • Technische afspraken over “types” en “properties” • “Event”, “Product”, “Person”, “Organization” … • “name”, “address”, “startDate”, “openingHours”, …. Schema.org 22
- 24. • Linked data versie van JSON • Makkelijk te produceren door linked data tools … • …. maar nog niet zo goed ondersteund door CMS • Alternatief voor RDFa • 1 apart blok ipv attributen op verschillende elementen • Bevat zelfde informatie • Makkelijk te verwerken door JSON-tools JSON-LD 24
- 25. <script type="application/ld+json"> { "@context": "http://schema.org" … "@id": "https://www.charleroi.be#identity", "@type": "GovernmentOrganization", "address": { "@type": "PostalAddress", … "postalCode":"6000", "streetAddress": "Place Charles II 14 – 15" } … Voorbeeld: schema.org in JSON-LD (Charleroi.be) 25
- 26. • Knowledge Graph Search API • https://developers.google.com/knowledge-graph • Custom Search Engine (CSE): beperken tot bepaalde types • https://support.google.com/customsearch/answer/4544182 Schema.org en Google Knowledge Graph 26
- 27. 27 Voorbeeld: Google Knowledge Graph Search API
- 28. • Bing • https://www.bing.com/webmaster/help/marking-up-your- site-with-structured-data-3a93e731 • https://www.bing.com/toolbox/markup-validator • Google • https://developers.google.com/search/docs/guides/intro- structured-data • https://search.google.com/structured-data/testing-tool Webmaster tools en documentatie 28
- 29. Vragen ? 29