In deze zelfstudie bekijken we hoe u inhoud kunt toevoegen aan uw inhoud met open grafiek, Twitter-kaarten en microdata. Hierdoor wordt uw inhoud aantrekkelijker, relevanter en vindbaarder voor potentiële gebruikers.
Google, Facebook, Twitter en de andere platforms die jij en ik gebruiken om content te delen en te ontdekken, zijn nog steeds niet in staat om onze gedachten te lezen. De machines die de cloud voeden, vertrouwen op u en ik, ontwerpers en ontwikkelaars, om hen te leren over de betekenis die onze inhoud biedt en hoe deze zich verhoudt tot onze doelgroep. Door deze platforms over abstractie en betekenis te leren, stellen we hen in staat relevantere, provocerende en vindbare inhoud weer te geven.
Wat is ontdekbaarheid?
Ontdekbaarheid is het gemak waarmee een machine of persoon online een beetje relevante informatie kan vinden.
Welke van deze Facebook-berichten krijgt meer aandacht?
Welke van deze tweets is des te provocerend?
En welke van deze zoekresultaten van Google relevanter lijkt voor uw interesses?
De verschillen hierboven zijn duidelijk. Als u Facebook's Open Graph Protocol, Twitter's Card-systeem en Microdata voor zoekmachines niet implementeert, wordt uw inhoud waarschijnlijk genegeerd ten gunste van de relevantere inhoud van uw concurrenten. In dit artikel zal ik je laten zien hoe belangrijk het is om je doelgroep te begrijpen terwijl je deze systemen implementeert in je semantische markup.
markup
Ten eerste, wat is het precies markup?
"Een documentopmaaktaal is een modern systeem voor het annoteren van een document op een manier die syntactisch te onderscheiden is van de tekst. - Wikipedia
In eenvoudiger bewoordingen is het een manier om een document met pennen, potloden of computers te markeren, te annoteren of op te maken op een manier die er symbolisch anders uitziet dan de tekst die u bent markeren. De term komt van proeflezers die dat zouden doen markup manuscripten voor bewerkingen.
Uit de Chicago Manual of Style
Proeflezersmerken zijn een vorm van markup. Onthoud deze van de Engelse les in het middelbaar onderwijs (of was je te druk bezig met het spelen van je mooie Walkman om op te letten ?!)
Hier zijn drie manieren waarop u een digitaal document kunt markeren om een kop aan te geven:
HTML:
Ik ben de beste koers
Markdown
## Nee ik ben de beste koers
Latex
\ section I'm LaTeX
Nu je een beter begrip hebt van wat LaTeX ... err, markup is, zullen we een eenvoudig HTML5-document maken met een enkel stuk inhoud. We zullen het gebruiken om de verschillende manieren te illustreren waarop we betekenis kunnen toevoegen aan die inhoud, wat leidt tot een grotere vindbaarheid.
HTML
Maak eerst het eerste HTML-document in de teksteditor van uw keuze.
Dat is zoveel eenvoudiger dan de manieren waarop het vroeger was. Laten we nu wat inhoud toevoegen!
Inhoud
Dit is ons enkelvoudige deel van de inhoud, een afbeelding van een zeer ongelukkige kat, in een gedeelte binnen onze documenttekst.
Vrolijk vriend ...
Titel
Nu we weten met welke inhoud we werken, kunnen we het eerste deel toevoegen context naar onze pagina. Onze oude vriend, </code> tag in de documenten <code><head></code>. </p><pre><head> <title> Verlaten katten
Laten we verder gaan met iets een beetje meer uitdagend (hoewel nog steeds eenvoudig) met Facebook's Open Graph Protocol!
Open Graph-protocol van Facebook
Met het Open Graph Protocol kan elke webpagina een rijk object worden in de sociale grafiek van Facebook. Hiermee kan elke webpagina dezelfde functionaliteit hebben als een object op Facebook.
De open grafiek van Facebook (en ook het kaartsysteem van Twitter, waar we hierna naar zullen kijken) werkt met metagegevens die je toevoegt in je webpagina's ' . Dezelfde plaats die we net hebben geplaatst </code>. In het geval van Facebook's open grafiek-protocol zijn dat er wel <em>vier eigenschappen</em> die nodig zijn.</p><h3>Vereist Grafiekmarkering openen</h3><p>De vier vereiste open grafiekeigenschappen die Facebook nodig heeft, zijn: </p><ol> <li>Titel</li> <li>Type</li> <li>Beeld</li> <li>URL</li> </ol><h4>Titel</h4><p>De eerste hiervan is de title-tag, de titel van uw object zoals deze op Facebook zou moeten verschijnen.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_5.png"><p>Dit is hoe mijn voorbeeld een titel krijgt wanneer het HTML-document op Facebook wordt gedeeld.</p><pre><meta property="og:title" content="Forlorn Feline" ></pre><p><strong>Notitie</strong>: Als u een titel maakt die anders is dan de originele titel, geeft Facebook een foutmelding bij het debuggen van uw pagina. Facebook staat het verschil toe, maar het valideert niet 100%. Ik weet niet waarom Facebook dit fronst, als je ideeën hebt waarom laat het me weten!</p><h4>Type</h4><p>De tweede eigenschap die Facebook nodig heeft, is het type object dat gebruikers op hun platform zullen tonen.</p><p>Onze inhoud vertegenwoordigt geen muziek of video. Het is ook geen artikel, boek of profiel. Het enige dat we overblijven, is het feit dat onze inhoud in een HTML-document leeft, dat bij het uploaden naar een webserver een website wordt.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_6.png"><pre><meta property="og:type" content="website" ></pre><h4>Beeld</h4><p>De derde eigenschap die Facebook nodig heeft, is een afbeelding die ons object vertegenwoordigt. Deze is vrij eenvoudig!</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_7.png"><pre><meta property="og:image" content="images_12/improve-your-websites-discoverability-with-semantic-markup_2.gif" ></pre><h4>URL</h4><p>De vierde en laatste eigenschap die Facebook vereist, is de URL die gebruikers ervaren wanneer ze interactie hebben met het object.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_8.png"><p>Net als de afbeeldingseigenschap is deze vrij eenvoudig.</p><pre><meta property="og:url" content="http://ryanallen.com/forlorn-feline.html" > </pre><p>Dat doet het voor alles wat nodig is. Het is tijd om meer abstract te worden met de <em>betekenis</em> we injecteren onze inhoud en daarvoor moeten we onze doelgroep identificeren.</p><h3>Doelgroep</h3><p>Het doel van dit artikel is niet om je te leren hoe je je doelgroep kunt identificeren. Ik wil u echter wel op het belang van weten wie dat is. Wanneer u een context aan het opbouwen bent in uw inhoud, moet u weten wie u wilt ontdekken van uw inhoud en wat zij over die inhoud te weten moeten komen.</p><p>Voor de inhoud van dit artikel, het beeld van de ongelukkig uitziende kat, is de doelgroep een webontwerper die meer wil weten over de vindbaarheid (jij). Laten we eens kijken hoe dat eruit ziet in de optionele markup die Facebook begrijpt.</p><h4>Optionele abstracte opmaak</h4><p>We kunnen wat extra markeringen toevoegen, zoals een beschrijving, die, hoewel niet vereist, het veel interessanter maken voor iedereen die onze inhoud bekijkt.</p><p>Dus wat moet onze beschrijving zijn? Het moet relatief zijn ten opzichte van de doelgroep.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_9.png"><pre><meta property="og:description" content="Vincenzo the cat is sad that no one is discovering the online content he worked so hard to create. Such hurt. Very Sadness." ></pre><p>Super goed! Weet je nog hoe ik je vertelde dat Twitter op een vergelijkbare manier werkt als het Open Graph-protocol van Facebook? Laten we er nog een keer naar kijken!</p><h2>tjilpen</h2><p>Twitter vereist verschillende eigenschappen, afhankelijk van het kaarttype dat u gebruikt. Voor dit voorbeeld gebruiken we de standaard samenvatingskaart waarvoor deze vier eigenschappen nodig zijn:</p><ol> <li>Kaarttype</li> <li>Attribution</li> <li>Titel</li> <li>Omschrijving</li> </ol><p>De meeste van deze eigenschappen vereisen niet dat we extra werk doen. Waarom is dat?</p><blockquote>"Wanneer de Twitter-kaartverwerker naar tags op uw pagina zoekt, controleert deze eerst of de Twitter-eigenschap aanwezig is en, indien deze niet aanwezig is, terug naar de ondersteunde Open Graph-eigenschap. Hierdoor kunnen beide onafhankelijk van elkaar op de pagina worden gedefinieerd en wordt de hoeveelheid dubbele opmaak die nodig is om uw inhoud en ervaring te beschrijven, tot een minimum beperkt. - Twitter </blockquote><h3>Minimaliseren van dubbele markeringen</h3><p>Dat is geweldig! De tags die we niet hoeven te dupliceren (hoewel je dat zou kunnen als je een reden had) zijn: </p><ol> <li><code>og: title</code></li> <li><code>og: beschrijving</code></li> <li><code>og: image</code></li> </ol><p>Drie beneden, twee te gaan!</p><h3>Kaarttype</h3><p>Laten we eerst aan Twitter vertellen welk type inhoud we delen. We zullen deze kaart instellen op de standaard samenvattingskaart wanneer het HTML-document op Twitter wordt gedeeld.</p><pre><meta name="twitter:card" content="summary" ></pre><p>Dat was eenvoudig, wat nu? Ik hoop dat het iets geweldigs is!</p><h3>Attribution</h3><p>Twitter vereist dat een account wordt toegewezen aan een Twitter-account van de maker van de inhoud en / of contenteigenaar. Als de inhoud eigendom is van een bedrijfspagina of een bedrijfsafdeling (of bestaat op de bedrijfssite maar niet het eigendom is van het bedrijf), kunt u een sitestijltoeschrijving gebruiken.</p><p>Hier is hoe dit eruit zal zien als het gehost wordt op mijn persoonlijke site:</p><pre><meta name="twitter:creator" content="@ryanallen_com" ></pre><p>Hier is hoe het eruit zou zien als Tuts + Web Design de HTML hostte:</p><pre><meta name="twitter:creator" content="@ryanallen_com" > <meta name="twitter:site" content="@wdtuts" ></pre><p>Twitter moet het domein voor elk type Twitter-kaart verifiëren en wit-lijsten. Dit is eenvoudig en geautomatiseerd, maar ik weet niet wat erbij komt kijken als je op de zwarte lijst staat. Als iemand hiermee ervaring heeft, zou ik graag meer willen leren.</p><p>Dat is het voor Twitter! Maar goed dat we eerst Open Graph hebben gedaan, Twitter bespaart veel tijd door optimaal te werken met andere platforms. Bedankt Twitter!</p><p>Tijd om de zoekmachines opnieuw te bezoeken voor een aantal nieuwe, contextuele en opwindende manieren om uw inhoud te optimaliseren.</p><h2>Microdata en zoekmachine optimalisatie</h2><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_10.png"><p>Eerst een kort woordje van Microsoft:</p><blockquote>"Op 2 juni [2011] hebben wij [Microsoft] een samenwerking aangekondigd tussen Bing, Google en Yahoo om een standaardreeks schema's voor gestructureerde gegevensopmaak op webpagina's te maken en te ondersteunen. Hoewel onze bedrijven op veel verschillende manieren concurreren, was het ons duidelijk dat samenwerking in deze ruimte goed zou zijn voor elke zoekmachine afzonderlijk en voor de sector als geheel. - Michael O'Connor </blockquote><p>Microdata verschilt van de andere markup die we al hebben gestructureerd omdat deze niet in de documentkop leeft.</p><p>We zullen microdata gebruiken om context in onze inhoud te verwerken in de body van ons HTML-document. Zoekmachines zullen onze gegevens gebruiken om de vindbaarheid van onze inhoud voor hun gebruikers te verbeteren.</p><p>De machines geloven wat we hen vertellen. Voor nu tenminste ... </p><h3>Vereiste Microdata-markering </h3><p>De volgende tags zijn vereist voor elk item waarin u betekenis wilt opbouwen. </p><ol> <li>Item bereik</li> <li>Type voorwerp</li> </ol><p>Eerst moeten we het identificeren <em>ding</em> we beschrijven. Laten we plezier maken met semantiek en een beetje context of betekenis opbouwen in onze inhoud die is bedoeld voor onze doelgroep.</p><p>Vergeet niet dat we slechts één enkel stukje inhoud hebben. Wat is een voor de hand liggend stukje betekenis in ons beeld?</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup.gif"><p>Wel, het ziet er zeker uit als een kat. Dat is geweldig want het internet houdt van katten! Wat <em>ding</em> beste staat voor een kat in de schema's markup beschikbaar voor ons?</p><p>De betekenis in deze afbeelding is waarschijnlijk geen actie, uitzenddienst, medische gebeurtenisentiteit of plaats. Het is absoluut een creatief werk, meer specifiek een voorbeeld van een visueel werk, hoewel Google momenteel enkele wijzigingen aanbrengt die op korte termijn van invloed kunnen zijn op het gebruik van deze opmaak:</p><p><br></p><blockquote contenteditable="false"> <p>@ryanallen_com @googledevs @google nee, in plaats daarvan hebben we een aantal (hopelijk eenmalige) vertragingen die de toevoegingen van Feb integreren, d.w.z. http://t.co/09JUDuUIwW</p>- Dan Brickley (@danbri) 2 maart 2015 </blockquote> <p>Laten we de <code>type voorwerp</code> in de sectie-tag:</p><pre><section itemscope itemtype="https://schema.org/CreativeWork" > <img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_2.gif" > </section></pre><p>Dat is een goed begin, hoewel onze inhoud nog steeds grotendeels zonder betekenis is. Google, Bing, Yahoo en Yandex zijn er nu 100% zeker van dat onze inhoud een creatief werk is, maar niets anders. Laten we een meer betekenisvolle context toevoegen die is gericht op onze doelmarkt: webontwerpers.<br></p><h3>Optionele Microdata-eigenschappen</h3><p>Het is niet noodzakelijk voor mij om alle eigenschappen te vermelden die u kunt gebruiken met het Creative Work-itemtype, maar in plaats hiervan zijn er enkele met betrekking tot webontwerpers, die we hebben geïdentificeerd als onze doelgroep.</p><p>Laten we beginnen met het verklaren van alle dingen over deze inhoud die niet abstract zijn, maar in plaats daarvan concreet, stevig en onveranderlijk in hun betekenis zijn. </p><h4>Beeld</h4><p>Ten eerste is dit een afbeelding met een bronlocatie (<code>src</code>) op internet.</p><pre><img itemprop="image" src="images_12/improve-your-websites-discoverability-with-semantic-markup_2.gif" > </pre><h4>Schrijver</h4><p>Ik ben de auteur of maker van de digitale illustratie.</p><pre><meta itemprop="author" content="Ryan Allen" ></pre><h4>Publiek</h4><p>Ziet er goed uit! Laten we nu onze doelgroep toevoegen.</p><pre><meta itemprop="audience" content="web designers" ></pre><h4>Educatief gebruik</h4><p>Nu stellen we het type educatief gebruik in dat we voor deze afbeelding willen gebruiken, namelijk een <em>voorbeeld</em> in dit geval.</p><pre><meta itemprop="educationalUse" content="example" ></pre><h4>Familie vriendelijk</h4><p>Hier is niets over NSFW, dus laten we ervoor zorgen dat dat duidelijk is.</p><pre><meta itemprop="isFamilyFriendly" content="true" ></pre><h4>Karakter</h4><p>Wat hebben we het karakter van onze kat genoemd??</p><pre><meta itemprop="character" content="Vincenzo" ></pre><p>O ja. Dat is een vrij geweldige naam, hoewel het naar een meer abstract rijk gaat. Alles staat nu op het punt om helemaal abstract te worden. </p><h4>Wat betreft</h4><p>Laten we wat meer context toevoegen over de situatie in ons beeld met betrekking tot onze doelgroep.</p><pre><meta itemprop="about" content="Vincenzo the cat is sad that no one is discovering the online content he worked so hard to create. Such hurt. Very Sadness." ><br></pre><p>Laten we dit afmaken met een lijst met door komma's gescheiden, doelgerichte en relatieve zoekwoorden om de ontdekkingsfactor van onze inhoud boven de 9000 te krijgen.</p><pre><meta itemprop="keywords" content="designer, design, web design, seo, discoverability, open graph, twitter cards, microdata, google, bing, microsoft, yahoo, yandex, content, context, semantics, meaning, sad, cat, animation, gif, cute, illustration, tutsplus" > </pre><h4>bevestigen</h4><p>Het enige wat u hoeft te doen, is uw code valideren met Google, vervolgens Facebook en ten slotte met Twitter. Dit is hoe dat eruit ziet in:</p><h4>Facebook</h4><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_11.png"><h4>tjilpen</h4><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_12.png"><h4>Google</h4><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_13.png"><h2>Samenvatting</h2><p>Dus hoe ziet alles er samen uit?</p><pre><!DOCTYPE html> <html> <head> <title> Verlaten katten
Share
Uit de Chicago Manual of Style
Vrolijk vriend ... 
Accentsconagua