Viktiga Slutsatser
Här är de huvudsakliga punkterna om metataggar:
- Metataggar levererar essentiell information om en webbsida, vilken används av sökmotorer, webbläsare och olika webbtjänster.
- De mest betydelsefulla typerna omfattar metabeskrivningar, Open Graph-taggar, viewport-taggar och HTTP-ekvivalenta taggar.
- Anpassade metataggar ger utrymme för flexibilitet, men kräver noggrann dokumentation och genomtänkt planering.
Utöver sidans titel samt de skript och stilmallar som används, kan en HTML-sidas huvudsektion innehålla metataggar. Dessa element är av stor vikt för sökmotoroptimering (SEO), tillgänglighet och den allmänna prestandan hos webbplatsen.
Låt oss utforska användningen av metataggar och vilken typ av information de kan förmedla.
Metataggar är element som tillhandahåller kompletterande information om en webbsida. Även om webbläsare inte visar denna metadata direkt, kan den användas av en mängd olika verktyg. Detta innefattar sökmotorer, webbläsare och andra webbtjänster.
De data som du specificerar i metataggar bidrar till att förbättra sökmotorrankningar, öka webbplatsens responsivitet och tillgänglighet, samt optimera hur dina sidor presenteras på sociala medieplattformar.
Metataggar är självlåsande taggar och har ingen slut-tagg som </meta>, eftersom de inte omger något innehåll. All information lagras i attribut. Du kan inkludera metataggar i huvudsektionen av din HTML-fil:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dokument</title> </head> <body> </body> </html>
Detta exempel på HTML-skelett innehåller två metataggar i huvudsektionen. De ger information om teckenuppsättningen (UTF-8) och viewport.
De flesta metataggar använder en kombination av följande attribut för att lagra information:
- namn och innehåll: Attributet ”namn” fungerar som en etikett, medan attributet ”innehåll” lagrar den data som är kopplad till etiketten. Detta skapar ett flexibelt system som kan utökas med den metadata du behöver.
- egenskap: Detta attribut används ibland som ett alternativ till ”namn” och har ett liknande syfte.
- http-equiv: Detta attribut, som står för ”HTTP-ekvivalent”, definierar en HTTP-header för värdet specificerat i attributet ”innehåll”.
- schema: I kombination med ”namn” definierar detta attribut datatypen som lagras i attributet ”innehåll”.
Nedan följer en sammanfattning av metataggar som vanligen stöds av olika webbtjänster och webbläsare:
Metabeskrivningstaggen
Detta utdrag på maximalt 155 tecken summerar en sidas innehåll. Sökmotorer visar den ofta under sidans titel och URL. Det är viktigt att ge en kortfattad och korrekt beskrivning för att locka användare att klicka på länken och besöka din sida.
<meta name="description" content="En kort beskrivning av din sida">
Open Graph Metataggar
Facebook och andra sociala medier använder dessa taggar i stor utsträckning. De använder informationen i dessa taggar för att förbättra presentationen av länkar till din sida när användare delar dem. Open Graph metataggar inkluderar attribut som og:title, og:description och og:image:
<meta property="og:title" content="Din sidtitel"> <meta property="og:description" content="En kort beskrivning av din sida"> <meta property="og:image" content="URL till en relaterad bild">
SEO Metataggar
Dessa taggar förmedlar information till sökmotorer och kan hjälpa till att öka din sidas ranking. De ingår ofta i listan över viktiga SEO-metoder. De inkluderar attribut som robots, author och fler. Även om betydelsen av dessa taggar har minskat över tiden, är det fortfarande viktigt att inkludera dem i ditt HTML-dokument.
<meta name="robots" content="index, follow"> <meta name="author" content="Ditt namn">
Viewport Metataggen
Viewport-metataggen är en viktig del av responsiv webbdesign. Den instruerar webbläsaren att anpassa webbsidans layout efter enhetens bredd, vilket garanterar att innehållet visas korrekt och är läsbart på mobila enheter.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTTP-Equiv Metataggar
Dessa metataggar är viktiga för att styra specifika aspekter av hur webbläsare och servrar behandlar webbsidor. De inkluderar attribut som refresh och X-UA-Compatible. Även om deras direkta inverkan på SEO kan variera, spelar de en avgörande roll för att påverka sidans beteende och kompatibilitet.
<meta http-equiv="refresh" content="5;url=https://example.com"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
Du kommer inte att använda alla dessa taggar i dina projekt på en gång, men det är fortfarande viktigt att ha en god förståelse för de olika metataggarna som är tillgängliga. Att använda metataggar gynnar också strukturen i dina HTML-dokument.
Metataggar är flexibla eftersom:
- Du kan fritt välja namn för att lagra vilken data du vill.
- Webbläsare visar inte innehållet direkt, men det är alltid synligt i sidans källkod.
Här är ett exempel på en anpassad metatagg:
<meta name="target-audience" content="utvecklare">
I det här exemplet anger den anpassade taggen att innehållet riktar sig till utvecklare.
Anpassade metataggar är ett sätt att utöka standarduppsättningen av taggar. Det är dock viktigt att noggrant dokumentera de anpassade taggar du använder och ha en tydlig bild av hur de ska användas. Andra tjänster kommer som standard inte att använda eller känna igen dem, så du kan behöva skriva egen kod för att bearbeta dem.