Vad är HTML-metataggar och vad används de till?

Viktiga takeaways

  • Metataggar ger viktig information om en webbsida för sökmotorer, webbläsare och webbtjänster.
  • Viktiga typer inkluderar metabeskrivningar, öppna diagram, viewport och HTTP-ekvivalenta taggar.
  • Anpassade metataggar erbjuder flexibilitet men kräver noggrann dokumentation och planering.

Vid sidan av sidans titel och de skript och stilmallar den använder kan en HTML-huvudsektion innehålla metataggar. Dessa är viktiga för SEO, tillgänglighet och webbplatsens övergripande prestanda.

Lär dig hur du använder metataggar och ta reda på vilken information de kan ge.

Metataggar är element som ger ytterligare information om en webbsida. Webbläsare visar inte denna metadata direkt, men alla verktyg kan använda den för olika ändamål. Detta inkluderar sökmotorer, webbläsare och andra webbtjänster.

Datan du anger i metataggar hjälper till att förbättra sökmotorernas rankning, bidrar till webbplatsens respons och tillgänglighet och förbättrar visningen av dina sidor på sociala medier.

Metataggar är självstängande taggar; det finns ingen eftersom de inte omsluter något innehåll. De innehåller all sin data i attribut. Du kan lägga till metataggar i huvuddelen av din HTML-fil:

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width-device-width, initial-scale=1.0">

  <title>Document</title>
</head>
<body>

</body>
</html>

Detta exempel på HTML-boilerplate innehåller två metataggar i huvudsektionen. De tillhandahåller information om teckenuppsättningen (UTF-8) respektive viewport.

De flesta metataggar använder en kombination av följande attribut för att innehålla deras data.

  • namn och innehåll: Namnattributet är som en etikett, medan innehållsattributet lagrar data som är kopplade till den etiketten. Detta ger ett flexibelt, utbyggbart system för att lagra vilken metadata du än behöver.
  • egenskap: Det här attributet används ibland som ett alternativ till namn och tjänar ungefär samma syfte.
  • http-equiv: Detta attribut står för ”HTTP-ekvivalent” och definierar en HTTP-rubrik för värdet som anges i innehållsattributet.
  • Schema: Detta attribut, som används med namn, definierar datatypen i innehållsattributet.

Du kommer att upptäcka att följande metataggar vanligtvis stöds av olika webbtjänster och webbläsare.

Meta Description Tag

Detta utdrag på upp till 155 tecken sammanfattar en sidas innehåll. Sökmotorer visar det ofta under sidans titel och URL. Det är viktigt att ge en kortfattad och korrekt beskrivning för att uppmuntra användare att klicka på länken och besöka din sida.

 <meta name="description" content="A brief description of your page"> 

Öppna Graph Meta Tags

Facebook och andra sociala medieplattformar 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 den. Open Graph-metataggar inkluderar attribut som og:title, og:description och og:image:

 <meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A brief description of your page">
<meta property="og:image" content="URL of a related image">

SEO metataggar

Dessa taggar ger information för sökmotorer och kan hjälpa till att förbättra din sidas rankning. De finns också med på listan över viktiga bästa metoder för SEO. De inkluderar attribut som robotar, författare och mer. Även om betydelsen av dessa taggar har minskat med tiden, är det fortfarande viktigt att inkludera dem i ditt HTML-dokument.

 <meta name="robots" content="index, follow">
<meta name="author" content="Your Name">

Viewport Meta Tag

Viewport-metataggen är ett viktigt inslag i responsiv webbdesign. Den säger åt webbläsaren att justera webbsidans layout enligt enhetens bredd, vilket säkerställer 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 kontrollera specifika aspekter av hur webbläsare och servrar bearbetar webbsidor. De inkluderar attribut som refresh och X-UA-kompatibel. Ä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 dem alla på en gång i dina projekt, men det är fortfarande viktigt att ha en god förståelse för de olika metataggar som finns tillgängliga. Att använda metataggar ger också fördelar för att förbättra organisationen av HTML-dokument.

Metataggar är flexibla eftersom:

  • Du är fri att använda ett valfritt namn för att lagra vilken data du vill.
  • Webbläsare visar inte sitt innehåll, även om det alltid kommer att vara synligt i sidkällan.

Här är ett exempel på en anpassad metatagg:

 <meta name="target-audience" content="developers"> 

I det här exemplet anger den anpassade taggen innehållets målgrupp, vilket indikerar att den riktar sig till utvecklare.

Anpassade metataggar erbjuder ett sätt att utöka standarduppsättningen av taggar som är allmänt erkända. Det är dock viktigt att noggrant dokumentera de anpassade taggar du använder och ha en god förståelse för hur du kommer att använda dem. Andra tjänster kommer inte att använda eller känna igen dem som standard, så du kommer förmodligen att skriva din egen kod någon gång för att bearbeta dem.