HTML => Metainformation

Introduktion

Metataggar i HTML-dokument ger användbar information om dokumentet inklusive beskrivning, nyckelord, författare, datum för ändringar och cirka 90 andra fält. Detta ämne täcker användningen och syftet med dessa taggar.

Syntax

<meta name="metadata name" content="value">
<meta http-equiv="pragma directive" content="value">
<meta charset="encoding label">

Anmärkningar

Metataggen är en HTML-tagg som används för att ställa in metadata för HTML-dokumentet. Metataggar måste gå i huvudelementet. En sida kan ha valfritt antal metataggar.

keywords används vanligtvis inte av robotar. De flesta sökmotorer avgör vilka nyckelord som passar innehållet på webbsidorna. Med det sagt säger ingenting att du inte längre ska inkludera sökordens metatagg.

Metadata på en sida används mest av webbläsaren (som skalning av ett dokument) och webbsökande spindlar som används av sökmotorer (Google, Yahoo !, Bing).

Specifikationen ger ett antal standardiserade metadata-namn för användning med <meta name> och standardiserade metadata-pragma-direktiv för användning med <meta http-equiv> . Många tjänster över internet (webcrawler, författarverktyg, sociala delningstjänster osv.) <meta name> formuläret <meta name> som en generisk förlängningspunkt för metadata. Vissa av dessa är listade på specens wikisida .

Teckenkodning

charset attributet anger teckenkodningen för HTML-dokumentet och måste vara en giltig teckenkodning (exempel inkluderar windows-1252 , ISO-8859-2 , Shift_JIS och UTF-8 ). UTF-8 (Unicode) är den mest använda och bör användas för alla nya projekt.

<meta charset="UTF-8">

<meta charset="ISO-8859-1">

Alla webbläsare har alltid känt formen <meta charset> , men om du av någon anledning behöver din sida för att vara giltig HTML 4.01 kan du använda följande istället:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

Se även Kodningsstandarden för att se alla tillgängliga etikettkodningsetiketter som webbläsare känner igen.

Automatisk uppdatering

För att uppdatera sidan var femte sekund, lägga till denna meta element i head Element:

<meta http-equiv="refresh" content="5">

VARNING! Även om detta är ett giltigt kommando rekommenderas det att du inte använder det på grund av dess negativa effekter på användarupplevelsen. Att uppdatera sidan för ofta kan göra att den inte svarar och rullar ofta till toppen av sidan. Om viss information på sidan behöver uppdateras kontinuerligt, finns det mycket bättre sätt att göra det genom att bara uppdatera en del av en sida.

Mobillayoutkontroll

Vanliga mobiloptimerade webbplatser använder <meta name="viewport"> taggen så här:

<meta name="viewport" content="width=device-width, initial-scale=1">

viewport elementet ger webbläsaren instruktioner om hur du styr sidans dimensioner och skalning baserat på den enhet du använder.

I exemplet ovan, content="width=device-width innebär att webbläsaren kommer att göra bredden på sidan bredden på sin egen skärm. Så om den skärmen är 480px wide , kommer webbläsarfönstret vara 480px wide . initial-scale=1 visar att den första zoomningen (som är 1 i det här fallet betyder att den inte zoomer).

Nedan är de attribut som denna tagg stöder:

Attribut	Beskrivning
`width`	Bredden på enhetens virtuella visningsport. Värden ¹ : `device-width` eller den faktiska bredden i pixlar, som `480`
`height`	Höjden på enhetens virtuella visningsport. Värden ² : `device-height` eller den faktiska bredden i pixlar, som `600`
`initial-scale`	Den första zoomen när sidan laddas. 1.0 zoomar inte.
`minimum-scale`	Det lägsta belopp som besökaren kan zooma på sidan. `1.0` zoomar inte.
`maximum-scale`	Det maximala beloppet som besökaren kan zooma på sidan. `1.0` zoomar inte.
`user-scalable`	Låter enheten zooma in och ut. Värdena är `yes` eller `no` . Om den är inställd på nej kan användaren inte zooma in på webbsidan. Standardvärdet är ja. Webbläsarinställningar kan ignorera denna regel.

Anmärkningar:

¹ width kan antingen anges i pixlar ( width=600 ) eller med enhetsbredd ( width=device-width ) som representerar den fysiska bredden på enhetens skärm.

² På liknande sätt height egenskap kan antingen anges i pixels ( height=600 ) eller genom device-height ( height=device-height ) som representerar den fysiska höjden på enhetens skärm.

Sidinformation

`application-name`

Ange namnet på webbapplikationen som sidan representerar.

<meta name="application-name" content="OpenStreetMap">

Om det inte är en webbapplikation får metataggen för application-name inte användas.

`author`

Ställ in författarens sida:

<meta name="author" content="Your Name">

Endast ett namn kan anges.

`description`

Ställ in beskrivningen på sidan:

<meta name="description" content="Page Description">

