Programmazione

Come utilizzare Schema.org Markup nel tuo sito Web e perché dovresti

Come utilizzare Schema.org Markup nel tuo sito Web e perché dovresti / Programmazione

I motori di ricerca sono incredibilmente potenti 7 Alternative di ricerca di Google e le loro caratteristiche di marchio di fabbrica 7 Alternative di ricerca di Google e le loro caratteristiche di marchio Sei un utente di Google rigido? Dai una prova a questi motori di ricerca alternativi. Dalla privacy per aiutare le cause caritatevoli, questi motori di ricerca potrebbero darti alcuni motivi per cambiare il modo in cui navighi. Leggi di più . Possono interpretare il linguaggio spesso poco chiaro che usiamo per capire cosa stiamo cercando, determinare la migliore risorsa per rispondere alle nostre domande e mostrarcelo entro una frazione di secondo.

Google sta persino diventando molto bravo a rispondere alle domande nella pagina dei risultati di ricerca, ovviando alla necessità di fare clic su qualsiasi cosa. Personalizza anche i risultati della ricerca Come disattivare la personalizzazione dei risultati di ricerca di Google Come disabilitare la personalizzazione dei risultati di ricerca di Google Ulteriori informazioni. E questo aiuta le persone a trovare le informazioni che stanno cercando più velocemente.

Ma i motori di ricerca non possono farlo da soli - hanno bisogno di aiuto da parte dei proprietari e degli sviluppatori del sito. E il markup dello schema è un modo in cui puoi dare una mano sul tuo sito.

Che cos'è il markup dello schema?

Il markup dello schema è un modo per evidenziare parti specifiche dei dati strutturati.

Cosa sono i dati strutturati? Suo informazioni che sono organizzate e taggate quindi può essere meglio compreso dalle macchine. In breve, il markup dello schema è un'informazione che aiuta i motori di ricerca a trovare tipi specifici di informazioni sulla tua pagina web. È più semplice guardare un esempio.

Google ha il suo esempio interattivo di markup dello schema che descrive una ricetta della torta di mele:

Sopra, è possibile visualizzare il codice JavaScript che definisce il tempo di preparazione, il tempo totale, il rendimento della ricetta e vari elementi nutrizionali per la ricetta.

Va notato a questo punto che ci sono due modi principali per contrassegnare i dati strutturati: con JSON What Is JSON? Panoramica di un Layman Cos'è JSON? Panoramica di un Layman Sia che tu abbia intenzione di diventare uno sviluppatore web o no, è una buona idea sapere almeno cosa è JSON, perché è importante e perché è usato in tutto il web. Ulteriori informazioni o con tag HTML incorporati. Google consiglia il metodo JSON, ma esamineremo entrambi in seguito.

Ecco come Google estrae le informazioni nutrizionali specifiche:

Schema.org ha migliaia di diversi tipi di markup che puoi usare per mostrare meglio ai motori di ricerca le informazioni sulla tua pagina. Il tipo TechArticle, ad esempio, include, tra le altre cose, i seguenti attributi:

  • livello di competenza
  • wordcount
  • pubblico
  • Creatore
  • data di creazione
  • data modificata
  • datePublished
  • publishingPrinciples
  • typicalAgeRange

Esistono schemi completi per biblioteche, esercizi di alloggio, appartamenti, eventi di arti visive, canali di trasmissione, metodi di consegna, stati dei server di gioco e altro.

L'idea è di assicurarsi che i motori di ricerca sappiano cosa rappresenta ogni singola informazione sulla tua pagina, quindi può mostrare quelle informazioni a chi le sta cercando.

I vantaggi del markup dello schema

OK. Il markup dello schema indica ai motori di ricerca cosa c'è nella tua pagina: qual è il problema?

Google lo mette così:

“Quando le informazioni sono altamente strutturate e prevedibili, i motori di ricerca possono più facilmente organizzarli e visualizzarli in modi creativi.”

