HTML <meta> name-egenskap
Definition och användning
name Egenskapen specificerar metadata-namnet.
name Egenskapen specificerar content-egenskapen värdeens namn.
genom att använda name och content egenskapen, kan använda namn/värde-par för att definiera metadata för dokumentet. Bland annatname Egenskapen representerar metadata-typen, medan content Egenskapen används för att tillhandahålla värden.
Nedan visas en tabell över några fördefinierade metadata-typer.
Observera:om http-equiv-egenskapenom name Egenskaper.
Tips:HTML5 introducerade ett sätt för webbdesigners att kontrollera viewport (den användares synliga område på webbsidan) genom <meta>-taggen (se exempel nedan för "Ställ in viewport").
Exempel
Använd name-egenskapen för att definiera beskrivningar, nyckelord och författare för HTML-dokumentet. Definiera också viewport för att kontrollera sidans storlek och skalningsprocent för olika enheter:
<head> <meta name="description" content="Gratis Webbtillägg"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="YK Investment"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
Syntax
<meta name="value">
Egenskapsvärde
| Värde | Beskrivning |
|---|---|
| application-name | Specificerar namnet på den webbapplikation som sidan representerar. |
| author |
Specificerar namnet på författaren till dokumentet. Till exempel: <meta name="author" content="YK Investment"> |
| description |
Specificerar beskrivningen av sidan. Sökmotorer kan välja denna beskrivning för att visa i sökresultaten. Till exempel: <meta name="description" content="Gratis Webbtillägg"> |
| generator |
Specificerar ett av paketen som används för att skapa dokumentet (inte för att skriva sidor för hand). Till exempel: <meta name="generator" content="FrontPage 4.0"> |
| keywords |
Specificerar en lista över nyckelord relaterade till sidan, separerade med kommatecken. Informera sökmotorer om innehållet på sidan. Tips:Ange alltid nyckelord (sökmotorer behöver klassificera sidan). Till exempel: <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport | Kontrollera viewport (det användarvänliga området på en webbsida). |
Förklaring
Förutom de sex fördefinierade metadata-typerna kan man också använda metadata-utökningar. Besök denna sida för att få en uppdaterad lista över tillgängliga utökningar:
http://wiki.whatwg.org/wiki/MetaExtensions
Vissa utökningar används ofta, medan andra har ett mycket begränsat användningsområde och används nästan aldrig. Robots-metadatan tillhör de första. HTML-dokumentförfattare kan använda den för att säga till sökmotorer hur de ska behandla dokumentet. Till exempel:
<meta name="robots" content="noindex">
Denna metadata-typ har tre värden som de flesta webbläsare känner till:
- noindex - betyder att denna sida inte ska indexeras
- noarchive - betyder att denna sida inte ska arkiveras eller cachas
- nofollow - betyder att länkar på denna sida inte ska följas vid vidare sökning
Det finns få tillgängliga metadata-utökningar, utvecklare bör läsa den online-listan och se vilka som kan användas i sina projekt.
Tips
För att låta sökmotorer veta hur innehållet ska kategoriseras och rangordnas, har det under en lång tid varit det främsta sättet att använda keywords-metadatat. Dagens sökmotorer litar inte lika mycket på keywords-metadatat som förr, eftersom det kan missbrukas för att skapa en falsk illusion av relevans mellan sidinnehåll och nyckelord. För att skapa en bättre bild av innehållet i sökmotorernas ögon, är det bästa sättet att använda rekommendationerna de själva erbjuder. De flesta sökmotorer erbjuder riktlinjer för att optimera webbsidor eller hela webbplatser.
Google: Sökmotoroptimering (SEO) nybörjarguide
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn
Baidu: Baidus sökmotoroptimeringsguide
Ställ in viewport
Viewport är den användarvänliga området på en webbsida. Det varierar beroende på enhet – det är mindre på en mobiltelefon än på en datorskärm.
Du bör inkludera följande <meta>-element i alla webbsidor:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Det ger webbläsaren instruktioner om hur man kontrollerar sidans storlek och skalningsförhållande.
width=device-width Delar av inställningen av sidans bredd för att följa skärmens bredd på enheten (varierar beroende på enhet).
initial-scale=1.0 Delar av inställningen av den initiala zoomnivån när webbsidan laddas för första gången av webbläsaren.
Detta är ett exempel på en webbsida utan viewport-metatagg, samt samma webbsida med viewport-metatagg:
Tips:Om du använder en mobiltelefon eller en surfplatta för att bläddra genom denna sida, kan du klicka på de två länkarna nedan för att se skillnaderna.
Du kan hittaResponsiv webbdesign -Viewport-tutorialLär dig mer om viewport.
Webbläsarstöd
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Stöd | Stöd | Stöd | Stöd | Stöd |
