In questo tutorial vedremo come costruire un significato nei tuoi contenuti con grafico aperto, schede Twitter e microdati. In questo modo i tuoi contenuti saranno più attraenti, più pertinenti e più facilmente individuabili per i potenziali utenti.
Google, Facebook, Twitter e le altre piattaforme che tu e io utilizziamo per condividere e scoprire contenuti non sono ancora in grado di leggere le nostre menti. Le macchine che alimentano il cloud si affidano a te e io, designer e sviluppatori, per insegnare loro il significato contenuto nei nostri contenuti e come si rapporta al nostro pubblico di destinazione. Insegnando a queste piattaforme l'astrazione e il significato, permettiamo loro di mostrare contenuti più pertinenti, provocatori e rilevabili.
Cos'è Discoverability?
La rilevabilità è la facilità con cui una macchina o una persona possono trovare un po 'di informazioni rilevanti online.
Quale di questi post di Facebook ha più la tua attenzione?
Quale di questi tweet è il più provocatorio?
E quale di questi risultati di ricerca di Google è più pertinente ai tuoi interessi?
Le differenze di cui sopra sono chiare. Se non stai implementando il protocollo Open Graph di Facebook, il sistema di schede di Twitter e i microdati per i motori di ricerca, i tuoi contenuti verranno probabilmente ignorati a favore dei contenuti più pertinenti della tua concorrenza. In questo articolo ti mostrerò l'importanza di comprendere il tuo pubblico di destinazione mentre implementa questi sistemi nel tuo markup semantico.
markup
Innanzitutto, cosa è esattamente markup?
"Un linguaggio di markup del documento è un sistema moderno per annotare un documento in modo sintatticamente distinguibile dal testo. - Wikipedia
In termini più semplici, è un modo per marcare, annotare o modellare un documento con penne, matite o computer in un modo che sembra diverso dal testo che sei marcatura. Il termine deriva da correttori di bozze che lo farebbero markup manoscritti per modifiche.
Dal manuale di stile di Chicago
I voti dei boicottisti sono una forma di markup. Ricorda queste lezioni di inglese della scuola media (o eri troppo impegnato a giocare con il tuo bravo Walkman per prestare attenzione ?!)
Ecco tre modi per contrassegnare un documento digitale per indicare un'intestazione:
HTML:
Sono la migliore direzione
riduione di prezzo
## No I Am the Best Heading
LaTeX
\ section I'm LaTeX
Ora che hai una comprensione più chiara di ciò che LaTeX ... err, markup è, creeremo un documento HTML5 di base con un singolo contenuto. Lo useremo per illustrare i diversi modi in cui possiamo costruire un significato in quel contenuto, portando ad un aumento della sua rilevabilità.
HTML
Innanzitutto, crea il documento HTML iniziale nell'editor di testo di tua scelta.
È molto più semplice di come era prima. Ora aggiungiamo del contenuto!
Soddisfare
Ecco il nostro singolo pezzo di contenuto, l'immagine di un gatto molto infelice, in una sezione all'interno del corpo del documento.
Allegri amico ...
Titolo
Ora che sappiamo con quali contenuti stiamo lavorando possiamo aggiungere il primo bit di contesto alla nostra pagina Il nostro vecchio amico, </code> tag nel documento <code><head></code>. </p><pre><head> <title> Follia felina
Passiamo a qualcosa di un po 'più impegnativo (anche se ancora semplice) con l'Open Graph Protocol di Facebook!
Open Graph Protocol di Facebook
L'Open Graph Protocol consente a qualsiasi pagina Web di diventare un oggetto ricco nel social graph di Facebook. Permette a qualsiasi pagina web di avere funzionalità simili a un oggetto su Facebook.
Il grafico aperto di Facebook (così come il sistema di carte di Twitter, che vedremo in seguito) funziona con i metadati che aggiungi all'interno delle tue pagine web " . Lo stesso posto in cui abbiamo appena messo la nostra </code>. Nel caso del protocollo grafico aperto di Facebook ci sono <em>quattro proprietà</em> quali sono richiesti.</p><h3>Richiesto Markup grafico aperto</h3><p>Le quattro proprietà del grafico aperto richieste da Facebook richiedono: </p><ol> <li>Titolo</li> <li>genere</li> <li>Immagine</li> <li>URL</li> </ol><h4>Titolo</h4><p>Il primo di questi è il tag title, che è il titolo del tuo oggetto così come dovrebbe apparire su Facebook.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_5.png"><p>Ecco come il mio esempio verrà intitolato quando il documento HTML è condiviso su Facebook.</p><pre><meta property="og:title" content="Forlorn Feline" ></pre><p><strong>Nota</strong>: Se crei un titolo diverso dal titolo originale, Facebook ti darà un errore durante il debug della tua pagina. Facebook consente la differenza ma non convalida il 100%. Non so perché Facebook si acciglia su questo, se hai qualche idea per cui fammelo sapere!</p><h4>genere</h4><p>La seconda proprietà che Facebook richiede è il tipo di oggetto che mostrerà agli utenti sulla sua piattaforma.</p><p>Il nostro contenuto non rappresenta musica o video. Neanche un articolo, un libro o un profilo. Tutto quello che ci rimane è il fatto che il nostro contenuto risiede in un documento HTML, che quando viene caricato su un server web diventa un sito web.</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>Immagine</h4><p>La terza proprietà richiesta da Facebook è un'immagine che rappresenta il nostro oggetto. Questo è piuttosto semplice!</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>La quarta ed ultima proprietà richiesta da Facebook è l'URL che gli utenti sperimenteranno durante l'interazione con l'oggetto.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_8.png"><p>Proprio come la proprietà dell'immagine, questa è piuttosto semplice.</p><pre><meta property="og:url" content="http://ryanallen.com/forlorn-feline.html" > </pre><p>Questo lo fa per tutto ciò che è richiesto. È tempo di diventare più astratti con il <em>senso</em> ci stiamo iniettando nei nostri contenuti e per questo abbiamo bisogno di identificare il nostro pubblico di destinazione.</p><h3>Destinatari</h3><p>Il punto di questo articolo non è quello di insegnarti come identificare il tuo pubblico di destinazione. Tuttavia, voglio impressionare l'importanza di sapere chi sia. Quando sviluppi il contesto nei tuoi contenuti, devi sapere chi vuoi scoprire i tuoi contenuti e cosa dovrebbero imparare su quel contenuto.</p><p>Per il contenuto di questo articolo, l'immagine del gatto dall'aspetto infelice, il pubblico di destinazione è un web designer che vuole saperne di più sulla scoperta (tu). Vediamo cosa succede dopo nel markup opzionale di Facebook.</p><h4>Markup astratto opzionale</h4><p>Possiamo aggiungere un ulteriore markup come una descrizione, che, sebbene non richiesto, lo rende molto più interessante per chiunque si trovi sul nostro contenuto.</p><p>Quindi quale dovrebbe essere la nostra descrizione? Dovrebbe essere relativo al pubblico di destinazione.</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>Grande! Ricorda come ti ho detto che Twitter funziona in modo simile al protocollo Open Graph di Facebook? Diamo un'occhiata a questo prossimo!</p><h2>cinguettio</h2><p>Twitter richiede proprietà diverse a seconda del tipo di carta che stai utilizzando. Per questo esempio utilizzeremo la scheda riassuntiva predefinita che richiede queste quattro proprietà:</p><ol> <li>Tipo di carta</li> <li>Attribuzione</li> <li>Titolo</li> <li>Descrizione</li> </ol><p>La maggior parte di queste proprietà in realtà non ci impone di fare alcun lavoro aggiuntivo. Perché?</p><blockquote>"Quando il processore della scheda Twitter cerca i tag sulla tua pagina, prima controlla la proprietà di Twitter e, se non presente, torna alla proprietà Open Graph supportata. Ciò consente di definire entrambi sulla pagina in modo indipendente e riduce al minimo la quantità di markup duplicato richiesto per descrivere il contenuto e l'esperienza. - Twitter </blockquote><h3>Riduzione al minimo del markup duplicato</h3><p>È fantastico! I tag che non abbiamo bisogno di duplicare (anche se potresti avere una ragione per farlo) sono: </p><ol> <li><code>og: titolo</code></li> <li><code>og: Descrizione</code></li> <li><code>og: Immagine</code></li> </ol><p>Tre giù, due per andare!</p><h3>Tipo di carta</h3><p>Per prima cosa diamo a Twitter il tipo di contenuto che condividiamo. Imposteremo questa scheda sulla scheda riassuntiva predefinita quando il documento HTML è condiviso su Twitter.</p><pre><meta name="twitter:card" content="summary" ></pre><p>E 'stato semplice, qual è il prossimo? Spero sia qualcosa di fantastico!</p><h3>Attribuzione</h3><p>Twitter richiede che un account venga attribuito con un account Twitter appartenente al creatore di contenuti e / o al proprietario dei contenuti. Se il contenuto è di proprietà di una pagina aziendale o di un reparto aziendale (o esiste sul sito aziendale ma non è di proprietà dell'azienda) è possibile utilizzare un'attribuzione dello stile del sito.</p><p>Ecco come apparirà se ospitato sul mio sito personale:</p><pre><meta name="twitter:creator" content="@ryanallen_com" ></pre><p>Ecco come sarebbe se Tuts + Web Design ospitasse l'HTML:</p><pre><meta name="twitter:creator" content="@ryanallen_com" > <meta name="twitter:site" content="@wdtuts" ></pre><p>Twitter dovrà autenticare e white-list il dominio per ogni tipo di Twitter Card. Questo è semplice e automatizzato, anche se non so cosa sia coinvolto se si ottiene la lista nera. Se qualcuno ha esperienza con questo mi piacerebbe imparare di più.</p><p>Questo è tutto per Twitter! Per fortuna abbiamo aperto Open Graph, Twitter risparmia molto tempo lavorando con altre piattaforme al meglio delle sue possibilità. Grazie a Twitter!</p><p>È tempo di rivisitare i motori di ricerca per alcuni nuovi, contestuali ed entusiasmanti modi per ottimizzare i tuoi contenuti.</p><h2>Microdati e ottimizzazione dei motori di ricerca</h2><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_10.png"><p>Innanzitutto, una breve parola di Microsoft:</p><blockquote>"Il 2 giugno [2011] abbiamo [Microsoft] annunciato una collaborazione tra Bing, Google e Yahoo per creare e supportare un set standard di schemi per il markup dei dati strutturati sulle pagine web. Anche se le nostre aziende competono in molti modi, è stato evidente per noi che la collaborazione in questo spazio sarebbe stata positiva per ogni motore di ricerca individuale e per l'industria nel suo insieme. - Michael O'Connor </blockquote><p>I microdati sono diversi dagli altri markup che abbiamo già strutturato in quanto non vivono nella testa del documento.</p><p>Utilizzeremo i microdati per infondere il contesto nel nostro contenuto nel corpo del nostro documento HTML. I motori di ricerca useranno i nostri dati per migliorare la reperibilità dei nostri contenuti per i loro utenti.</p><p>Le macchine credono in ciò che diciamo loro. Per ora almeno ... </p><h3>Microdata Markup richiesto </h3><p>I seguenti tag sono necessari per ogni elemento in cui desideri creare un significato. </p><ol> <li>Ambito dell'oggetto</li> <li>Tipo di elemento</li> </ol><p>Per prima cosa dobbiamo identificare il <em>cosa</em> stiamo descrivendo. Divertiamoci con la semantica e costruiamo un contesto o un significato nei nostri contenuti rivolti al nostro pubblico di destinazione.</p><p>Ricorda che abbiamo un solo pezzo di contenuto. Qual è un evidente significato di significato contenuto nella nostra immagine?</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup.gif"><p>Beh, sembra proprio un gatto. È fantastico visto che Internet ama i gatti! Che cosa <em>cosa</em> rappresenta al meglio un gatto nel markup degli schemi a nostra disposizione?</p><p>Il significato contenuto in questa immagine non è probabilmente un'azione, un servizio di trasmissione, un'entità medica dell'evento o un luogo. È sicuramente un'opera creativa, più specificamente un esempio di grafica visiva, anche se Google sta apportando alcune modifiche che potrebbero influire sull'uso di questo markup a breve termine:</p><p><br></p><blockquote contenteditable="false"> <p>@ryanallen_com @googledevs @google no, piuttosto abbiamo alcuni ritardi (si spera uno fuori) che integrano le aggiunte di febbraio, ad esempio http://t.co/09JUDuUIwW</p>- Dan Brickley (@danbri) 2 marzo 2015 </blockquote> <p>Dichiariamo il <code>tipo di elemento</code> all'interno del tag della sezione:</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>Questo è un buon inizio, anche se il nostro contenuto è ancora per lo più privo di significato. Google, Bing, Yahoo e Yandex ora sono sicuri al 100% che il nostro contenuto è un lavoro creativo, ma nient'altro. Aggiungiamo un altro contesto più significativo rivolto al nostro mercato di riferimento: i web designer.<br></p><h3>Proprietà dei microdati opzionali</h3><p>Non è necessario per me elencare tutte le proprietà che puoi usare con il tipo di oggetto Creative Work, qui invece sono alcuni relativi ai web designer, che abbiamo identificato come il nostro target di riferimento.</p><p>Iniziamo dichiarando tutte le cose su questo contenuto che non sono astratte ma sono invece concrete, ferme e immutabili nel loro significato. </p><h4>Immagine</h4><p>Innanzitutto, questa è un'immagine con una posizione di origine (<code>src</code>) In rete.</p><pre><img itemprop="image" src="images_12/improve-your-websites-discoverability-with-semantic-markup_2.gif" > </pre><h4>Autore</h4><p>Sono l'autore, o il creatore, dell'illustrazione digitale.</p><pre><meta itemprop="author" content="Ryan Allen" ></pre><h4>Pubblico</h4><p>Guardando bene! Aggiungiamo ora il nostro pubblico di destinazione.</p><pre><meta itemprop="audience" content="web designers" ></pre><h4>Uso educativo</h4><p>Ora imposteremo il tipo di uso educativo che intendiamo per questa immagine, che è un <em>esempio</em> in questo caso.</p><pre><meta itemprop="educationalUse" content="example" ></pre><h4>Per famiglie</h4><p>Niente su questo è NSFW, quindi assicuriamoci che sia chiaro.</p><pre><meta itemprop="isFamilyFriendly" content="true" ></pre><h4>Personaggio</h4><p>Come abbiamo chiamato il nostro personaggio gatto?</p><pre><meta itemprop="character" content="Vincenzo" ></pre><p>O si. È un nome davvero fantastico, anche se si sta spostando in un regno più astratto. Le cose stanno per diventare completamente astratte ora. </p><h4>Di</h4><p>Aggiungiamo un po 'più di contesto sulla situazione nella nostra immagine relativa al nostro pubblico di destinazione.</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>Completiamo questo con un elenco di parole chiave delimitate, mirate e relative virgola per superare il fattore di rilevabilità del nostro contenuto oltre 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>Convalidare</h4><p>Tutto ciò che resta da fare è convalidare il tuo codice con Google, poi Facebook e infine con Twitter. Ecco come appare in:</p><h4>Facebook</h4><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_11.png"><h4>cinguettio</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>Sommario</h2><p>Quindi cosa sembra tutto insieme?</p><pre><!DOCTYPE html> <html> <head> <title> Follia felina
Share
Dal manuale di stile di Chicago
Allegri amico ... 
Accentsconagua