I denne opplæringen ser vi på å bygge mening i innholdet ditt med åpen grafikk, Twitter-kort og mikrodata. Ved å gjøre det blir innholdet ditt mer attraktivt, mer relevant og mer oppdaget for potensielle brukere.
Google, Facebook, Twitter og de andre plattformene du og jeg bruker til å dele og oppdage innhold, er fortsatt ikke i stand til å lese våre tanker. Maskiner som driver skyen er avhengige av deg og jeg, designere og utviklere, for å lære dem om meningen i innholdet vårt, og hvordan det relaterer til målgruppen. Ved å lære disse plattformene om abstraksjon og mening, la vi dem vise mer relevant, provoserende og oppdagbart innhold.
Hva er Discoverability?
Discoverability er den enkle som en maskin eller en person kan finne litt relevant informasjon på nettet.
Hvilken av disse Facebook-postene får mer oppmerksomhet?
Hvilken av disse tweets er jo mer provoserende?
Og hvilket av disse Googles søkeresultatene synes mer relevant for dine interesser?
Forskjellene ovenfor er klare. Hvis du ikke implementerer Facebooks Open Graph Protocol, Twitter's Card-system og Microdata for søkemotorer, vil innholdet ditt sannsynligvis bli ignorert til fordel for konkurrenternes mer relevantt viste innhold. I denne artikkelen vil jeg vise deg betydningen av å forstå målgruppen mens du implementerer disse systemene i semantisk oppslag.
Markup
For det første, hva er det egentlig markup?
"Et dokument markup språk er et moderne system for å annotere et dokument på en måte som er syntactically skille fra teksten. - Wikipedia
I enklere vilkår er det en måte å merke, annotere eller stilte et dokument med penner, blyanter eller datamaskiner på en måte som er symbolsk annerledes enn teksten du er markerer opp. Begrepet kommer fra korrekturlesere som ville markup manuskripter for redigering.
Fra Chicago Manual of Style
Prooflesers merker er en form for oppmåling. Husk disse fra engelskspråklig engelskspråklig klasse (eller var du for opptatt med å leke med din fancy Walkman for å være oppmerksom ?!)
Her er tre måter du kan markere et digitalt dokument for å indikere en overskrift:
HTML:
Jeg er den beste overskriften
Markdown
# # Nei, jeg er den beste overskriften
LaTeX
\ delen jeg er LaTeX
Nå som du har en klarere forståelse av hva LaTeX ... feiler, markup er, vi vil lage et grunnleggende HTML5-dokument med et enkelt innhold. Vi bruker den til å illustrere de forskjellige måtene vi kan bygge mening på i innholdet, noe som fører til en økning i dens oppdagbarhet.
HTML
Først oppretter du det opprinnelige HTML-dokumentet i tekstredigeringsprogrammet av ditt valg.
Det er så mye enklere enn måten det pleide å være. La oss nå legge til noe innhold!
Innhold
Her er vårt eneste innhold, et bilde av en veldig ulykkelig katt, i en seksjon inne i dokumentkroppen vår.
Cheer up mate ...
Tittel
Nå som vi vet hva innhold vi jobber med, kan vi legge til den første delen av kontekst til vår side. Vår gamle venn, </code> tag i dokumentets <code><head></code>. </p><pre><head> <title> Forlorn Feline
La oss gå videre til noe litt mer utfordrende (men fortsatt enkelt) med Facebooks åpne grafprotokoll!
Facebooks Open Graph Protocol
Den åpne grafprotokollen gjør det mulig for enhver nettside å bli en rik gjenstand i Facebooks sosiale diagram. Det gjør det mulig for enhver nettside å ha lignende funksjonalitet til et objekt på Facebook.
Facebooks åpne graf (samt Twitters kortsystem, som vi vil se på neste), fungerer med metadata som du legger til i websidene dine ' . Det samme stedet vi bare legger vår </code>. I tilfelle av Facebooks åpne graf protokoll er det <em>fire egenskaper</em> som kreves.</p><h3>Obligatorisk Open Graph Markup</h3><p>De fire krevde åpne grafegenskapene Facebook krever er: </p><ol> <li>Tittel</li> <li>Type</li> <li>Bilde</li> <li>URL</li> </ol><h4>Tittel</h4><p>Den første av disse er titteletiketten, som er tittelen på objektet ditt som det skal vises på Facebook.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_5.png"><p>Her er hvordan eksemplet mitt vil bli tittel når HTML-dokumentet deles på Facebook.</p><pre><meta property="og:title" content="Forlorn Feline" ></pre><p><strong>Merk</strong>: Hvis du oppretter en tittel som er forskjellig fra den opprinnelige tittelen, vil Facebook gi deg en feil når du feilsøker siden din. Facebook tillater forskjellen, men det vil ikke validere 100%. Jeg vet ikke hvorfor Facebook rynker på dette, hvis du har noen ideer, hvorfor gi meg beskjed!</p><h4>Type</h4><p>Den andre egenskapen Facebook krever, er typen av objekt som det vil vise brukere på plattformen.</p><p>Innholdet vårt representerer ikke musikk eller video. Det er heller ikke en artikkel, bok eller profil. Alt vi har igjen er at innholdet lever i et HTML-dokument, som når det lastes opp til en webserver, blir et nettsted.</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>Bilde</h4><p>Den tredje egenskapen Facebook krever er et bilde som representerer vårt objekt. Denne er ganske enkel!</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>Den fjerde og endelige egenskapen Facebook krever er URL-brukerne vil oppleve når de samhandler med objektet.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_8.png"><p>Akkurat som bildeegenskapen er denne ganske grei.</p><pre><meta property="og:url" content="http://ryanallen.com/forlorn-feline.html" > </pre><p>Det gjør det for alt som kreves. Det er på tide å bli mer abstrakt med <em>betydning</em> Vi sprøyter inn i innholdet vårt, og for det må vi identifisere målgruppen vår.</p><h3>Målgruppe</h3><p>Poenget med denne artikkelen er ikke å lære deg hvordan du identifiserer målgruppen din. Jeg vil imidlertid imponere på deg viktigheten av å vite hvem det er. Når du bygger kontekst inn i innholdet ditt, må du vite hvem du vil oppdage innholdet ditt, og hva de skal lære om det innholdet.</p><p>For innholdet i denne artikkelen, bildet av den ulykkelige katten, er målgruppen en webdesigner som ønsker å lære mer om funn (deg). La oss se hva som ser ut som det neste i valgfri merking, forstår Facebook.</p><h4>Valgfri abstrakt merking</h4><p>Vi kan legge til noen ekstra oppslag som en beskrivelse, som, mens det ikke er nødvendig, gjør det mye mer interessant for alle som skjer med innholdet vårt.</p><p>Så hva skal beskrivelsen vår være? Det bør være i forhold til målgruppen.</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>Flott! Husk hvordan jeg fortalte deg at Twitter fungerer på samme måte som Facebooks Open Graph Protocol? La oss ta en titt på det neste!</p><h2>Twitter</h2><p>Twitter krever forskjellige egenskaper, avhengig av korttypen du bruker. For dette eksempelet bruker vi standard Sammendragskort som krever disse fire egenskapene:</p><ol> <li>Kort type</li> <li>Attribution</li> <li>Tittel</li> <li>Beskrivelse</li> </ol><p>De fleste av disse egenskapene krever faktisk ikke at vi gjør noe ekstra arbeid. Hvorfor det?</p><blockquote>"Når Twitter-kortprosessoren ser etter koder på siden din, kontrollerer den først for Twitter-eiendommen, og hvis den ikke er til stede, faller den tilbake til den støttede Open Graph-egenskapen. Dette gjør det mulig for begge å bli definert på siden uavhengig, og minimerer mengden duplikatoppføring som kreves for å beskrive innholdet og opplevelsen. - Twitter </blockquote><h3>Minimerer duplikatmarkering</h3><p>Det er flott! Kodene vi ikke trenger å duplisere (selv om du kunne hvis du hadde grunn til) er: </p><ol> <li><code>og: tittel</code></li> <li><code>og: description</code></li> <li><code>og: image</code></li> </ol><p>Tre ned, to å gå!</p><h3>Kort type</h3><p>Først, la oss fortelle Twitter hvilken type innhold vi deler. Vi setter dette kortet til standard Sammendragskort når HTML-dokumentet deles på Twitter.</p><pre><meta name="twitter:card" content="summary" ></pre><p>Det var enkelt, hva er neste? Jeg håper det er noe gøy!</p><h3>Attribution</h3><p>Twitter krever en konto som tilskrives en Twitter-konto som tilhører innholdsskaperen og / eller innholdseieren. Hvis innholdet eies av en bedriftsside eller en bedriftsavdeling, (eller finnes på selskapets nettsted, men ikke eies av selskapet), kan du bruke en sidestilattribusjon.</p><p>Slik ser dette ut hvis det er vært på mitt personlige nettsted:</p><pre><meta name="twitter:creator" content="@ryanallen_com" ></pre><p>Slik ser det ut hvis Tuts + Web Design hostet HTML:</p><pre><meta name="twitter:creator" content="@ryanallen_com" > <meta name="twitter:site" content="@wdtuts" ></pre><p>Twitter må autentisere og hviteliste domenet for hver type Twitter-kort. Dette er enkelt og automatisert, selv om jeg ikke vet hva som er involvert hvis du blir svartelistet. Hvis noen har erfaring med dette, vil jeg gjerne lære mer.</p><p>Det er det for Twitter! God ting vi gjorde Åpne graf først, Twitter sparer mye tid ved å jobbe med andre plattformer til det beste av sin evne. Takk Twitter!</p><p>Tid til å besøke søkemotorene for nye, kontekstuelle og spennende måter å optimere innholdet på.</p><h2>Mikrodata og søkemotoroptimalisering</h2><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_10.png"><p>Først et raskt ord fra Microsoft:</p><blockquote>"Den 2. juni 2011 offentliggjorde [Microsoft] et samarbeid mellom Bing, Google og Yahoo for å opprette og støtte et standard sett av skjemaer for strukturert dataoppretting på nettsider. Selv om våre selskaper konkurrerer på mange måter, var det tydelig for oss at samarbeidet i dette rommet ville være bra for hver søkemotor enkeltvis og for bransjen som helhet. - Michael O'Connor </blockquote><p>Mikrodata er forskjellig fra den andre merkingen vi allerede har strukturert ved at den ikke lever i dokumenthodet.</p><p>Vi vil bruke mikrodata for å infisere sammenheng i innholdet i vårt HTML-dokumentets kropp. Søkemotorer bruker våre data til å forbedre oppdagelsen av innholdet for brukerne.</p><p>Maskinene tror på hva vi forteller dem. For nå minst ... </p><h3>Obligatorisk Microdata Markup </h3><p>Følgende tagger kreves for hvert element du ønsker å bygge mening inn i. </p><ol> <li>Vareområde</li> <li>Elementtype</li> </ol><p>Først må vi identifisere <em>ting</em> vi beskriver. La oss ha det gøy med semantikk og bygge litt kontekst eller mening i innholdet vårt rettet mot målgruppen vår.</p><p>Husk at vi bare har ett enkelt innhold. Hva er en tydelig del av meningen som finnes i bildet vårt?</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup.gif"><p>Vel, det ser ut som en katt. Det er flott siden internett elsker katter! Hva <em>ting</em> best representerer en katt i skjemaoppslaget tilgjengelig for oss?</p><p>Betydningen i dette bildet er sannsynligvis ikke en handling, kringkastingstjeneste, hendelse, medisinsk enhet eller sted. Det er definitivt et kreativt arbeid, mer spesifikt er det et eksempel på et visuelt kunstverk, selv om Google for tiden gjør noen endringer som kan påvirke bruken av denne oppslaget på kort sikt:</p><p><br></p><blockquote contenteditable="false"> <p>@ryanallen_com @googledevs @google nei, heller, vi har noen (forhåpentligvis en gang) forsinkelser som integrerer Febs tillegg, dvs. http://t.co/09JUDuUIwW</p>- Dan Brickley (@danbri) 2. mars 2015 </blockquote> <p>La oss erklære <code>elementtype</code> inne i delen taggen:</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>Det er en god start, selv om innholdet vårt fortsatt er det meste meningsløst. Google, Bing, Yahoo og Yandex er nå 100% sikre på at innholdet vårt er et kreativt arbeid, men ikke noe annet. La oss legge til litt mer meningsfylt kontekst rettet mot vårt målmarked: webdesignere.<br></p><h3>Valgfrie Microdata Properties</h3><p>Det er ikke nødvendig for meg å liste alle egenskapene du kan bruke med elementet Creative Work, her er i stedet noen forhold til webdesignere, som vi identifiserte som målgruppe.</p><p>La oss begynne med å erklære alle tingene om dette innholdet som ikke er abstrakte, men er i stedet konkrete, faste og uendelige i deres betydning. </p><h4>Bilde</h4><p>Først er dette et bilde med en kildeplassering (<code>src</code>) på internett.</p><pre><img itemprop="image" src="images_12/improve-your-websites-discoverability-with-semantic-markup_2.gif" > </pre><h4>Forfatter</h4><p>Jeg er forfatteren eller skaperen av den digitale illustrasjonen.</p><pre><meta itemprop="author" content="Ryan Allen" ></pre><h4>Publikum</h4><p>Ser bra ut! La oss nå legge til målgruppen vår.</p><pre><meta itemprop="audience" content="web designers" ></pre><h4>Utdanningsbruk</h4><p>Nå skal vi angi hvilken type pedagogisk bruk vi har til hensikt for dette bildet, som er en <em>eksempel</em> i dette tilfellet.</p><pre><meta itemprop="educationalUse" content="example" ></pre><h4>Familievennlig</h4><p>Ingenting om dette er NSFW, så la oss sørge for at det er klart.</p><pre><meta itemprop="isFamilyFriendly" content="true" ></pre><h4>Karakter</h4><p>Hva heter vi katten karakteren vår?</p><pre><meta itemprop="character" content="Vincenzo" ></pre><p>Oh ja. Det er et ganske kjempebra navn, selv om det beveger seg inn i et mer abstrakt rike. Ting er i ferd med å bli alt abstrakt nå. </p><h4>Handle om</h4><p>La oss legge til litt mer kontekst om situasjonen i bildet vårt relatert til målgruppen vår.</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>La oss fullføre dette med en liste over kommaavgrensede, målrettede og relative søkeord for å støte på innholdets oppdagelsesfaktor over 9000.</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>Validere</h4><p>Alt som er igjen å gjøre er å validere koden din med Google, deretter Facebook, og til slutt med Twitter. Her er det som ser ut i:</p><h4>Facebook</h4><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_11.png"><h4>Twitter</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>Sammendrag</h2><p>Så hvordan ser alt ut sammen?</p><pre><!DOCTYPE html> <html> <head> <title> Forlorn Feline
Share
Fra Chicago Manual of Style
Cheer up mate ... 
Accentsconagua