description metatagg kan användas av olika sökmotorer medan du indexerar din webbsida för sökningsändamål. Vanligtvis är beskrivningen i metataggen den korta sammanfattningen som visas under sidan / webbplatsens huvudtitel i sökmotorns resultat. Google använder vanligtvis bara de första 20-25 orden i din beskrivning.

`generator`

<meta name="generator" content="HTML Generator 1.42">

Identifierar ett av programvarupaketen som används för att generera dokumentet. Används endast för sidor där markeringen genereras automatiskt.

`keywords`

Ställ in nyckelord för sökmotorer (kommaseparerade):

<meta name="keywords" content="Keyword1, Keyword2">

keywords metatagg används ibland av sökmotorer för att känna till den sökfråga som är relevant för din webbsida.
Som tumregel är det förmodligen en bra idé att inte lägga till för många ord, eftersom de flesta sökmotorer som använder denna metatagg för indexering endast indexerar de första ~ 20 orden. Se till att du sätter de viktigaste nyckelorden först.

robotar

robots , som stöds av flera stora sökmotorer, styr huruvida sökmotorspindlar får indexera en sida eller inte och om de ska följa länkar från en sida eller inte.

<meta name="robots" content="noindex">

Detta exempel instruerar alla sökmotorer att inte visa sidan i sökresultaten. Andra tillåtna värden är:

Värde / direktiv	Menande
`all`	Standard. Lika med `index, follow` . Se not nedan.
`noindex`	Indexera inte sidan alls.
`nofollow`	Följ inte länkarna på den här sidan
`follow`	Länkarna på sidan kan följas. Se not nedan.
`none`	Likvärdigt med `noindex, nofollow` .
`noarchive`	Gör inte en cache-version av denna sida tillgänglig i sökresultaten.
`nocache`	`noarchive` används av vissa bots som Bing.
`nosnippet`	Visa inte ett utdrag av den här sidan i sökresultaten.
`noodp`	Använd inte metadata på den här sidan från Open Directory-projektet för titlar eller utdrag i sökresultaten.
`notranslate`	Erbjud inte översättningar av denna sida i sökresultaten.
`noimageindex`	Indexera inte bilder på den här sidan.
`unavailable_after [RFC-850 date/time]`	Visa inte den här sidan i sökresultaten efter det angivna datumet / tiden. Datum / tid måste anges i RFC 850-format .

Obs: Det är inte nödvändigt att definiera index och / eller follow , även om giltiga värden är giltiga, eftersom alla sökmotorer ganska mycket kommer att anta att de får göra det om inte uttryckligen hindras från att göra det. I likhet med hur robots.txt-filen fungerar söker sökmotorer i allmänhet bara efter saker som de inte får göra. Att endast ange saker som en sökmotor inte får göra förhindrar också oavsiktligt att motsätta sig motsatser (som index, ..., noindex ), som inte alla sökmotorer kommer att behandla på samma sätt.

Telefonnummer erkännande

Mobila plattformar som iOS känner automatiskt igen telefonnummer och förvandlar dem till tel: -länkar. Medan funktionen är väldigt praktisk upptäcker ibland ISBN-koder och andra nummer som telefonnummer.

För mobil Safari och vissa andra webbKit-baserade mobila webbläsare för att stänga av automatisk telefonnummerigenkänning och formatering, behöver du denna metatagg:

<meta name="format-detection" content="telephone=no">

Sociala media

Open Graph är en standard för metadata som utvidgar den normala informationen som finns i en webbplats huvudmarkering. Detta gör det möjligt för webbplatser som Facebook att visa djupare och rikare information om en webbplats i ett strukturerat format. Denna information visas sedan automatiskt när användare delar länkar till webbplatser som innehåller OG-metadata på Facebook.

Facebook / Öppen graf

<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 / Instant Articles

<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 använder sin egen markering för metadata. Dessa metadata används som information för att kontrollera hur tweets visas när de innehåller en länk till webbplatsen.

Twitter

<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">

Automatisk omdirigering

Ibland behöver din webbsida en automatisk omdirigering.

Om du till exempel vill omdirigera till example.com efter 5 sekunder:

<meta http-equiv="refresh" content="5;url=https://www.example.com/" />

Den här linjen skickar dig till den angivna webbplatsen (i detta fall example.com efter 5 sekunder.

Om du behöver ändra tidsfördröjningen innan en omdirigering, ändrar du bara numret rätt innan din ;url= kommer att förändra tidsfördröjningen.

Webb-app

Du kan ställa in din webbapp eller webbplats så att en applikationsgenvägsikon läggs till på en enhets hemskärm och låta appen startas i "app-läge" på helskärm med Chrome för Android: s menyobjekt "Lägg till på hemskärmen" .

Under metataggar öppnas webbapp i helskärmsläge (utan adressfält).

Android Chrome

<meta name="mobile-web-app-capable" content="yes">

IOS

<meta name="apple-mobile-web-app-capable" content="yes">

Du kan också ställa in färg för statusfält och adressfält i metatagg.