Un HEAD completo con tutti i META tag di cui hai bisogno in Blogger

I meta tag sono un tipo di tag HTML inserito nella sezione principale ` <head>` . Servono a contrassegnare determinati dati utili per i motori di ricerca o altre applicazioni, dati invisibili agli utenti.
Questi metadati (da cui il nome) sono, ad esempio, quelli che Facebook utilizza quando un post viene condiviso sul suo social network, estraendo informazioni come l'immagine da visualizzare o il testo di riepilogo allegato.

Manipolazione fotografica di JeanFan

Attualmente gli obiettivi non sono più così rilevanti per il posizionamento come un tempo, ma continuano a fornire punti che si sommano.
Il titolo di questo post potrebbe sembrare un po' pretenzioso, ma onestamente non mi vengono in mente altri tag veramente necessari per un blog. L'elenco è piuttosto completo e credo di aver esagerato includendone alcuni che potevano essere omessi. Già che c'ero, ho anche incluso il tag `title` nel codice , anche se non è propriamente un meta tag , e una riga speciale di Blogger che carica una serie di cose che fanno funzionare tutto correttamente su questa piattaforma. Si tratta di un ` include` chiamato `all-head-content` , che è quasi autoesplicativo se tradotto dall'inglese. Per quanto riguarda questa riga, carica automaticamente una serie di metadati importanti, inclusi alcuni che aggiungeremo manualmente. Proprio per questo motivo, deve essere inserito per primo, perché se fosse per ultimo, ciò che quell'`include` carica sovrascriverebbe ciò che abbiamo scritto, e noi vogliamo che sia esattamente l'opposto: che i nostri contenuti sovrascrivano i dati automatici. Tutto ciò che segue dovrebbe essere inserito tra il tag di apertura ` <head> ` e il primo tag ` <b:skin><![CDATA[/*` . Anche se lo presenterò a blocchi per consentire qualche commento, dovrebbe essere tutto continuo in quella parte del template. A meno che non ci siano dettagli specifici, non credo che serva altro.

Carichiamo l' include e i primi due meta tag : uno per forzare la modalità di compatibilità più elevata della versione di Internet Explorer dell'utente e un altro per i modelli reattivi.

<b:include data='blog' name='all-head-content'/>

<meta content='IE=edge' http-equiv='X-UA-Compatible'/>

<meta content='width=device-width,initial-scale=1.0,user-scalable=yes' name='viewport'/>

Questo non è un meta tag , ma dovrebbe essere inserito nella sezione head . È responsabile del titolo della pagina (il testo che vedi nella scheda del browser). Esiste un formato per la homepage e un altro per le altre pagine.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

La descrizione o il breve riepilogo testuale del contenuto del post è abilitato in Impostazioni > Preferenze motore di ricerca > Modifica > Abilita descrizione per la ricerca? > Sì. Anche la descrizione della homepage viene salvata nella stessa posizione. La descrizione di ogni post viene salvata individualmente durante la scrittura/modifica, dal menu a destra dell'editor in Impostazioni post > Descrizione ricerca
. Se dimentichi di farlo per un post, la condizione che ho menzionato salverà un testo diverso per ogni pagina, evitando descrizioni duplicate. (Puoi sostituire il testo " Inserisci e ti mostreremo questo. " con qualsiasi altro testo generico.)

<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>
<b:else/>
<meta expr:content='data:blog.pageName + " . Entra e ti mostreremo questo. "' name='description' property='og:description'/>
</b:if>

Queste sono linee guida generali, la maggior parte delle quali non sono necessarie. Ad esempio, Google non ha bisogno del tag "lingua" per determinare la lingua della pagina, ma vale la pena di aiutarlo.
Le modifiche da apportare sono evidenziate in un colore diverso.

<meta content=' G+ Nick ' name='author'/> 
<meta content=' es ' http-equiv='content-language'/>
<meta content=' Generale ' name='rating'/> 
<meta content=' keyword1, keyword2, keyword3, ecc. ' name='keywords'/>

Le ultime sono quelle necessarie per le Card di Facebook e Twitter . Quelle di Facebook non sono esclusive, poiché il suo protocollo (OpenGraph) funziona anche per altri siti. Credo che persino Google le legga.
Se le immagini non sono abbastanza grandi, quella specificata potrebbe non apparire ( maggiori informazioni ) e per utilizzare le Card di Twitter è necessario registrarsi in anticipo .

<meta expr:content='data:blog.pageName' name='twitter:title' property='og:title'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image' property='og:image'/>
<b:else/>
<meta content=' default_image_URL ' name='twitter:image' property='og:image'/>
</b:if>

<meta content='blog' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content=' blog_page_url_on_facebook ' property='article:publisher'/>
<meta content=' author_url_on_facebook ' property='article:author'/>

<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta content=' @user_twitter ' name='twitter:site'/>
<meta content=' @user_twitter ' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

Una volta implementate tutte queste modifiche e salvate, puoi verificare che tutto funzioni correttamente andando sulla tua home page (e anche su qualsiasi post per vedere la differenza), cliccando con il tasto destro del mouse e selezionando " Visualizza sorgente pagina ". Nella parte superiore, vedrai i meta tag con i valori aggiornati.
Puoi anche testare i seguenti link: Facebook | Twitter | Google . Per aggiornare la cache di Facebook ed evitare che vengano visualizzati dati obsoleti dopo queste modifiche, dopo aver digitato l'indirizzo che desideri controllare, clicca sul pulsante " Recupera nuove informazioni di scraping" .

fonte

Archivio Blogger

Cerca nel blog

Un HEAD completo con tutti i META tag di cui hai bisogno in Blogger

Commenti

Posta un commento