În acest tutorial vom analiza construirea înțelesului în conținutul dvs. cu grafic deschis, carduri Twitter și microdate. Prin aceasta, conținutul dvs. va fi mai atractiv, mai relevant și mai ușor de descoperit de potențialii utilizatori.
Google, Facebook, Twitter și celelalte platforme pe care le folosim pentru a partaja și pentru a descoperi conținut nu ne mai pot citi mintea. Mașinile care alimentează norul se bazează pe dvs. și pe mine, designeri și dezvoltatori, pentru a le învăța despre semnificația conținută în conținutul nostru și despre modul în care se referă la publicul țintă. Prin predarea acestor platforme despre abstractizare și înțeles le permitem să afișeze conținut mai relevant, mai provocator și mai ușor de descoperit.
Ce este descoperirea?
Descoperirea este ușurința cu care o mașină sau o persoană poate găsi un pic de informații relevante online.
Care dintre aceste postări pe Facebook devine din ce în ce mai importantă?
Care dintre aceste tweets este mai provocator?
Și care dintre aceste rezultate ale căutării Google pare mai relevant pentru interesele dvs.?
Diferențele de mai sus sunt clare. Dacă nu implementați Facebook Open Graph Protocol, sistemul de carduri Twitter și Microdata pentru motoarele de căutare, este posibil ca conținutul dvs. să fie ignorat în favoarea conținutului afișat de concurenții dvs. mai relevant. În acest articol vă voi arăta importanța înțelegerii publicului țintă în timp ce implementați aceste sisteme în marcarea semantică.
Marcaj
În primul rând, ce anume este marcare?
"Un limbaj de marcare a documentelor este un sistem modern de adnotare a unui document într-un mod care se deosebește sintactic de text. - Wikipedia
În termeni mai simpli, este o modalitate de a marca, adnota sau stil un document cu pixuri, creioane sau computere într-un mod care să pară simbolic diferit de textul pe care îl marcarea. Termenul vine de la corectorii care ar face-o marcare manuscrise pentru editări.
Din manualul de stil Chicago
Mărcile de marcatori sunt o formă de marcare. Amintiți-vă de aceștia din clasa engleză de clasă medie (sau ați fost prea ocupați să vă jucați cu Walkman-ul dvs. fantezist pentru a vă acorda atenție ?!)
Iată trei moduri în care puteți marca un document digital pentru a indica o rubrică:
HTML:
Eu sunt cel mai bun director
Markdown
Nu sunt cel mai bun director
LaTeX
\ section Sunt LaTeX
Acum, că aveți o înțelegere mai clară a ceea ce LaTeX ... greșit, marcare este, vom crea un document HTML5 de bază cu o singură bucată de conținut. O vom folosi pentru a ilustra diferitele moduri în care putem construi înțelesul în acest conținut, ducând la o creștere a capacității sale de descoperire.
HTML
Mai întâi, creați documentul HTML inițial în editorul de text dorit.
Acest lucru este mult mai simplu decât modurile în care a fost. Acum, să adăugăm conținut!
Conţinut
Iată conținutul nostru unic, o imagine a unei pisici foarte nefericite, într-o secțiune din interiorul corpului nostru de documente.
Cheer up mate ...
Titlu
Acum, că știm cu ce conținut lucrăm, putem adăuga primul context la pagina noastră. Prietenul nostru vechi, </code> în eticheta documentului <code><head></code>. </p><pre><head> <title> Forlorn Feline
Să mergem la ceva mai provocator (deși simplu) cu Facebook Open Graph Protocol!
Facebook Open Graph Protocol
Open Graph Protocol permite oricărei pagini web să devină un obiect bogat în graficul social al Facebook. Permite oricărei pagini web să aibă o funcționalitate similară cu un obiect pe Facebook.
Diagrama deschisă a Facebook (precum și sistemul de carduri Twitter, la care ne vom uita în continuare) funcționează cu meta date pe care le adăugați în paginile dvs. web " . Același loc pe care tocmai l-am pus </code>. În cazul protocolului open graph al Facebook există <em>patru proprietăți</em> care sunt necesare.</p><h3>Necesită marcare grafică deschisă</h3><p>Cele patru caracteristici grafice necesare pentru grafice pe care Facebook le cere sunt: </p><ol> <li>Titlu</li> <li>Tip</li> <li>Imagine</li> <li>URL-</li> </ol><h4>Titlu</h4><p>Primul dintre acestea este eticheta titlului, care este titlul obiectului așa cum ar trebui să apară pe Facebook.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_5.png"><p>Iată cum exemplul meu va fi denumit atunci când documentul HTML este partajat pe Facebook.</p><pre><meta property="og:title" content="Forlorn Feline" ></pre><p><strong>Notă</strong>: Dacă creați un titlu diferit de titlul original, Facebook vă va da o eroare la depanarea paginii. Facebook permite diferența, dar nu va valida 100%. Nu știu de ce Facebook se încruntă în privința asta, dacă aveți idei de ce să-mi spuneți!</p><h4>Tip</h4><p>A doua proprietate pe care Facebook o cere este tipul de obiect pe care îl vor afișa utilizatorii pe platforma sa.</p><p>Conținutul nostru nu reprezintă muzică sau video. Nu este nici un articol, nici o carte, nici un profil. Tot ce ne rămâne este faptul că conținutul nostru trăiește într-un document HTML, care, atunci când este încărcat pe un server web, devine un site 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>Imagine</h4><p>A treia proprietate pe care Facebook o cere este o imagine care reprezintă obiectul nostru. Aceasta este destul de simplă!</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>A patra și ultima proprietate pe care o necesită Facebook este cea pe care utilizatorii o vor experimenta atunci când interacționează cu obiectul.</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_8.png"><p>La fel ca proprietatea imaginii, aceasta este destul de simplă.</p><pre><meta property="og:url" content="http://ryanallen.com/forlorn-feline.html" > </pre><p>Asta face pentru tot ceea ce este necesar. Este timpul să obțineți mai multă abstractizare cu <em>sens</em> suntem injectați în conținutul nostru și pentru asta trebuie să identificăm publicul țintă.</p><h3>Public țintă</h3><p>Scopul acestui articol nu este de a vă învăța cum să identificați publicul țintă. Cu toate acestea, vreau să vă impresionez importanța cunoașterii cine este. Când construiți un context în conținutul dvs., trebuie să știți cine doriți să descoperiți conținutul dvs. și ce ar trebui să învețe despre acest conținut.</p><p>Pentru conținutul din acest articol, imaginea pisicilor nefericite, publicul țintă este un designer de web care caută să afle mai multe despre descoperirea (tine). Să vedem cum arată în continuare în marcarea opțională pe care Facebook o înțelege.</p><h4>Marcare abstractă opțională</h4><p>Putem adăuga un marcaj suplimentar ca o descriere, care, deși nu este necesară, o face mult mai interesantă pentru oricine se întâmplă în ceea ce privește conținutul nostru.</p><p>Deci ce ar trebui să fie descrierea noastră? Ar trebui să fie relativ la publicul țintă.</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>Grozav! Amintiți-vă cum v-am spus că Twitter funcționează în mod similar cu Protocolul Open Graph al Facebook? Să aruncăm o privire la ea în continuare!</p><h2>Stare de nervozitate</h2><p>Twitter necesită proprietăți diferite în funcție de tipul de card pe care îl utilizați. Pentru acest exemplu vom folosi cartea sumară implicită care necesită aceste patru proprietăți:</p><ol> <li>Tipul cardului</li> <li>Atribuire</li> <li>Titlu</li> <li>Descriere</li> </ol><p>Cele mai multe dintre aceste proprietăți nu ne obligă de fapt să facem alte lucrări suplimentare. De ce este asta?</p><blockquote>"Când procesorul cartelei Twitter caută etichete pe pagină, mai întâi verifică proprietatea Twitter și, dacă nu este prezentă, revine la proprietatea Open Graph supported. Acest lucru permite ca ambele să fie definite independent pe pagină și minimizează marimea duplicatului necesară pentru a descrie conținutul și experiența dvs. - Twitter </blockquote><h3>Minimizarea marcării duplicate</h3><p>Grozav! Etichetele pe care nu avem nevoie să le replicăm (deși ați putea avea un motiv să) sunt: </p><ol> <li><code>og: titlu</code></li> <li><code>og: descriere</code></li> <li><code>og: image</code></li> </ol><p>Trei în jos, doi să meargă!</p><h3>Tipul cardului</h3><p>Mai întâi, să spunem Twitter tipul de conținut pe care îl distribuim. Vom plasa acest card pe cardul Sumar implicit când documentul HTML este partajat pe Twitter.</p><pre><meta name="twitter:card" content="summary" ></pre><p>A fost simplu, ce urmează? Sper că este ceva minunat!</p><h3>Atribuire</h3><p>Twitter necesită un cont care trebuie atribuit unui cont Twitter care aparține creatorului de conținut și / sau proprietarului conținutului. Dacă conținutul este deținut de o pagină a companiei sau de un departament al companiei (sau există pe site-ul companiei, dar nu este deținut de companie), puteți utiliza o atribuire a stilului site-ului.</p><p>Iată cum arată acest lucru dacă este găzduit pe site-ul meu personal:</p><pre><meta name="twitter:creator" content="@ryanallen_com" ></pre><p>Iată cum ar arăta dacă Tuts + Web Design a găzduit codul HTML:</p><pre><meta name="twitter:creator" content="@ryanallen_com" > <meta name="twitter:site" content="@wdtuts" ></pre><p>Twitter va trebui să autentifice și să aloce pe listă domeniul pentru fiecare tip de card Twitter. Acest lucru este simplu și automatizat, deși nu știu ce se întâmplă dacă obțineți negru. Dacă cineva are experiență în acest sens, mi-ar plăcea să învăț mai mult.</p><p>Asta e pentru Twitter! Bine că am făcut mai întâi Open Graph, Twitter economisește mult timp colaborând cu alte platforme în măsura posibilităților. Multumesc Twitter!</p><p>Este timpul să revedeți motoarele de căutare pentru câteva modalități noi, contextuale și interesante de a vă optimiza conținutul.</p><h2>Microdata și optimizarea motorului de căutare</h2><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_10.png"><p>În primul rând, un cuvânt rapid de la Microsoft:</p><blockquote>"La data de 2 iunie 2011, [Microsoft] am anunțat o colaborare între Bing, Google și Yahoo pentru a crea și susține un set standard de scheme pentru marcarea structurată a datelor pe paginile web. Deși companiile noastre concurează în multe feluri, ne-a fost evident că colaborarea în acest spațiu ar fi bună pentru fiecare motor de căutare individual și pentru industrie în ansamblul său. - Michael O'Connor </blockquote><p>Microdata este diferită de celălalt marcaj pe care l-am structurat deja prin faptul că nu trăiește în capul documentului.</p><p>Vom folosi microdate pentru a introduce contextul în conținutul nostru în corpul documentului nostru HTML. Motoarele de căutare vor utiliza datele noastre pentru a îmbunătăți capacitatea de descoperire a conținutului pentru utilizatorii lor.</p><p>Mașinile cred ceea ce le spunem. Pentru cel puțin ... </p><h3>Mărirea marcajelor necesare </h3><p>Următoarele etichete sunt necesare pentru fiecare element în care doriți să creați înțeles. </p><ol> <li>Scopul articolului</li> <li>Categorie de obiect</li> </ol><p>Mai întâi trebuie să identificăm <em>lucru</em> descriem. Să ne distrăm de semantică și să construim un anumit context sau înțeles în conținutul nostru pentru publicul țintă.</p><p>Amintiți-vă că avem doar o singură bucată de conținut. Care este un aspect evident de semnificație conținut în imaginea noastră?</p><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup.gif"><p>Bine, arata ca o pisica. Asta e grozav, deoarece internetul iubește pisicile! Ce <em>lucru</em> reprezintă cel mai bine o pisică în marcarea de scheme disponibile pentru noi?</p><p>Sensul conținut în această imagine nu este probabil o acțiune, un serviciu de difuzare, o entitate medicală de eveniment sau un loc. Este cu siguranță o lucrare creativă, mai exact este un exemplu de artă vizuală, deși Google face în prezent unele modificări care ar putea afecta utilizarea acestui marcaj pe termen scurt:</p><p><br></p><blockquote contenteditable="false"> <p>@ryanallen_com @googledevs @google nu, mai degrabă avem câteva (întârziere de speranță) care includ integrarea adăugărilor Feb, adică http://t.co/09JUDuUIwW</p>- Dan Brickley (@danbri) 2 martie 2015 </blockquote> <p>Să declarăm <code>categorie de obiect</code> în interiorul etichetei secțiunii:</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>Acesta este un început bun, deși conținutul nostru este în cea mai mare parte lipsit de sens. Google, Bing, Yahoo și Yandex sunt acum 100% sigur că conținutul nostru este o lucrare creativă, dar nimic altceva. Să adăugăm un context mai semnificativ pentru piața țintă: designeri web.<br></p><h3>Proprietăți opționale Microdata</h3><p>Nu este necesar să menționez toate proprietățile pe care le poți folosi cu tipul de element Creative Work, aici sunt niște relații cu designerii de web, pe care i-am identificat drept public țintă.</p><p>Să începem prin a declara toate lucrurile despre acest conținut care nu sunt abstracte, ci sunt în schimb concrete, ferme și neschimbate în sensul lor. </p><h4>Imagine</h4><p>În primul rând, aceasta este o imagine cu o locație sursă (<code>src</code>) pe internet.</p><pre><img itemprop="image" src="images_12/improve-your-websites-discoverability-with-semantic-markup_2.gif" > </pre><h4>Autor</h4><p>Eu sunt autorul sau creatorul ilustrației digitale.</p><pre><meta itemprop="author" content="Ryan Allen" ></pre><h4>Public</h4><p>Arata bine! Să adăugăm acum publicul țintă.</p><pre><meta itemprop="audience" content="web designers" ></pre><h4>Utilizare educațională</h4><p>Acum vom stabili tipul de utilizare educațională pe care intenționăm să o realizăm pentru această imagine, care este una <em>exemplu</em> în acest caz.</p><pre><meta itemprop="educationalUse" content="example" ></pre><h4>Familie prietenoasa</h4><p>Nimic nu este NSFW, așa că să ne asigurăm că este clar.</p><pre><meta itemprop="isFamilyFriendly" content="true" ></pre><h4>Caracter</h4><p>Ce ne-am numit caracterul pisicilor noastre?</p><pre><meta itemprop="character" content="Vincenzo" ></pre><p>Oh da. Acesta este un nume minunat, deși se mișcă într-un domeniu mai abstract. Lucrurile sunt pe punctul de a obține totul abstract acum. </p><h4>Despre</h4><p>Să adăugăm un context mai mult despre situația din imaginea noastră legată de publicul țintă.</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>Să terminăm acest lucru cu o listă de cuvinte cheie delimitate cu virgulă, direcționate și relative, în scopul de a înfunda factorul de descoperire al conținutului nostru de peste 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>Valida</h4><p>Tot ce trebuie să faceți este să vă validați codul cu Google, apoi cu Facebook și în cele din urmă cu Twitter. Iata cum arata:</p><h4>Facebook</h4><img src="//accentsconagua.com/img/images_12/improve-your-websites-discoverability-with-semantic-markup_11.png"><h4>Stare de nervozitate</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>rezumat</h2><p>Deci, ce arată totul împreună?</p><pre><!DOCTYPE html> <html> <head> <title> Forlorn Feline
Share
Din manualul de stil Chicago
Cheer up mate ... 
Accentsconagua