Ad esempio, potresti visualizzare le date del tour per il prossimo tour di Slayer visualizzato direttamente nei risultati di ricerca:

Oppure ottieni informazioni specifiche su un film quando lo cerchi:

Google sta migliorando continuamente nel trovare queste informazioni da solo, ma l'uso corretto del markup dello schema semplifica il processo e rende più probabile la visualizzazione delle informazioni sulla tua pagina.

E quando i motori di ricerca sanno esattamente cosa c'è nella tua pagina, possono mostrarlo a chi lo sta cercando direttamente all'interno dei risultati di ricerca. E questo va bene per tutti.

Introduzione ai dati strutturati

Ora che hai visto i vantaggi dell'utilizzo del markup di Schema.org, è ora di iniziare a tuffarti. Inizieremo con lo strumento più semplice: l'Evidenziatore di dati di Google.

Avrai bisogno che il tuo sito sia connesso alla Search Console di Google (precedentemente noto come Strumenti per i Webmaster Ottieni informazioni approfondite sulla ricerca per il tuo sito con Strumenti per i webmaster Query di ricerca Ottieni informazioni approfondite sulla ricerca per il tuo sito con Strumenti per i webmaster Query di ricerca Modifiche allo strumento per le query di ricerca in I webmaster di Google potrebbero cambiare il modo in cui svolgi la tua ricerca per argomento: la generazione di contenuti sul Web implica creatività e attenzione per gli utenti e molte ricerche su parole chiave. Se hai bisogno di aiuto per installarlo, controlla l'utile guida di Yoast.

Dopo averlo fatto, accedi a Search Console e fai clic su Aspetto della ricerca> Evidenziatore di dati. Colpire il Inizia l'evidenziazione pulsante sul lato destro dello schermo.

Successivamente, dovrai inserire l'URL di una pagina che desideri taggare e selezionare il tipo di markup che farai. In questo caso particolare, utilizzeremo il tipo di markup Articoli.

Perché sto evidenziando un articolo su un sito che pubblica un sacco di articoli, lo terrò Tagga questa pagina e ad altri piace verificato.

Ora vedrai uno schermo diviso: la tua pagina a sinistra e i campi di markup disponibili a destra.

È davvero semplice da qui. Inizia a evidenziare! Ogni volta che evidenzi il testo (o fai clic su un'immagine) apparirà un piccolo menu in cui puoi selezionare il tipo di informazioni che hai evidenziato.

Qui, ho evidenziato il titolo della pagina. Tutto quello che devo fare è cliccare “Titolo” nel menu.

Ora il titolo è popolato nel pannello di destra.

Continuerò, evidenziando autore, data di pubblicazione, immagine principale e categoria (ho evidenziato i tag nella parte superiore dell'articolo e tutti e tre sono stati importati come categorie).

E abbiamo finito! Questo è tutto ciò che c'è da fare.

Quando colpisci Fatto, Evidenziatore di dati ti aiuterà a applicare questo markup ad altre pagine simili sul tuo sito.

Aggiungere più dettagli

Evidenziatore di dati ti consente solo di graffiare la superficie del markup dei dati strutturati. Come hai visto sopra, sono stato in grado di aggiungere una manciata di attributi a quell'articolo. Il tipo di articolo di Schema.org contiene molti più attributi che possono essere impostati.

Cosa facciamo se vogliamo aggiungere ulteriori dettagli al markup dello schema?

Dovrai immergerti nel codice a questo punto. Come accennato in precedenza, ci sono due modi principali per rappresentare i dati strutturati: con JSON e con tag HTML in linea. Perché i tag HTML 17 Esempi di codice HTML semplici che puoi imparare in 10 minuti 17 Esempi di codice HTML semplici che puoi imparare in 10 minuti Se conosci i seguenti 17 tag HTML (e gli extra che li accompagnano), sarai in grado per creare una pagina web di base da zero o modificare il codice creato da un'app come ... Read More sono un po 'più intuitivi, andremo su quelli prima.

Markup HTML Inline Schema.org

Ad esempio, annoteremo una frase semplice: “Io vivo a Denver.” In HTML, questo sarà rappresentato semplicemente, come questo:

Io vivo a Denver.

Per iniziare il markup, dobbiamo specificare che questa particolare frase riguarda una persona (mostrata dal tipo di oggetto Person). Ecco come lo facciamo:

 
Io vivo a Denver.

Ora un motore di ricerca saprà che tutto è contenuto in questo

tag ha a che fare con una persona.

Successivamente, aggiungeremo un attributo markup: homeLocation. Schema.org definisce homeLocation come “Una posizione di contatto per la residenza di una persona.”

Dobbiamo aggiungere quell'attributo specifico all'HTML. Ecco come lo facciamo:

 
abito a Denver.

Adesso “Denver” è identificato come il homeLocation proprietà e Google sa che la persona identificata in questo paragrafo vive lì.

Se cambiamo la frase a “Vivo e lavoro a Denver,” possiamo mostrare anche questo:

 
Vivo e lavoro in Denver.

Denver è ora identificato come entrambi homeLocation e workLocation. (Grazie a Lloyd Bank e unor presso Stack Exchange per aver illustrato questo esempio).

Questo è un caso piuttosto semplice di markup dello schema, ma hai un'idea. Usando

e i tag, puoi aggiungere attributi e proprietà a qualsiasi cosa nella tua pagina.

Schema.org Markup con JSON

Google consiglia di utilizzare JSON-LD (notazione oggetto JavaScript per dati collegati) per il markup dello schema. Il più grande vantaggio di questo metodo è che mantiene il tuo HTML molto più pulito. Se torni a modificare una pagina e vedi decine di pagine di codice con markup, non sarai felice.

Il markup JSON richiede ancora molto spazio, ma è separato dal tuo HTML, facilitando la manutenzione.

Diciamo che hai una libreria chiamata Harker's e hai incluso le seguenti informazioni nella tua pagina di contatto:

Numero di telefono: 555-8710 Indirizzo: 749 Stoker St., Boulder, Colorado Orari: 10-9 dal lunedì al venerdì, 11-8 sabato, 12-5 domenica

Ecco come lo rappresenteresti con JSON-LD:

Questo va nell'intestazione della tua pagina. Come puoi vedere, occuperà molto spazio, poiché questo contenuto verrà quasi certamente visualizzato sulla tua pagina in HTML. Quindi tutto ciò che vuoi segnare sarà scritto due volte.

Nonostante questa duplicazione, tuttavia, il metodo JSON è spesso preferibile, in quanto separa il markup dello schema e il codice HTML. Molte buone pratiche HTML 9 Errori da non crearti quando si costruisce un Web Page 9 Errori che non si devono fare quando si costruisce una pagina Web I seguenti errori di codifica HTML sono facili da fare, ma se li allontani prima piuttosto che dopo, il tuo la pagina avrà un aspetto migliore, sarà più facile da mantenere e funzionerà come desideri. Leggi di più sembra un po 'strano fino a quando non ti rendi conto che rendono i siti più facili da mantenere. Questo è lo stesso.

Aggiunta del markup dello schema al tuo sito

Ora che hai visto alcuni modi diversi per aggiungere la notazione dei dati strutturati al tuo sito, puoi iniziare! È una buona idea iniziare con Evidenziatore di dati e andare avanti da lì. La documentazione di Schema.org è l'ultima risorsa, ma è un po 'difficile da sfogliare.

Indipendentemente dal fatto che tu voglia andare per le basi o iniziare a segnare tutto in vista, ora hai le risorse necessarie per iniziare!

Hai usato il markup di Schema.org sul tuo sito? Hai qualche consiglio per i proprietari di siti o gli sviluppatori che desiderano iniziare? Condividi i tuoi pensieri nei commenti qui sotto!

Immagine di credito: iinspiration tramite Shutterstock.com

.