Oggi non scriverò sui vantaggi del markup semantico: l'ho descritto prima. Inizierò subito spiegando come implementare il micro-markup dell'articolo (per un articolo) da Schema.org su un sito web.
Quindi, per prima cosa devi aggiungere il nome dell'entità al tag che racchiude il post (il testo dell'articolo, il suo titolo e i commenti), questo può essere tag div o articolo. 
Possono essere trovati all'inizio del file single.php. Se è un div, può avere una classe o un ID chiamato entry, main, maincolumn, article o qualcosa di simile.
Qui è dove devi inserire i parametri itemscope itemtype="http://schema.org/Article"
Come questo:
| < div itemscope itemtype= "http://schema.org/Article" id= "main" > |
titolo - titolo del post,
articoloCorpo - corpo post,
autore - l'autore e nome - il nome dell'autore,
datePublished - data di pubblicazione,
immagine - immagine,
editore: l'autore del post.
dateModified: data di modifica, ad es. pubblicare modifiche,
mainEntityOfPage – la pagina principale su questo argomento,
articoloSezione: la categoria a cui appartiene il post.
" />
" />
Inserisci qui il tuo indirizzo e numero di telefono:
Per fare ciò, alla fine del file Functions.php, prima della chiusura ?>, inserisci il seguente codice:
| funzione mayak_filter_image($contenuto) ($ar_mk = "! |
funzione mayak_filter_image($contenuto) ( $ar_mk = "! !si"; $br_mk = "
"; $contenuto = preg_replace($ar_mk, $br_mk, $contenuto); return $contenuto; ) add_filter("il_contenuto", "mayak_filter_immagine");
Qualsiasi pagina del sito Web è costituita da tag HTML. In genere, i tag HTML indicano al browser come visualizzare le informazioni contenute nel tag. Allo stesso modo, i report di micro markup di Schema.org motori di ricerca dove si trova questa o quella informazione importante nella pagina.
Se non hai mai incontrato il micro markup e ne senti parlare per la prima volta, prima di leggere questo articolo, studia quanto segue:
Non scriverò molto sul micro markup di Schema.org in questo articolo, perché abbiamo trattato tutto in dettaglio.
In questo articolo voglio mostrare come creare praticamente il micro-markup sul tuo sito web in modo che sia ben accolto sia da Google che da Yandex allo stesso tempo. Perché molte persone incontrano problemi: per Yandex il micro markup passa normalmente la convalida (leggi di seguito), ma per Google compaiono errori e viceversa. Si è vero. Ma puoi sempre trovare un compromesso!
Con l'aiuto del giusto micro-markup di Schema.org, puoi davvero migliorare l'indicizzazione del tuo sito da parte dei robot di ricerca. Perché potrai trasmettere i dati più importanti e indicare quali articoli devono essere nuovamente indicizzati se sono stati modificati. Cioè, al robot di ricerca vengono fornite immediatamente le informazioni “su un piatto d'argento”. Questo è il motivo per cui il micro markup è stato creato dai motori di ricerca.
Come verificare la "correttezza" del micro markup di Schema.org?Per verificare la validazione (“correttezza”) dei microdati, i motori di ricerca hanno sviluppato servizi speciali. In questo articolo controlleremo il micro markup per i motori di ricerca Yandex e Google.
- Validatore di micro markup di Google
- Validatore di micro markup di Yandex
Voglio avvisarti subito: se la tua pagina ha superato la convalida per un servizio, ciò non significa che passerà anche per un altro. Pertanto, per eseguire una convalida completa per due motori di ricerca, dovrai capire un po' cosa stai facendo e non limitarti a copiare e incollare il codice da questo articolo.
Come utilizzare i validatori di markup?Primo: per utilizzare questi servizi di validazione non è necessario registrarsi. Basta seguire i collegamenti sopra e puoi usarlo subito. Ora solo qualche parola su ciascuno dei validatori.
Quindi, iniziamo con il validatore di Google. La pagina è simile a questa:
Sono disponibili due opzioni per verificare la convalida della pagina:
La prima opzione di verifica è più adatta per trovare semplicemente l'opzione di micromarkup corretta e solo successivamente trasferirla sul sito reale. Questo è molto più veloce che cambiare costantemente il tuo sito live e controllarlo inserendo l'URL della pagina.
La seconda opzione di verifica dovrebbe essere utilizzata quando hai già aggiunto il micro markup al tuo sito web. Questo viene fatto alla fine.
Dopo aver controllato il validatore di Google, a sinistra apparirà il codice della tua pagina HTML e a destra - quale micro-markup è presente e se ci sono errori:
Con il validatore di Google, penso che tutto sia chiaro. Passiamo al validatore di Yandex.
Quando visiti un sito con un validatore di micro markup di Yandex, vedrai un'immagine leggermente diversa, ma il significato rimane lo stesso:
Qui l'interfaccia è un po' più semplice e anche in questo caso ci sono due opzioni per controllare il codice HTML: inserendo il codice sorgente della pagina o inserendo solo l'URL della pagina richiesta.
Dopo aver controllato la validità del micro-markup sulla tua pagina, Yandex mostrerà i suoi errori in un formato leggermente diverso, proprio accanto al micro-markup:
I validatori Yandex e Google ti forniranno immediatamente consigli in russo. Ma anche questo non basta, perché gli errori di ognuno sono diversi e dipendono dal contesto specifico della pagina e dalla struttura HTML.
Ora sai dove controllare il tuo micro markup. Pertanto, vai immediatamente sul tuo sito web, copia il collegamento URL del primo articolo e controllalo per la convalida.
Ci sono molti errori? Non preoccuparti, tutto può essere risolto. La cosa principale è capirlo gradualmente e correggere tutti gli errori.
Passaggio 1. Cosa deve essere contrassegnato sulla pagina?Il dizionario dei microdati di Schema.org è molto grande. Qui puoi trovare un formato di markup per quasi ogni tipo di post. Nell'articolo precedente ho fornito l'elenco principale dei formati supportati da questo micro-markup: indirizzi e organizzazioni, video, programmi, abstract, immagini, articoli, film e così via.
Pertanto, il primo passo è decidere il modello principale e prepararlo correttamente. E poi si trasferisce al sito reale.
In questo articolo ti mostrerò come realizzare un esempio per un sito web che utilizza CMS WordPress. E i blog vengono spesso creati su questo CMS. Pertanto, scriveremo il markup per un tipo di pagina come "Articolo".
Successivamente, dobbiamo determinare quale entità del dizionario utilizzeremo. La risorsa ufficiale Schema.org ha la seguente struttura: Articolo. Ma al suo interno ci sono delle sottostrutture che possiamo utilizzare. Andando sempre più in profondità nelle sottostrutture, ho trovato la seguente tipologia: BlogPosting. È una variante privata dell'entità Articolo. Ed è ottimo per contrassegnare i post del blog.
Ora decidiamo la struttura. Ci sono molte proprietà lì. Ecco uno screenshot di solo una piccola parte di tutti quelli possibili:
Ma fortunatamente non tutte le proprietà sono necessarie. Questo mi rende felice. Ecco un esempio visivo del layout della pagina:
Ora capisci di quali proprietà abbiamo bisogno per contrassegnare la pagina. Ho realizzato questa immagine per mostrare chiaramente cosa deve essere specificato esattamente utilizzando il micro markup di Schema.org. E dall'immagine sopra è chiaro che è necessario contrassegnare le aree più importanti del documento. Naturalmente, nell'immagine non ho mostrato tutto il micro markup che utilizzeremo, ma ora devi capire perché lo faremo in generale e cosa rientrerà esattamente nel markup della pagina.
Passaggio 2. Crea un modello di micro markupÈ diventato chiaro cosa avremmo segnato esattamente. Non resta che assemblare la struttura corretta.
L'essenza principale del micro markup (tecnicamente): aggiungere attributi aggiuntivi ai tag necessari. A volte aggiungi tag aggiuntivi per la struttura.
IMPORTANTE: Google apporta costantemente modifiche e ha lasciato le "stelle" solo per le pagine dei prodotti. Esistono siti che aggirano questo problema, ma è comunque consigliabile eseguire il markup come richiesto da Schema.org. Pertanto ora il codice è stato modificato e le “stelle” nella ricerca possono essere effettuate solo nell'entità Prodotto. Ciò vale maggiormente per tali servizi e beni, ma non per gli articoli ordinari.
Senza alcun preludio, andiamo dritti al punto. Dopo numerosi tentativi per rendere il micromarkup di Schema.org valido per Google e Yandex, si è ottenuta la seguente struttura:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | Yuri Nemets Titolo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nam tempora doloribus velit dicta iusto alias veritatis inventore, unde eum. Atque voluptatem unde, ipsum autem dolor facere, veniam quas ut. |
Ecco come appare un normale articolo senza aggiunte di terze parti. Il codice si è rivelato davvero grande. Adesso lo spiegherò letteralmente riga per riga e vi dirò dove sono le sfumature:
- Riga 1: dichiara il tipo di contenuto che verrà marcato.
- Riga 5: qui indichiamo l'indirizzo URL della pagina in cui si trova attualmente l'utente, ovvero l'indirizzo dell'articolo corrente.
- Righe da 8 a 18: una piccola sottostruttura in cui è necessario indicare informazioni più dettagliate sul sito: logo (indirizzo dell'immagine e sue dimensioni), numero di telefono, indirizzo e nome dell'azienda (sito).
- Righe da 9 a 13: un'altra sottostruttura con l'output di un'immagine, cioè un logo. Tutte le immagini necessarie per il micro markup devono essere visualizzate esattamente in questa struttura, dove oltre all'indirizzo dell'immagine, nei meta tag sono indicate anche le informazioni sulle sue dimensioni.
- Riga 14: indicare il numero di telefono, se disponibile.
- Riga 15: indirizzo reale se lavori in ufficio, ad esempio.
- Riga 16: qui scriviamo il nome dell'azienda.
- Riga 21: data di pubblicazione dell'articolo. Fai molta attenzione qui, perché deve essere indicato in un formato speciale: “ANNO-MESE-GIORNO”. E il separatore deve essere un segno “—”.
- Riga 24: la data dell'ultima modifica dell'articolo per indicare al motore di ricerca quale articolo deve essere reindicizzato se è stato modificato di recente. Anche qui valgono le regole del paragrafo precedente.
- Righe da 27 a 29: indichiamo le informazioni sull'autore dell'articolo in un'apposita sottostruttura.
- Righe da 32 a 45: la parte principale del contenuto del tuo articolo, all'interno della quale devi annotare diversi elementi:
- Riga 35: il titolo del tuo articolo. Lo contrassegniamo come segue aggiungendo una proprietà al tag title - itemprop="headline" ;
- Righe da 38 a 42: come hai visto prima, ecco una sottostruttura con un'immagine. Ma in questo caso ci riferiamo all'immagine principale dell'articolo;
Ora, per favore, non lasciarti intimidire dalla lunga descrizione e dal codice HTML stesso. Ho provato a commentare tutto in modo che tu possa vedere in cosa consiste un normale articolo e quali attributi devono essere specificati.
Se hai compreso la struttura del micro markup di Schema.org per l'articolo, hai già svolto l'80% del lavoro. Ne è rimasto un po’, ma questa “piccolezza” richiede conoscenze tecniche. Perché ora è necessario trasferire questa struttura in un vero e proprio sito web funzionante.
Passaggio 3. Implementa il micro markup di Schema.org sul sito realeMolte persone utilizzano CMS diversi. Pertanto, un codice univoco che funzionerebbe immediatamente su qualsiasi sito. Ma hai un codice di micro markup, che ho trovato dopo numerose ricerche. Tutto quello che devi fare è implementare gradualmente questo markup sul tuo sito web. E ora ti darò consigli che ti aiuteranno in questo:
Molti potrebbero iniziare a indignarsi per il fatto che non esiste una soluzione pronta che tutti stavano aspettando. Tutti vogliono una pillola magica: “copia->incolla”. Ciò non accadrà se desideri risultati reali e tangibili. Hai un modello individuale, che ha una propria struttura. Pertanto, sii paziente e comprendi come funziona il micro markup di Schema.org.
Per quanto riguarda la parte tecnica, dirò questo: o affida la questione a un professionista, oppure scopri tu stesso cosa ho descritto in questo articolo
Buona fortuna!Micro markup Schema.org: come soddisfare Google e Yandex allo stesso tempo? 4,10 /5 (81,97%) 203 voti
Schema.org è uno standard per la marcatura semantica dei dati sul web, annunciato dai motori di ricerca Google, Bing e Yahoo! nell'estate del 2011.
Lo scopo del markup semantico è rendere Internet più comprensibile, strutturato e facilitare ai motori di ricerca e ai programmi speciali l'estrazione e l'elaborazione delle informazioni per una comoda presentazione nei risultati di ricerca.
Il markup avviene direttamente nel codice HTML delle pagine utilizzando attributi speciali e non richiede la creazione di file di esportazione separati.
Utilizzando il markup semantico, puoi migliorare l'aspetto dello snippet del tuo sito web nei risultati di ricerca.
Confronta i frammenti in risultati di ricerca per una pagina di un sito che partecipa al programma di affiliazione Yandex.Dictionaries - non contrassegnata e contrassegnata con layout semantico.
Lo standard è un insieme di classi che descrivono tutti i tipi di entità e le loro proprietà. Ora ce ne sono già diverse centinaia. Il lavoro è costantemente in corso per migliorare lo standard, vengono aggiunte nuove proprietà e quelle esistenti vengono perfezionate.
Puoi conoscere la descrizione dello standard sul sito ufficiale nella sezione documentazione.
Esiste anche una traduzione non ufficiale e ancora incompleta della norma in russo sul sito web: http://ruschema.org.
Principi di base del markupQualsiasi markup di Schema.org viene eseguito in due passaggi:
Avvolgendo una descrizione di un certo tipo in un contenitore che indica lo schema di markup:
...
Contrassegnare le singole proprietà che indicano una proprietà dello schema specifica:
Lev Tolstoj, 16 anni
Documento senza markup Contatti Yandex: Indirizzo: Lev Tolstoy, 16, 119021, Mosca, Telefono: +7 495 739–70–00, Fax: +7 495 739–70–70, E-mail: [e-mail protetta] Documento con markup Schema.org Contatti Yandex: Indirizzo: Lev Tolstoy, 16 119021 Mosca, Telefono: +7 495 739–70–00, Fax: +7 495 739–70–70, E-mail: [e-mail protetta] Come iniziare a utilizzare gli strumenti di implementazione dei microdati di schema.org Come Yandex utilizza i dati contrassegnatiIl markup del contenuto semantico viene utilizzato da vari servizi Yandex:
Contrassegnare le informazioni sui programmi (applicazioni, programmi per computer, giochi, ecc.) aiuta la Ricerca a generare snippet speciali per le pagine con tale markup.
26.05.2017 Tempo di lettura: 30 minuti
Uno dei desideri più profondi dei proprietari di siti Web e degli specialisti SEO è quello di far risaltare il proprio sito Web nei risultati di ricerca in modo che si distingua dalla concorrenza e gli utenti facciano clic su di esso più spesso. Il metodo più efficace per raggiungere questo obiettivo è lavorare con dati strutturati. In questo articolo cercheremo di capire cosa sono i dati strutturati e come puoi implementarli sul tuo sito web.
Dove è iniziato tutto?Lo schema unificato di formati per il markup semantico del sito, che ora tutti conosciamo e utilizziamo, è apparso nel 2011 con il supporto di giganti come Google, Yahoo! e Microsoft (successivamente si unì un quarto attore, Yandex). Prima di ciò, il markup dei dati esisteva in diversi formati e non esisteva un'unica struttura. Ad esempio, Yahoo! esisteva un servizio chiamato “SearchMonkey”, che già nel 2008 permetteva di marcare i dati su una pagina e creare snippet univoci nei risultati di ricerca del proprio motore di ricerca.
Le aziende avevano un obiettivo globale: sviluppare un formato comune per i dati strutturati che migliorasse la visualizzazione dei siti nei motori di ricerca e migliorasse la qualità della ricerca. Gli iniziatori hanno raggiunto i loro obiettivi, a seguito del quale è nato il dizionario schema.org, che combina un numero enorme di regole per il markup dei microdati sul sito.
Cosa sono i dati strutturati?I dati strutturati sono informazioni presentate in forma unificata e corretta nel rispetto di un determinato insieme di regole.
Non descriveremo i principi di funzionamento di ciascun dizionario, ne analizzeremo più in dettaglio solo tre: Json-ld, Opne Graph e schema.org.
Cominciamo con il popolare dizionario di microdati schema.org. Il risultato della collaborazione tra Google, Yahoo!, Microsoft e Yandex è in continuo sviluppo e viene ancora oggi aggiornato regolarmente. Al momento della creazione dell'articolo, il dizionario contiene descrizioni per 589 tipi di documenti, 860 proprietà di oggetti e 114 valori specifici. Lista completa Tutte le proprietà sono elencate in una gerarchia ramificata in questa pagina.
Il tipo di entità principale più elevato nel dizionario schema.org è Thing, che a sua volta è suddiviso in diversi altri sottotipi. Alcuni di quelli:
- CreativeWork – un insieme generale di regole per descrivere il lavoro creativo: articoli, libri, film, fotografie, software, ecc.;
- Evento – insieme di regole per eventi accaduti o che accadranno in un determinato periodo di tempo: incontri, concerti, mostre, ecc.;
- L'intangibile è una classe di servizi che comprende diverse cose immateriali come dimensioni, valutazioni, descrizioni di posti di lavoro vacanti, servizi, ecc.;
- Organizzazione: una serie di regole per contrassegnare le organizzazioni, un elenco completo dei diversi tipi di attività è elencato nella pagina localBusiness. Puoi anche visualizzare questo elenco nella guida Yandex https://yandex.ru/support/webmaster/supported-schemas/address-organization.html;
- Persona – un'entità usata per descrivere individui o personaggi viventi, deceduti, di fantasia;
- Luogo – un insieme di regole per qualcosa che ha una posizione fisica fissa (edificio, parco, monumento, ecc.);
- Il prodotto è tutto ciò che viene creato per la vendita. Ad esempio, un paio di scarpe, un biglietto o un'auto.
Ogni sottotipo include un gran numero di tag per la descrizione, quindi quasi ogni tipo di attività troverà il tipo di markup necessario.
La maggior parte dei tag nel dizionario presentano casi d'uso sotto forma di un esempio di codice HTML o di uno script JSON-LD. Di seguito esamineremo esempi di layout di pagina con un articolo (articolo), un prodotto (prodotto) e un'organizzazione (organizzazione).
Modello di markup dell'articolo utilizzando schema.orgMolto spesso vengono contrassegnati microdati come URL, data di pubblicazione, data di modifica, titolo, immagine, autore, editore, ecc.. Vediamo un esempio specifico:
Esempi di markup di articoli utilizzando schema.org NOME E COGNOME
"LARGHEZZA LOGO IN PIXEL" altezza= "ALTEZZA LOGO IN PIXEL" src= "LINK IMMAGINE LOGO" alt= /> TITOLO ARTICOLO DESCRIZIONE ARTICOLO NOME AUTORE TITOLO H1
"LARGHEZZA ANTEPRIMA IN PIXEL" altezza= "ALTEZZA ANTEPRIMA IN PIXEL" src= "LINK ALL'IMMAGINE ANTEPRIMA" alt= "DESCRIZIONE ALTERNATIVA ANTEPRIMA"
/>
ОСНОВНОЙ ТЕКСТ СТАТЬИ ДОЛЖЕН БЫТЬ ЗДЕСЬ
!}
La maggior parte degli articoli taggati segue uno schema simile. Vale la pena notare che in questo esempio alcuni tag sono indicati nella sezione (meta descrizione e collegamento all'autore in g+), mentre il resto è scritto nel corpo del documento HTML. Non è necessario utilizzare alcuni tag, ad esempio un articolo sembrerà perfetto senza contrassegnarlo con i tag articleBody o editore, ma è improbabile che superi il controllo di validità in Yandex o negli strumenti di Google.
Immagine 3. Esempio di una pagina nei risultati di ricerca con micro markup dell'articolo in Google. La data di pubblicazione appare accanto all'articolo.
Immagine 4. Un esempio di una pagina nei risultati di ricerca per la stessa richiesta dell'immagine 3, solo in Yandex. La data appare a destra, con la data pubblicata o creata in alto e la data modificata in basso.
Modello di micromarkup della scheda prodotto utilizzando schema.orgIl prossimo tipo di micromarkup che prenderemo in considerazione sarà quello del prodotto o, in altre parole, il markup semantico di una scheda prodotto.
CONTENUTO H1
"LINK ALL'IMMAGINE" title= "CONTENUTI H1"
>!} PREZZO IN RUBLI CHE INDICA LA DISPONIBILITA' DEL PRODOTTO DESCRIZIONE PRODOTTO
Fai attenzione Attenzione speciale formato prezzo, poiché la maggior parte degli errori nella micromarcatura delle schede prodotto risiedono lì. Possiamo scrivere qualsiasi prezzo nel testo in qualsiasi formato, e direttamente nel cartellino del prezzo stesso indichiamo il prezzo rigorosamente in formato monetario, altrimenti i motori di ricerca ignoreranno questa riga.
Immagine 5. Un esempio dai risultati di ricerca di Google che indicano il prezzo nel formato “FROM” e “TO”.
Modello di schema dell'organizzazione utilizzando schema.orgL'ultimo modello che esamineremo è il markup dell'organizzazione. In genere, questo markup viene utilizzato per strutturare le informazioni su una pagina di contatto.
NOME DELL'ORGANIZZAZIONE VIA, CITTÀ, REGIONE. "LINK AL LOGO" /> Telefono: NUMERO DI TELEFONO
schema.org ha un vocabolario molto ampio. Per questo motivo, possono sorgere difficoltà quando si lavora con esso, ma non tutti i tag nel markup sono richiesti e la maggior parte può essere abbandonata. Negli esempi forniti, ho indicato i tag più basilari che possono essere utilizzati quando si lavora con il markup di schema.org, ma ce ne possono essere molti altri.
Google ha uno speciale attrezzo per contrassegnare le pagine in base al dizionario schema.org. Rende la creazione di layout di pagina molto più semplice.
Immagine 6. Esempio da Yandex. Ulteriori informazioni sull'organizzazione vengono visualizzate sotto la descrizione della pagina e possono essere implementate manualmente, utilizzando markup o utilizzando il servizio Yandex.Directory.
Pro e contro del micromarkup di schema.org- Ampio dizionario costantemente aggiornato;
- Supportato da tutti i motori di ricerca più diffusi;
- Il codice non è nascosto da script ed è interamente contenuto nel contenuto della pagina;
- Migliora la visualizzazione degli snippet nei risultati di ricerca;
- Puoi trovare markup per quasi tutti i siti;
- Esistono plugin per automatizzare la generazione del micro markup;
- Sviluppo ed espansione attivi.
- Un gran numero di schemi di markup può spaventare un utente impreparato;
- È richiesta una conoscenza di base del layout e delle modifiche al codice della pagina;
- Complica il codice HTML, che rallenta lo sviluppo del sito;
- Tutta la documentazione ufficiale di riferimento è in inglese;
- Non tutte le proprietà hanno esempi di utilizzo sul sito ufficiale.
Quando si lavora con il micro markup di schema.org, servizi come:
- Strumento di convalida dei dati strutturati di Google;
- Assistente sul micro-markup delle pagine secondo il dizionario schema.org di Google. Di conseguenza, otteniamo il codice HTML della pagina con il micro markup già implementato;
- Controllo del markup semantico da Yandex;
- Sito web ufficiale di markup;
- Traduzione non ufficiale del sito web schema.org in russo;
- "All In One Schema.org Rich Snippets", "Wprichsnippets.com", "Schema App Structured Data" - plugin per WordPress che generano automaticamente markup semantico schema.org;
- Notepad++ - o qualsiasi altro editor di testo.
Questo protocollo è stato sviluppato da Facebook per migliorare la visualizzazione di frammenti di link da siti esterni sui social network. Questo è probabilmente uno dei dizionari di microdati più semplici e piccoli. Puoi iniziare a implementare il markup con quattro proprietà di base:
- og:title - titolo della pagina.
- og:type - tipo di oggetto, ad esempio "music.album"(album). A seconda del tipo, sono supportate altre proprietà. Tutte le possibili caratteristiche del tag tipo sono elencate sul sito ufficiale.
- og:immagine - URL dell'immagine.
- og:url: l'URL canonico dell'oggetto.
Tutti i tag di markup " Apri grafico» sono registrati nel contenitore.
Oltre alle proprietà di base, puoi specificarne anche di aggiuntive che miglioreranno la visualizzazione dei link sui social network:
- og:audio – URL del file audio se la musica viene riprodotta all'apertura della pagina.
- og:determiner è la parola che appare prima del nome di questo oggetto in una frase. Digitare enum (a, an, the, "", auto). Se viene selezionato automatico, il consumatore di dati deve scegliere tra "a" o "an". Il valore predefinito è " " (vuoto). Il tag è più rilevante per il segmento di lingua inglese a causa dell'uso di vari articoli come "a", "the", "an", ecc.
- og:descrizione – descrizione della pagina, numero di caratteri consentito da 160 a 295 caratteri.
- og:locale – lingua e paese. Il formato di visualizzazione è Language_TERRITORY, quello predefinito è en_US. Per il segmento in lingua russa, viene scritto il tag ru_RU.
- og:locale:alternate – lingua o paese alternativo.
- og:nome_sito – nome del sito.
- og:video – URL del video.
Di seguito un esempio di codice HTML con tutte le proprietà possibili; in pratica alcuni dei tag specificati non vengono specificati e sono sufficienti le quattro proprietà standard:
TITOLO DELLA PAGINA...
L'ultimo tipo di markup e strutturazione dei dati che esamineremo è JSON-LD. Questo terribile nome sta per “JavaScript Object Notation Linked Data”. Il “World Wide Web Consortium” o, in altre parole, “W3C” è responsabile dello sviluppo del formato. Questo formato svolge la stessa funzione di schema.org, ma in un modo leggermente diverso: struttura i dati utilizzando JavaScript, il che rende il lavoro molto più semplice.
Uno dei vantaggi di questo formato è che per descrivere i dati viene utilizzato il dizionario schema.org. Pertanto, utilizzando gli script JSON-LD possiamo descrivere qualsiasi tipo di entità e migliorare la visualizzazione del nostro sito nei risultati di ricerca, dedicandovi un tempo minimo. Inoltre, questo può essere fatto senza introdurre tag HTML nel corpo della pagina, è sufficiente specificarlo nel contenitore, quindi annotare tutte le condizioni di markup necessarie e chiudere lo script.
Per chiarezza, confrontiamo il markup schema.org e JSON-LD:
Scarpe da ginnastica
Scarpe da ginnastica ("@context" : "https://schema.org/" , "@type" : "Prodotto" , "prezzo" : "100.00" ) Scarpe da ginnastica
Modello di markup dell'articolo che utilizza JSON-LDHo preso un esempio di markup utilizzando JSON-LD basato sul micro markup di un articolo in schema.org dallo stesso materiale sopra. Vengono utilizzate tutte le stesse proprietà.
TITOLO ARTICOLO //Viene indicato il tipo di script, nel nostro caso è ld+json ("@context" : "https://schema.org" ,//Viene specificata la libreria che verrà utilizzata per contrassegnare la pagina " @type" : "Articolo" ,/ /Specifica il tipo di entità "mainEntityOfPage" : ( //Viene specificato l'ID dell'articolo, in genere viene semplicemente specificato il collegamento all'articolo "@type" : "WebPage" , "@id " : "LINK ALL'ARTICOLO" ), "url" : "LINK ALL'ARTICOLO " , // Specificare il collegamento canonico all'articolo "datePublished" : "DATA DI PUBBLICAZIONE" , // Specificare la data di pubblicazione "dateModified" : "DATE OF CHANGE" , // Specificare la data di modifica "headline" : "HEADING H1" , // Specificare il titolo "image" : ( "@type" : "ImageObject" , "url" : "LINK TO PREVIEW" , //Inserisce un collegamento all'immagine per l'anteprima dell'articolo "height" : PREVIEW HEIGHT IN PIXELS , //Specifica l'altezza e la larghezza dell'immagine in pixel "width" : PREVIEW WIDTH IN PIXELS), "articleBody" : "" , "autore" : ( "@type" : "Persona" , "nome" : "NOME AUTORE" , //Specificare il nome dell'autore "url" : "LINK AL PROFILO DELL'AUTORE (G+, PAGINA PERSONALE SUL SITO )" //Specificare un collegamento al profilo dell'autore su Google Plus o alla pagina personale sul sito), "editore": ( "@type": "Organizzazione", "nome": "NOME ORGANIZZAZIONE" ,//Indicare il nome dell'organizzazione "logo" : ( "@type" : "ImageObject" , "url" : "LINK TO LOGO" ,//Indica un collegamento al logo aziendale "height" : LOGO HEIGHT , // L'altezza e larghezza del logo "larghezza" sono scritte: LARGHEZZA LOGO ) ) ) TITOLO ARTICOLO
Sorge spontanea una domanda: cosa è meglio schema.org o JSON-LD? Dare qui una risposta certa è impossibile. Lavorare con il micromarkup in formato JSON-LD è più semplice e piacevole che lavorare con lo stesso dizionario schema.org in formato HTML, ma presenta anche degli svantaggi. Ad esempio, si consiglia al motore di ricerca Google di utilizzare questa tecnologia per contrassegnare le proprie pagine. Ma ci sono problemi con Yandex: questo tipo di markup non viene ancora visualizzato nei risultati di ricerca a causa degli script, sebbene la validità delle pagine con markup JSON-LD venga controllata.
Il motore di ricerca Yandex non visualizza le informazioni contrassegnate utilizzando il metalinguaggio JSON-LD nei risultati di ricerca.
Immagine 8. Lettera del supporto tecnico Yandex relativa ai piani per JSON-LD. Grazie all'utente per lo screenshotOlé Holovkin .
In questo caso, è necessario impostare correttamente le priorità. Se hai bisogno di snippet estesi in Yandex e Google, utilizziamo il buon vecchio markup schema.org; se ci rivolgiamo all’Occidente e il nostro motore di ricerca principale è solo Google, allora il markup JSON-LD deve essere adottato e implementato senza indugio.
Pro e contro del markup JSON-LD- Il formato è leggermente più semplice rispetto a schema.org;
- Consigliato da Google;
- Per Motore WordPress ci sono plugin di alta qualità per il lavoro;
- Grazie a JavaScript, il markup è “invisibile” all'utente medio, a differenza dell'HTML;
- Lo script viene inserito solo nel contenitore senza introdurre ulteriori righe di codice nel corpo del sito;
- Convalidato negli strumenti ufficiali di verifica Yandex e Google.
I metodi di markup sopra elencati si riferiscono all'intervento diretto nel codice sorgente della pagina, ma esistono altri metodi per strutturare i dati. Si tratta di Evidenziatore di dati (Marker) di Google e "Prodotti e prezzi" di Yandex. Utilizzando questi strumenti, puoi espandere direttamente gli snippet di pagina nei risultati di ricerca dal pannello webmaster.
Immagine 9. “Marker” in Search Console e il servizio “Prodotti e prezzi” di Yandex.
Indicatore di GooglePer iniziare a contrassegnare, è necessario:
- Eventi
- Organizzazioni locali
- Recensioni di libri
- Applicazioni
- Prodotti
- Ristoranti
- Articoli
- Serie televisive
- Film
Immagine 10. Pannello per la selezione del tipo di informazioni per il markup in Search Console.
Immagine 12. Pulsante per eliminare una pagina di markup definita in modo errato in Search Console.
Immagine 13. Esempio di un elenco di pagine già contrassegnate utilizzando Google Marker.
Questo conclude il markup utilizzando Google Marker. In questo caso non è assolutamente necessario conoscere HTML o JavaScript; basta semplicemente contrassegnare manualmente ogni pagina e Google stesso elaborerà i dati e apporterà modifiche agli snippet di ricerca. Ma Marker ha anche i suoi pro e i suoi contro.
Pro e contro del markup utilizzando Google Marker- Markup senza interferire con il codice sorgente delle pagine;
- Lo strumento risiede direttamente in Google Search Console;
- Le pagine vengono contrassegnate in modo semiautomatico;
- Puoi raggruppare le pagine per tipo;
- Il markup verrà visualizzato solo nei risultati di ricerca di Google;
- Lo strumento non sempre contrassegna le informazioni correttamente;
- Quando si contrassegna un sito Web di grandi dimensioni, è necessario molto lavoro manuale.
Questo strumento in sé non si riferisce del tutto alla consueta comprensione del markup della pagina, poiché in Yandex viene solitamente utilizzato per caricare informazioni su un prodotto in Yandex.Market in formato YML. Stranamente, Yasha è riuscita a trovare un utilizzo questa specie informazioni sul prodotto e ora nei risultati di ricerca organici trovi spesso siti contrassegnati con questo servizio. caratteristica principale“Prodotti e prezzi” è la visualizzazione nei risultati di ricerca Yandex del prezzo di un prodotto/servizio a destra del collegamento al sito.
Immagine 14. Un esempio di visualizzazione del prezzo di un servizio nei risultati di ricerca Yandex con il servizio “Prodotti e prezzi” collegato.
Il servizio "Prodotti e prezzi" può essere utilizzato non solo dai negozi online, ma anche dalle organizzazioni che forniscono servizi. In questo caso, dovrai creare manualmente il documento YML.
Pertanto, per connettere il servizio "Prodotti e prezzi" in Yandex, è necessario:
Immagine 15. Offerte Yandexfamiliarizzare con formato YML egestione per connessione.
Pro e contro dello strumento Prodotti e prezzi Yandex - Distingue notevolmente il sito dagli altri concorrenti nella ricerca e aumenta il CTR;
- Prima di accedere al sito, l'utente riceve informazioni relative al costo del servizio/prodotto;
- Oltre al prezzo, il documento YML specifica altri parametri che vengono presi in considerazione anche durante la generazione dello snippet;
- Nei motori di siti Web più diffusi, la generazione dei file avviene automaticamente o semiautomaticamente.
- I risultati con i prezzi saranno visibili solo nei risultati Yandex;
- Il caricamento di un documento YML non è previsto in tutti i CMS;
- Se i prezzi sul sito cambiano frequentemente, è necessaria la generazione regolare di documenti;
- Dispendioso in termini di manodopera se è necessario contrassegnare manualmente un numero elevato di pagine.
A differenza di Google Marker, per lavorare con un file YML avrai bisogno dei seguenti strumenti:
- Elenco dei motori del sito Web con la possibilità di caricare documenti YML;
- Generatore di documenti YML per generare manualmente un file;
L’implementazione del markup dei dati strutturati è un passo importante che può successivamente aumentare il CTR del sito nella ricerca e migliorare la visualizzazione dei contenuti nei risultati di ricerca. Esistono diversi modi per eseguire il markup del tuo sito web, ma al momento il più collaudato è l'implementazione del markup di schema.org, poiché altri metodi hanno funzionalità limitate o sono contrassegnati all'interno dello stesso motore di ricerca.
Ogni metodo di markup dei dati ha i suoi vantaggi e svantaggi; prima di iniziare l'implementazione, dovresti valutare seriamente le tue capacità e scegliere migliore opzione. I singoli metodi di markup possono essere combinati tra loro, ad esempio Open Graph con schema.org e "Prodotti e prezzi" di Yandex. E ricorda: la presenza del micro markup sul sito non garantisce la modifica dello snippet di ricerca nei risultati; innanzitutto facilita la scansione del sito da parte dei motori di ricerca.
Articolo preparato da: Abdullin Konstantin, tecnologo esperto SEO dell'azienda sito web
Ciao! È tempo di parlare di come ho implementato il micro-markup di Schema.org sul mio blog alla fine dello scorso anno e di cosa ne è venuto fuori.
Schema.org è un unico standard universalmente riconosciuto dai motori di ricerca più popolari come , Yandex, Yahoo e Bing. È stato sviluppato da un gruppo internazionale dall'estate del 2011.
Il micromarking è il markup semantico delle pagine di un sito web con lo scopo di strutturare i dati, basato sull'introduzione di attributi speciali nel codice HTML del documento.
Permettetemi di darvi un paio di ragioni a favore del markup:
- la struttura logica delle informazioni su una pagina aiuta i motori di ricerca a recuperare ed elaborare i dati;
- generare rich snippet nella pagina dei risultati query di ricerca migliora la percentuale di clic.
Le specifiche standard offrono ai proprietari di siti web una varietà di schemi che possono essere utilizzati per le schede prodotto nei negozi online, ricette culinarie Con istruzioni passo passo e gli ingredienti necessari, gli indirizzi delle organizzazioni e la pubblicazione di recensioni. Troverete l'elenco completo degli schemi sulla pagina ufficiale del progetto.
I blog sono generalmente costituiti da pagine incentrate sulle richieste di informazioni. Non contengono recensioni o gallerie di immagini, non vendono prodotti e non hanno un indirizzo commerciale. Pertanto, lo schema CreativeWork - Creative Works è più adatto ai blog.
Esempio disposizione semantica utilizzando il micromarkupOra fornirò un esempio di layout di un blog su WordPress utilizzando gli attributi di Schema.org. Dovremo aggiungere gli attributi itemscope , itemtype , itemprop e assegnare loro le proprietà in conformità con lo schema CreativeWork accettato.
Tieni presente che sulla base dell'esempio sto considerando il mio sito blog, progettato in HTML5, quindi ammetto eventuali incongruenze con il layout.
Questo si riferisce a titoli, sezioni e elementi di blocco, tag. Presta attenzione a caratteristiche standard e aggiungi loro gli attributi necessari per analogia con l'esempio.
Layout della parte superiore della paginaLa pagina finale in WordPress viene creata combinando diversi file modello. Fonte la parte superiore della pagina si trova solitamente nel file header.php. Aggiungiamo attributi al tag per indicare il corpo della pagina web. Tipo di markup: pagina Web.
Ora aggiungiamo il micro markup al tag: si tratta di un elemento HTML5 sezionale utilizzato per l'intestazione del sito. Tipo di markup: WPHeader.
Nel mio caso, il titolo del blog è racchiuso dinamicamente in tag diversi a seconda della pagina in cui ci troviamo. Quando si apre la pagina principale, il nome è racchiuso nell'intestazione H1, mentre i nomi degli annunci sono in H2. A sua volta, si accede a una pagina con una voce, nell'intestazione livello superiore Viene inserito il titolo dell'articolo e il titolo del blog conduce alla pagina principale.
È così che ho formato una struttura logica dei titoli, corretta dal mio punto di vista. Aggiungo la proprietà name alla costruzione:
