I den här handledningen ser vi på att skapa mening i ditt innehåll med öppen graf, Twitter-kort och mikrodata. Genom att göra så blir innehållet mer attraktivt, mer relevant och mer upptäckt för potentiella användare.
Google, Facebook, Twitter och de andra plattformar du och jag använder för att dela och upptäcka innehåll kan fortfarande inte läsa våra sinnen. Maskinerna som driver molnet är beroende av dig och jag, designers och utvecklare, för att lära dem om innebörden i vårt innehåll och hur det hänför sig till vår målgrupp. Genom att lära dessa plattformar om abstraktion och mening tillåter vi dem att visa mer relevant, provocerande och upptäckbart innehåll.
Vad är upptäckbarhet?
Upptäckbarhet är den lätthet som en maskin eller person kan hitta lite relevant information online.
Vilken av dessa Facebook-inlägg blir mer av din uppmärksamhet?
Vilken av dessa tweets är desto mer provocerande?
Och vilket av dessa Googles sökresultat är mer relevant för dina intressen?
Ovanstående skillnader är tydliga. Om du inte implementerar Facebooks öppna grafprotokoll, Twitters kortsystem och Microdata för sökmotorer, kommer ditt innehåll sannolikt att ignoreras till förmån för konkurrenternas mer relevantt visade innehåll. I den här artikeln ska jag visa dig vikten av att förstå din målgrupp när du implementerar dessa system i din semantiska markup.
Markup
För det första, vad exakt är markup?
"Ett dokument markup språk är ett modernt system för annotering av ett dokument på ett sätt som är synaktiskt urskiljbart från texten. - Wikipedia
I enklare termer är det ett sätt att markera, kommentera eller utforma ett dokument med pennor, pennor eller datorer på ett sätt som är symboliskt annorlunda än texten du är markering upp. Termen kommer från korrekturläsare som skulle markup manuskript för redigeringar.
Från Chicago Manual of Style
Proofreaders märken är en form av uppmärksamhet. Kom ihåg dessa från engelska i klassskolan (eller var du upptagen med att leka med din fina Walkman för att vara uppmärksam ?!)
Här är tre sätt att markera ett digitalt dokument för att ange ett rubrik:
HTML:
Jag är den bästa rubriken
Prissänkning
## Nej, jag är den bästa rubriken
Latex
\ avsnitt jag är LaTeX
Nu när du har en tydligare förståelse för vad LaTeX ... är fel, markup är, vi kommer att skapa ett grundläggande HTML5-dokument med en enda bit innehåll. Vi använder den för att illustrera olika sätt att skapa mening i det innehållet, vilket leder till en ökad upptäcktbarhet.
html
Skapa först det ursprungliga HTML-dokumentet i textredigeraren efter eget val.
Det är så mycket enklare än vad det brukade vara. Låt oss nu lägga till lite innehåll!
Innehåll
Här är vår enda innehållsinnehåll, en bild av en väldigt olycklig katt, i ett avsnitt i vår dokumentkropp.
Uppmuntra kompis ...
Titel
Nu när vi vet vilket innehåll vi jobbar med kan vi lägga till den första bit av sammanhang till vår sida. Vår gamla vän, </code> tagga i dokumentets <code><head></code>. </p><pre><head> <title> Forlorn Feline
Låt oss gå vidare till något lite mer utmanande (men ändå enkelt) med Facebooks öppna grafprotokoll!
Facebooks öppna grafprotokoll
Open Graph Protocol möjliggör att en webbsida blir ett rikt objekt i Facebooks sociala graf. Det tillåter att någon webbsida har liknande funktionalitet till ett objekt på Facebook.
Facebooks öppna diagram (liksom Twitters kortsystem, som vi kommer att se på nästa) fungerar med metadata som du lägger till på dina webbsidor " . Samma plats vi bara sätta vår </code>. I fallet med Facebooks öppna grafprotokoll finns det <em>fyra egenskaper</em> som krävs.</p><h3>Obligatorisk öppen grafmarkering</h3><p>De fyra krävs öppna grafegenskaperna Facebook kräver är: </p><ol> <li>Titel</li> <li>Typ</li> <li>Bild</li> <li>URL</li> </ol><h4>Titel</h4><p>Den första av dessa är titeln taggen, som är titeln på ditt objekt som det ska visas på Facebook.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_5.png"><p>Så här är mitt exempel titeln när HTML-dokumentet delas på Facebook.</p><pre><meta property="og:title" content="Forlorn Feline" ></pre><p><strong>Notera</strong>: Om du skapar en titel som skiljer sig från den ursprungliga titeln, kommer Facebook att ge dig ett fel när du felsöker din sida. Facebook tillåter skillnaden men det kommer inte att validera 100%. Jag vet inte varför Facebook rynkar på detta, om du har några idéer varför låt mig veta!</p><h4>Typ</h4><p>Den andra egenskapen Facebook kräver är den typ av objekt som det kommer att visa användare på sin plattform.</p><p>Vårt innehåll representerar inte musik eller video. Det är inte heller någon artikel, bok eller profil. Allt vi har kvar är det faktum att vårt innehåll lever i ett HTML-dokument, som när det laddas upp till en webbserver, blir en webbplats.</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>Bild</h4><p>Den tredje egenskapen Facebook kräver är en bild som representerar vårt objekt. Den här är ganska 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 fjärde och sista egenskapen Facebook kräver är URL-användare som kommer att uppleva när de interagerar med objektet.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_8.png"><p>Precis som bildegenskapen är den här ganska enkel.</p><pre><meta property="og:url" content="http://ryanallen.com/forlorn-feline.html" > </pre><p>Det gör det för allt som krävs. Det är dags att bli mer abstrakt med <em>menande</em> Vi sprutar in i vårt innehåll, och för det behöver vi identifiera vår målgrupp.</p><h3>Målgrupp</h3><p>Punkten i den här artikeln är inte att lära dig hur du identifierar din målgrupp. Jag vill dock imponera på vikten av att veta vem det är. När du bygger kontext i ditt innehåll måste du veta vem du vill upptäcka ditt innehåll och vad de ska lära sig om det innehållet.</p><p>För innehållet i denna artikel, bilden av den olyckliga katten, är målgruppen en webbdesigner som vill lära sig mer om upptäckbarhet (dig). Låt oss se hur det ser ut som nästa i valfri markering förstår Facebook.</p><h4>Valfri abstrakt markering</h4><p>Vi kan lägga till ytterligare tillägg som en beskrivning, som, trots att det inte behövs, gör det mycket intressantare för alla som händer om vårt innehåll.</p><p>Så vad ska vår beskrivning vara? Det borde vara i förhållande till 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>Bra! Kom ihåg hur jag sa till dig att Twitter fungerar på ett sätt som liknar Facebooks öppna grafprotokoll? Låt oss ta en titt på det nästa!</p><h2>Twitter</h2><p>Twitter kräver olika egenskaper beroende på vilken korttyp du använder. För det här exemplet använder vi standard Sammanfattningskortet som kräver dessa fyra egenskaper:</p><ol> <li>Kort typ</li> <li>Erkännande</li> <li>Titel</li> <li>Beskrivning</li> </ol><p>De flesta av dessa egenskaper kräver inte att vi gör något extra arbete. Varför är det så?</p><blockquote>"När Twitter-kortprocessorn letar efter taggar på din sida, kontrollerar den först för egenskapen Twitter, och om den inte finns, faller den tillbaka till den stödda Open Graph-egenskapen. Detta gör det möjligt för båda att definieras på sidan oberoende, och minimerar mängden duplikat markup som krävs för att beskriva ditt innehåll och erfarenhet. - Twitter </blockquote><h3>Minimera dubbelmarkering</h3><p>Toppen! De taggar vi inte behöver duplicera (även om du kunde om du hade anledning att) är: </p><ol> <li><code>og: titel</code></li> <li><code>og: beskrivning</code></li> <li><code>og: image</code></li> </ol><p>Tre ner, två att gå!</p><h3>Kort typ</h3><p>Låt oss först tala om för Twitter vilken typ av innehåll vi delar. Vi ställer in detta kort till standard Sammanfattningskort när HTML-dokumentet delas på Twitter.</p><pre><meta name="twitter:card" content="summary" ></pre><p>Det var enkelt, vad är nästa? Jag hoppas det är något häftigt!</p><h3>Erkännande</h3><p>Twitter kräver ett konto som ska tillskrivas ett Twitter-konto som tillhör innehållsskaparen och / eller innehållsägaren. Om innehållet ägs av en företagsida eller en företagsavdelning, (eller finns på företagets webbplats men ej ägs av företaget) kan du använda en site style attribution.</p><p>Så här ser det ut om det finns värd på min personliga sida:</p><pre><meta name="twitter:creator" content="@ryanallen_com" ></pre><p>Så här ser det ut om Tuts + Web Design värd HTML:</p><pre><meta name="twitter:creator" content="@ryanallen_com" > <meta name="twitter:site" content="@wdtuts" ></pre><p>Twitter måste verifiera och vitlista domänen för varje typ av Twitter-kort. Det här är enkelt och automatiserat, men jag vet inte vad som är inblandat om du får svartlista. Om någon har erfarenhet av detta skulle jag vilja lära mig mer.</p><p>Det är det för Twitter! Bra vi gjorde Open Graph först, Twitter sparar mycket tid genom att arbeta med andra plattformar till bästa möjliga förmåga. Tack Twitter!</p><p>Tid att återvända sökmotorerna för några nya, kontextuella och spännande sätt att optimera ditt innehåll.</p><h2>Mikrodata och sökmotoroptimering</h2><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_10.png"><p>Först ett snabbt ord från Microsoft:</p><blockquote>"Den 2 juni [2011] tillkännagav [Microsoft] ett samarbete mellan Bing, Google och Yahoo för att skapa och stödja en standard uppsättning scheman för strukturerad datauppmärkning på webbsidor. Även om våra företag konkurrerar på många sätt var det uppenbart för oss att samarbete i detta utrymme skulle vara bra för varje sökmotor individuellt och för branschen som helhet. - Michael O'Connor </blockquote><p>Mikrodata skiljer sig från den andra markeringen som vi redan har strukturerat genom att den inte lever i dokumenthuvudet.</p><p>Vi använder mikrodata för att införa sammanhang i vårt innehåll i vårt HTML-dokuments kropp. Sökmotorer använder våra data för att förbättra upptäckten av vårt innehåll för sina användare.</p><p>Maskinerna tror vad vi berättar för dem. För nu åtminstone ... </p><h3>Obligatorisk Microdata Markup </h3><p>Följande taggar krävs för varje objekt du vill bygga in i. </p><ol> <li>Artikelomfattning</li> <li>Objekttyp</li> </ol><p>Först måste vi identifiera <em>sak</em> vi beskriver. Låt oss ha roligt med semantik och bygga lite kontext eller mening i vårt innehåll riktat till vår målgrupp.</p><p>Kom ihåg att vi bara har en singel innehåll. Vad är en uppenbar bit av mening som finns i vår bild?</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup.gif"><p>Tja, det ser ut som en katt. Det är bra eftersom internet älskar katter! Vad <em>sak</em> bäst representerar en katt i schemas markup tillgänglig för oss?</p><p>Betydelsen i denna bild är förmodligen inte en åtgärd, sändningstjänst, händelse medicinsk enhet eller ort. Det är definitivt ett kreativt arbete, mer specifikt är det ett exempel på ett visuellt konstverk, även om Google för närvarande gör några ändringar som kan påverka användningen av denna markup på kort sikt:</p><p><br></p><blockquote contenteditable="false"> <p>@ryanallen_com @googledevs @google nej, snarare vi har några (förhoppningsvis enstaka) förseningar som integrerar Feb: s tillägg, dvs http://t.co/09JUDuUIwW</p>- Dan Brickley (@danbri) 2 mars 2015 </blockquote> <p>Låt oss förklara <code>Objekttyp</code> inuti sektionstaggen:</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 är en bra start, men vårt innehåll är fortfarande mest meningslöst. Google, Bing, Yahoo och Yandex är nu 100% säkra på att vårt innehåll är ett kreativt arbete, men inget annat. Låt oss lägga till ett mer meningsfullt sammanhang riktat till vår målmarknad: webbdesigners.<br></p><h3>Valfria Mikrodata Egenskaper</h3><p>Det är inte nödvändigt för mig att lista alla egenskaper du kan använda med kategorin Creative Work, här är istället några relativt till webbdesigners, som vi identifierade som vår målgrupp.</p><p>Låt oss börja med att deklarera alla saker om detta innehåll som inte är abstrakta, men är istället konkreta, fasta och oföränderliga i sin mening. </p><h4>Bild</h4><p>För det första är det en bild med en källplats (<code>src</code>) på webben.</p><pre><img itemprop="image" src="images_12/improve-your-websites-discoverability-with-semantic-markup_2.gif" > </pre><h4>Författare</h4><p>Jag är författaren eller skaparen av den digitala illustrationen.</p><pre><meta itemprop="author" content="Ryan Allen" ></pre><h4>Publik</h4><p>Ser bra ut! Låt oss nu lägga till vår målgrupp.</p><pre><meta itemprop="audience" content="web designers" ></pre><h4>Utbildningsanvändning</h4><p>Nu ska vi ange vilken typ av utbildningsanvändning vi avser för denna bild, vilket är en <em>exempel</em> I detta fall.</p><pre><meta itemprop="educationalUse" content="example" ></pre><h4>Familjevänlig</h4><p>Ingenting om detta är NSFW, så låt oss se till att det är klart.</p><pre><meta itemprop="isFamilyFriendly" content="true" ></pre><h4>Karaktär</h4><p>Vad heter vi vår kattkaraktär?</p><pre><meta itemprop="character" content="Vincenzo" ></pre><p>Åh ja. Det är ett ganska häftigt namn, även om det rör sig in i en mer abstrakt rike. Saker håller på att bli allt abstrakt nu. </p><h4>Handla om</h4><p>Låt oss lägga till lite mer kontext om situationen i vår bild relaterad till vår målgrupp.</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>Låt oss avsluta med en lista med kommaavgränsade, riktade och relativa sökord för att stöta på innehållets upptäcktfaktor över 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>Bekräfta</h4><p>Allt som är kvar att göra är att validera din kod med Google, sedan Facebook, och slutligen med Twitter. Det här ser ut som:</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>Sammanfattning</h2><p>Så hur ser allt ut tillsammans?</p><pre><!DOCTYPE html> <html> <head> <title> Forlorn Feline
Share
Från Chicago Manual of Style
Uppmuntra kompis ... 
Accentsconagua