HTML
Meta informazioni
Ricerca…
introduzione
I meta tag nei documenti HTML forniscono informazioni utili sul documento, tra cui una descrizione, parole chiave, autore, date delle modifiche e circa 90 altri campi. Questo argomento riguarda l'utilizzo e lo scopo di questi tag.
Sintassi
-
<meta name="metadata name" content="value"> -
<meta http-equiv="pragma directive" content="value"> -
<meta charset="encoding label">
Osservazioni
Il meta tag è un tag HTML utilizzato per impostare i metadati del documento HTML. I meta tag devono essere inseriti nell'elemento head. Una pagina può avere un numero qualsiasi di meta tag.
Le keywords meta tag non sono in genere utilizzate dai robot. La maggior parte dei motori di ricerca determina quali parole chiave si adattano al contenuto delle pagine web. Detto questo, nulla dice che non dovresti più includere il meta tag keywords.
I metadati di una pagina sono utilizzati principalmente dal browser (come il ridimensionamento di un documento) e dagli spider per la scansione del Web utilizzati dai motori di ricerca (Google, Yahoo !, Bing).
La specifica fornisce un numero di nomi di metadati standardizzati da utilizzare con <meta name> e le direttive standardizzate sui pradma dei metadati da utilizzare con <meta http-equiv> . Tuttavia, molti servizi su Internet (web crawler, strumenti di authoring, servizi di condivisione sociale, ecc.) Utilizzano il modulo <meta name> come punto di estensione generico per i metadati. Alcuni di questi sono elencati nella pagina wiki della specifica .
Codifica dei caratteri
L'attributo charset specifica la codifica dei caratteri per il documento HTML e deve essere una codifica caratteri valida (gli esempi includono windows-1252 , ISO-8859-2 , Shift_JIS e UTF-8 ). UTF-8 (Unicode) è il più usato e dovrebbe essere usato per qualsiasi nuovo progetto.
<meta charset="UTF-8">
<meta charset="ISO-8859-1">
Tutti i browser hanno sempre riconosciuto il modulo <meta charset> , ma se per qualche motivo hai bisogno che la tua pagina sia valida in HTML 4.01, puoi invece utilizzare quanto segue:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
Vedi anche lo standard di codifica , per visualizzare tutte le etichette di codifica dei caratteri disponibili che i browser riconoscono.
Aggiornamento automatico
Per aggiornare la pagina ogni cinque secondi, aggiungi questo meta elemento nell'elemento head :
<meta http-equiv="refresh" content="5">
ATTENZIONE! Sebbene si tratti di un comando valido, si consiglia di non utilizzarlo a causa dei suoi effetti negativi sull'esperienza utente. Rinfrescare troppo spesso la pagina può far sì che non risponda e spesso scorre verso l'alto della pagina. Se alcune informazioni sulla pagina devono essere aggiornate continuamente, ci sono molti modi migliori per farlo semplicemente aggiornando una parte di una pagina.
Controllo del layout mobile
I siti comuni ottimizzati per dispositivi mobili utilizzano il <meta name="viewport"> come questo:
<meta name="viewport" content="width=device-width, initial-scale=1">
L'elemento viewport fornisce al browser le istruzioni su come controllare le dimensioni e il ridimensionamento della pagina in base al dispositivo che si sta utilizzando.
Nell'esempio di cui sopra, content="width=device-width significa che il browser renderà la larghezza della pagina alla larghezza del proprio schermo. Quindi, se questo schermo è 480px wide , la finestra del browser sarà 480px wide . initial-scale=1 indica che lo zoom iniziale (che in questo caso è 1, significa che non esegue lo zoom).
Di seguito sono riportati gli attributi supportati da questo tag:
| Attributo | Descrizione |
|---|---|
width | La larghezza della finestra virtuale del dispositivo. Valori 1 : device-width o larghezza effettiva in pixel, come 480 |
height | L'altezza della finestra virtuale del dispositivo. Valori 2 : device-height o larghezza effettiva in pixel, come 600 |
initial-scale | Lo zoom iniziale quando viene caricata la pagina. 1.0 non ingrandisce. |
minimum-scale | L'importo minimo che il visitatore può ingrandire sulla pagina. 1.0 non ingrandisce. |
maximum-scale | L'importo massimo che il visitatore può ingrandire sulla pagina. 1.0 non ingrandisce. |
user-scalable | Consente al dispositivo di ingrandire e rimpicciolire. I valori sono yes o no . Se impostato su no, l'utente non è in grado di ingrandire la pagina web. L'impostazione predefinita è sì. Le impostazioni del browser possono ignorare questa regola. |
Gli appunti:
1 La proprietà width può essere specificata in pixel ( width=600 ) o in base alla larghezza del dispositivo ( width=device-width ) che rappresenta la larghezza fisica dello schermo del dispositivo.
2 Analogamente, la proprietà height può essere specificata in pixels ( height=600 ) o in base device-height ( height=device-height ) che rappresenta l'altezza fisica dello schermo del dispositivo.
Informazioni sulla pagina
application-name
Fornire il nome dell'applicazione Web rappresentata dalla pagina.
<meta name="application-name" content="OpenStreetMap">
Se non è un'applicazione Web, il meta tag application-name non deve essere utilizzato.
author
Imposta l'autore della pagina:
<meta name="author" content="Your Name">
Si può dare un solo nome.
description
Imposta la descrizione della pagina:
<meta name="description" content="Page Description">
Il meta tag description può essere utilizzato da vari motori di ricerca durante l'indicizzazione della pagina Web per scopi di ricerca. Di solito, la descrizione contenuta nel meta tag è il breve riassunto che compare sotto la pagina / il titolo principale del sito Web nei risultati del motore di ricerca. Google di solito utilizza solo le prime 20-25 parole della tua descrizione.
generator
<meta name="generator" content="HTML Generator 1.42">
Identifica uno dei pacchetti software utilizzati per generare il documento. Da utilizzare solo per le pagine in cui il markup viene generato automaticamente.
keywords
Imposta le parole chiave per i motori di ricerca (separati da virgole):
<meta name="keywords" content="Keyword1, Keyword2">
Il meta tag keywords viene talvolta utilizzato dai motori di ricerca per conoscere la query di ricerca pertinente alla tua pagina web.
Come regola generale, è probabilmente una buona idea non aggiungere troppe parole, poiché la maggior parte dei motori di ricerca che utilizzano questo meta tag per l'indicizzazione indicizzerà solo le prime 20 parole. Assicurati di inserire prima le parole chiave più importanti.
robot
L'attributo robots , supportato da diversi principali motori di ricerca, controlla se gli spider dei motori di ricerca sono autorizzati a indicizzare una pagina o meno e se devono seguire o meno i link da una pagina.
<meta name="robots" content="noindex">
Questo esempio indica a tutti i motori di ricerca di non mostrare la pagina nei risultati di ricerca. Altri valori consentiti sono:
| Valore / Direttiva | Senso |
|---|---|
all | Predefinito. Equivalente index, follow . Vedi la nota sotto. |
noindex | Non indicizzare affatto la pagina. |
nofollow | Non seguire i link su questa pagina |
follow | I collegamenti sulla pagina possono essere seguiti. Vedi la nota sotto. |
none | Equivale a noindex, nofollow . |
noarchive | Non rendere disponibile una versione cache di questa pagina nei risultati di ricerca. |
nocache | Sinonimo di noarchive utilizzato da alcuni bot come Bing. |
nosnippet | Non mostrare uno snippet di questa pagina nei risultati di ricerca. |
noodp | Non utilizzare i metadati di questa pagina dal progetto Open Directory per titoli o snippet nei risultati di ricerca. |
notranslate | Non offrire traduzioni di questa pagina nei risultati di ricerca. |
noimageindex | Non indicizzare le immagini su questa pagina. |
unavailable_after [RFC-850 date/time] | Non mostrare questa pagina nei risultati di ricerca dopo la data / ora specificata. La data / ora devono essere specificate nel formato RFC 850 . |
Nota: la definizione esplicita index e / o del follow , mentre i valori validi, non sono necessari in quanto praticamente tutti i motori di ricerca presumono che siano autorizzati a farlo, se non gli viene impedito esplicitamente di farlo. Simile a come funziona il file robots.txt, i motori di ricerca in genere cercano solo cose che non sono autorizzati a fare. Solo l'affermazione di cose che un motore di ricerca non è autorizzato a fare impedisce anche l'affermazione accidentale di opposti (come index, ..., noindex ) che non tutti i motori di ricerca tratteranno nello stesso modo.
Riconoscimento numero telefonico
Le piattaforme mobili come iOS riconoscono automaticamente i numeri di telefono e li trasformano in tel: links. Mentre la funzione è molto pratica, il sistema a volte rileva codici ISBN e altri numeri come numeri di telefono.
Per Safari mobile e alcuni altri browser mobili basati su WebKit per disattivare il riconoscimento e la formattazione automatica del numero di telefono, è necessario questo metatag:
<meta name="format-detection" content="telephone=no">
Social media
Open Graph è uno standard per i metadati che estende le normali informazioni contenute nel codice headup del sito. Ciò consente a siti Web come Facebook di visualizzare informazioni più approfondite e più complete su un sito Web in un formato strutturato. Queste informazioni vengono quindi visualizzate automaticamente quando gli utenti condividono collegamenti a siti Web contenenti metadati OG su Facebook.
Facebook / Apri grafico
<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">
<!-- Facebook: https://developers.facebook.com/docs/sharing/webmasters#markup -->
<!-- Open Graph: http://ogp.me/ -->
Facebook / Articoli istantanei
<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">
<!-- The URL of the web version of your article -->
<link rel="canonical" href="http://example.com/article.html">
<!-- The style to be used for this article -->
<meta property="fb:article_style" content="myarticlestyle">
Twitter utilizza il proprio markup per i metadati. Questi metadati vengono utilizzati come informazioni per controllare come vengono visualizzati i tweet quando contengono un collegamento al sito.
cinguettio
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
Google+ / Schema.org
<link href="https://plus.google.com/+YourPage" rel="publisher">
<meta itemprop="name" content="Content Title">
<meta itemprop="description" content="Content description less than 200 characters">
<meta itemprop="image" content="https://example.com/image.jpg">
Reindirizzamento automatico
A volte la tua pagina web ha bisogno di un reindirizzamento automatico.
Ad esempio, per reindirizzare a example.com dopo 5 secondi:
<meta http-equiv="refresh" content="5;url=https://www.example.com/" />
Questa linea ti invierà al sito web designato (in questo example.com dopo 5 secondi.
Se è necessario modificare il ritardo prima di un reindirizzamento, è sufficiente modificare il numero subito prima del tuo ;url= modificherà il tempo di ritardo.
App Web
Puoi configurare la tua app web o il tuo sito web per aggiungere un'icona di collegamento dell'applicazione alla schermata iniziale del dispositivo e avviare l'app in modalità "app" a schermo intero utilizzando la voce di menu "Aggiungi a homescreen" di Chrome per Android.
Sotto i meta tag si aprirà l'app Web in modalità a schermo intero (senza barra degli indirizzi).
Android Chrome
<meta name="mobile-web-app-capable" content="yes">
IOS
<meta name="apple-mobile-web-app-capable" content="yes">
Puoi anche impostare il colore per la barra di stato e la barra degli indirizzi nel meta tag.
Android Chrome
<meta name="theme-color" content="black">
IOS
<meta name="apple-mobile-web-app-status-bar-style" content="black">