Meta tags i HTML
Meta tags
Meta tags er de tags man sætter i headeren på siden. Man kan fra tid til anden læse, at meta tags ikke er nødvendige for siden, men det er en misforståelse. Man kan lave en side, med et indhold der er til at læse på en skærm, uden meta tags. Det er noget helt andet.
Der er generelt tre typer meta tags. Der er den type der ligner almindelige tags, med en start-tag og slut-tag, og der er HTTP-EQUIV META tags og META NAME tags. Den grundliggende opbygning for de to sidste er:
<META NAME=" " CONTENT=" ">
<META HTTP-EQUIV =" " CONTENT=" ">
Begge tags har to attributter, som skal have en værdi. NAME og HTTP-EQUIV definerer typen, f.eks. sprog-tag, keyword-tag, forfatter-tag osv., og CONTENT er værdien.
Forskellen på de to typer er, at HTTP-EQUIV er de tags der har noget at gøre med den måde browseren læser siden, når den bliver åbnet, f.eks. sprog, tegntabeller o.l., mens NAME er de tags, som robotterne bruger til indekseringen, f.eks. keywords, forfatter, udgiver osv. I praksis er det ikke helt sådan det fungerer, men næsten.
Der er generelt tre typer meta tags. Der er den type der ligner almindelige tags, med en start-tag og slut-tag, og der er HTTP-EQUIV META tags og META NAME tags. Den grundliggende opbygning for de to sidste er:
<META NAME=" " CONTENT=" ">
<META HTTP-EQUIV =" " CONTENT=" ">
Begge tags har to attributter, som skal have en værdi. NAME og HTTP-EQUIV definerer typen, f.eks. sprog-tag, keyword-tag, forfatter-tag osv., og CONTENT er værdien.
Forskellen på de to typer er, at HTTP-EQUIV er de tags der har noget at gøre med den måde browseren læser siden, når den bliver åbnet, f.eks. sprog, tegntabeller o.l., mens NAME er de tags, som robotterne bruger til indekseringen, f.eks. keywords, forfatter, udgiver osv. I praksis er det ikke helt sådan det fungerer, men næsten.
Obligatoriske tags
Den vigtigste meta tag er en af dem der ligner almindelige tags, blot placeret i header-sektionen. Det er TITLE-tag'en:
<TITLE>Indsæt titlen her!</TITLE>
TITLE-tag'en er den tekst der vises som linket på søgemaskinernes sider, dvs. det første fra hjemmesiden, læseren bliver præsenteret for, og er det som skal overbevise den søgende om at gå ind på siden. Søgemaskinerne viser typisk op til ca. 65 tegn, så det er en god idé at holde længden under dette. Fordi det er det første man blive præsenteret for, tillægger søgemaskinerne indholdet af TITLE-tag'en stor betydning, så det er et af de steder man bør tænke sig godt om mht. formuleringen og indholdet.
Den næste meta tag er i virkeligheden to meta tags, og det er ægte meta tags. De to felter hedder "description" og "subject" og de gør nøjagtig det samme. Det er blot et spørgsmål om, at nogle søgemaskiner i gamle dage brugte den ene tag, og andre søgemaskiner den anden. Syntax'en er:
<META NAME="description" CONTENT="Beskrivelse af den specifikke sides indhold">
<META NAME="subject" CONTENT="Beskrivelse af den specifikke sides indhold">
Søgemaskinerne tillægger dette/disse tags relativt stor betydning. I dag er det reelt kun "description", der bliver indekseret efter, og det er kun hvis man absolut vil helgardere sig, at man anvender begge tags. I nogle tilfælde, er det indholdet dette/disse tags, som bliver vist som følgetekst, sammen med linket, dvs. indholdet af TITLE-tag, i stedet for dele af brødteksten.
<TITLE>Indsæt titlen her!</TITLE>
TITLE-tag'en er den tekst der vises som linket på søgemaskinernes sider, dvs. det første fra hjemmesiden, læseren bliver præsenteret for, og er det som skal overbevise den søgende om at gå ind på siden. Søgemaskinerne viser typisk op til ca. 65 tegn, så det er en god idé at holde længden under dette. Fordi det er det første man blive præsenteret for, tillægger søgemaskinerne indholdet af TITLE-tag'en stor betydning, så det er et af de steder man bør tænke sig godt om mht. formuleringen og indholdet.
Den næste meta tag er i virkeligheden to meta tags, og det er ægte meta tags. De to felter hedder "description" og "subject" og de gør nøjagtig det samme. Det er blot et spørgsmål om, at nogle søgemaskiner i gamle dage brugte den ene tag, og andre søgemaskiner den anden. Syntax'en er:
<META NAME="description" CONTENT="Beskrivelse af den specifikke sides indhold">
<META NAME="subject" CONTENT="Beskrivelse af den specifikke sides indhold">
Søgemaskinerne tillægger dette/disse tags relativt stor betydning. I dag er det reelt kun "description", der bliver indekseret efter, og det er kun hvis man absolut vil helgardere sig, at man anvender begge tags. I nogle tilfælde, er det indholdet dette/disse tags, som bliver vist som følgetekst, sammen med linket, dvs. indholdet af TITLE-tag, i stedet for dele af brødteksten.
Anbefalede tags
Et par af de tags der ikke er strengt nødvendige, men blot en fantastisk god idé at bruge, er language, charset og robots.
Language
Language er der hvor man fortæller hvilket sprog man bruger på siden. I forhold til hvordan søgemaskinerne reagerer på dit site er dette vigtigt. Det danske Google site favoriserer sider på dansk, og hvis sidens sprog er noget andet, tilbydes at oversætte siden. Derfor får man forskellige resultater om man bruger google.dk, google.de eller google.com til sine søgninger. At hjælpe søgemaskiner og de besøgende er altid en god idé, så selv om det ikke er strengt nødvendigt at fortælle hvilket sprog man anvender, er det en rigtig god detalje at have i orden.
Tag'en for sprog er forskellig, om man anvender HTML 4.01 eller 5.
For HTML 4.01 kan man vælge to versioner:
<META NAME="language" CONTENT="english">
<META HTTP-EQUIV="content-language" CONTENT="en">
For HTML 5 er det gjort til en attribut til HTML-tag'en:
<HTML LANG="en">
Fordi browserne bliver mere og mere avancerede, og bliver tilgængelige på andre sprog end engelsk, er udgaven med http-equiv den bedste udgave til HTML 4.01, idet den både fortæller søgemaskinen hvilket sprog der er anvendt, og ved åbning af siderne bliver der ikke lavet om på sproget på de funktioner (f.eks. knapper) der normalt følger browserens/operativsystemets sprog.
Sprogkoderne til diverse sprog kan findes her.
Charset
I forlængelse af sproget ligger den tegntabel man skal bruge. Her er er der mulighed for at komme galt afsted, hvis man ikke tænker sig om, for den måde browserne håndterer tegntabellen på, afhænger af filformatet. For nu at starte med filformatet:
Lidt afhængig af hvilken editor man anvender, kan man vælge et af flg. filformater:
For nogle år siden, da browserne ikke var så avancerede, var det altid en god idé at definere hvilken tegntabel man skulle anvende på siden. Det var især specialtegn som f.eks. de danske æ, ø og å som browserne ikke kunne finde ud af, og derfor indsatte andre tegn (ofte en sort firkant eller et spørgsmålstegn). For at undgå dette kunne man specificere tegntabellen, f.eks. windows-1252 som var den der var god til de Nordeuropæiske tegn. Her skal man lige være opmærksom på, at her er der forskel på HTML 4.01 og HTML 5:
For HTML 4.01 ser den således ud:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=windows-1252">
For HTML 5 ser den således ud:
<META CHARSET="windows-1252">
Amerikanerne kan godt lide den tegntabel der hedder UTF-8, og flere steder kan man læse, at med den er man altid dækket ind. Det er man ikke, med mindre man også bruger filformatet UTF-8! Nogle steder kan man læse, at man skal bruge ISO-8859-1, for at være dækket ind med de nordeuropæiske tegn. Det er både rigtigt og forkert. Siden viser tegnene korrekt, så det fungerer, men browsere i dag har af en eller anden grund indbygget en rutine, at man i virkeligheden mener tegntabellen windows-1252, så det er i stedet den de bruger, når de læser koden. Når det er tilfældet kan man lige så godt benytte sig af lejligheden til at få siden til at loade lidt hurtigere, og vælge windows-1252... og så skal man lige huske at her skal man bruge filformatet ANSI, for ellers kan browseren ikke altid finde ud af at vise tegn som æ, ø og å korrekt.
Den letteste og absolut mest effektive løsning, i praksis, er at anvende UTF-8 som både filformat og tegntabel.
Robots
Den tredje meta tag som er en god idé at bruge, er "robots". De søgerobotter som indekserer siderne for søgemaskinerne, følger de links der er på siderne. Hvis man har en side man ikke vil have indekseret, eller søgerobotten ikke skal følge de links der er, kan man bruge:
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
Man kan i sagens natur godt nøjes med enten NOINDEX eller NOFOLLOW.
Der hvor man gerne vil bruge disse tags, er sider med links som peger til andre sites, f.eks. sider med relevante links, og sider der kan spammes som f.eks. gæstebøger, blogs og fora. Grunden til at man vil bruge dem der, er at hvis man linker til sider der betragtes som uhæderlige på en eller anden måde, eller ikke eksisterer, bliver man straffet med at ens sider ikke bliver vist i søgeresultater.
NOFOLLOW gør, at robotterne ikke følger linket, og dermed undgår man problemer hvis der kommer et eller andet i den anden ende af linket som er skadeligt. Den anden grund til er spammere, som lægger links ind til deres sider. NOFOLLOW er med til at obstruere deres skadelige opførsel.
NOINDEX er, som navnet siger, at siden ikke indekseres, dvs. man kan ikke finde siden med søgninger. Anvendelsen er et tveægget sværd, for den gør, at spam ikke bliver indekseret, og man dermed obstruerer spammernes skadelige opførsel. På den anden side, betyder det, at det man gerne vil have andre til at finde, heller ikke dukker op ved søgninger. Ved gæstebøger er NOINDEX en klar fordel, men fora og blogs, er det en af de ting man skal afveje og gøre op med sig selv om man vil det ene eller det andet.
NOINDEX og NOFOLLOW kan slås til og fra efter behov, så finder man ud af at det man gjorde var en dårlig idé, kan man ændre det, uden problemer.
Language
Language er der hvor man fortæller hvilket sprog man bruger på siden. I forhold til hvordan søgemaskinerne reagerer på dit site er dette vigtigt. Det danske Google site favoriserer sider på dansk, og hvis sidens sprog er noget andet, tilbydes at oversætte siden. Derfor får man forskellige resultater om man bruger google.dk, google.de eller google.com til sine søgninger. At hjælpe søgemaskiner og de besøgende er altid en god idé, så selv om det ikke er strengt nødvendigt at fortælle hvilket sprog man anvender, er det en rigtig god detalje at have i orden.
Tag'en for sprog er forskellig, om man anvender HTML 4.01 eller 5.
For HTML 4.01 kan man vælge to versioner:
<META NAME="language" CONTENT="english">
<META HTTP-EQUIV="content-language" CONTENT="en">
For HTML 5 er det gjort til en attribut til HTML-tag'en:
<HTML LANG="en">
Fordi browserne bliver mere og mere avancerede, og bliver tilgængelige på andre sprog end engelsk, er udgaven med http-equiv den bedste udgave til HTML 4.01, idet den både fortæller søgemaskinen hvilket sprog der er anvendt, og ved åbning af siderne bliver der ikke lavet om på sproget på de funktioner (f.eks. knapper) der normalt følger browserens/operativsystemets sprog.
Sprogkoderne til diverse sprog kan findes her.
Charset
I forlængelse af sproget ligger den tegntabel man skal bruge. Her er er der mulighed for at komme galt afsted, hvis man ikke tænker sig om, for den måde browserne håndterer tegntabellen på, afhænger af filformatet. For nu at starte med filformatet:
Lidt afhængig af hvilken editor man anvender, kan man vælge et af flg. filformater:
- ANSI
- UTF-8
- UTF-8 without BOM
- UCS-2 Big Endian
- UCS-2 Little Endian
For nogle år siden, da browserne ikke var så avancerede, var det altid en god idé at definere hvilken tegntabel man skulle anvende på siden. Det var især specialtegn som f.eks. de danske æ, ø og å som browserne ikke kunne finde ud af, og derfor indsatte andre tegn (ofte en sort firkant eller et spørgsmålstegn). For at undgå dette kunne man specificere tegntabellen, f.eks. windows-1252 som var den der var god til de Nordeuropæiske tegn. Her skal man lige være opmærksom på, at her er der forskel på HTML 4.01 og HTML 5:
For HTML 4.01 ser den således ud:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=windows-1252">
For HTML 5 ser den således ud:
<META CHARSET="windows-1252">
Amerikanerne kan godt lide den tegntabel der hedder UTF-8, og flere steder kan man læse, at med den er man altid dækket ind. Det er man ikke, med mindre man også bruger filformatet UTF-8! Nogle steder kan man læse, at man skal bruge ISO-8859-1, for at være dækket ind med de nordeuropæiske tegn. Det er både rigtigt og forkert. Siden viser tegnene korrekt, så det fungerer, men browsere i dag har af en eller anden grund indbygget en rutine, at man i virkeligheden mener tegntabellen windows-1252, så det er i stedet den de bruger, når de læser koden. Når det er tilfældet kan man lige så godt benytte sig af lejligheden til at få siden til at loade lidt hurtigere, og vælge windows-1252... og så skal man lige huske at her skal man bruge filformatet ANSI, for ellers kan browseren ikke altid finde ud af at vise tegn som æ, ø og å korrekt.
Den letteste og absolut mest effektive løsning, i praksis, er at anvende UTF-8 som både filformat og tegntabel.
Robots
Den tredje meta tag som er en god idé at bruge, er "robots". De søgerobotter som indekserer siderne for søgemaskinerne, følger de links der er på siderne. Hvis man har en side man ikke vil have indekseret, eller søgerobotten ikke skal følge de links der er, kan man bruge:
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
Man kan i sagens natur godt nøjes med enten NOINDEX eller NOFOLLOW.
Der hvor man gerne vil bruge disse tags, er sider med links som peger til andre sites, f.eks. sider med relevante links, og sider der kan spammes som f.eks. gæstebøger, blogs og fora. Grunden til at man vil bruge dem der, er at hvis man linker til sider der betragtes som uhæderlige på en eller anden måde, eller ikke eksisterer, bliver man straffet med at ens sider ikke bliver vist i søgeresultater.
NOFOLLOW gør, at robotterne ikke følger linket, og dermed undgår man problemer hvis der kommer et eller andet i den anden ende af linket som er skadeligt. Den anden grund til er spammere, som lægger links ind til deres sider. NOFOLLOW er med til at obstruere deres skadelige opførsel.
NOINDEX er, som navnet siger, at siden ikke indekseres, dvs. man kan ikke finde siden med søgninger. Anvendelsen er et tveægget sværd, for den gør, at spam ikke bliver indekseret, og man dermed obstruerer spammernes skadelige opførsel. På den anden side, betyder det, at det man gerne vil have andre til at finde, heller ikke dukker op ved søgninger. Ved gæstebøger er NOINDEX en klar fordel, men fora og blogs, er det en af de ting man skal afveje og gøre op med sig selv om man vil det ene eller det andet.
NOINDEX og NOFOLLOW kan slås til og fra efter behov, så finder man ud af at det man gjorde var en dårlig idé, kan man ændre det, uden problemer.
Overflødige tags
Som Web har udviklet sig siden det blev alle mands eje i 1995, er der meta tags som en gang var en nødvendighed eller i hvert fald en god idé, som ikke længere er relevante. Andre virkede som noget der kunne blive en god idé, men blev det aldrig.
Bemærk: Flere af de overflødige tags findes som det der hedder microtagging, og her er de højeste grad både virksomme og relevante.
Tilbage i Web's barndom var keywords et af de vigtigste felter at få udfyldt. Fordi der var et massivt snyd med at skrive en masse irrelevante ord under keywords, for at tiltrække besøgende, har dette felt ikke være brugt ret meget siden omkring år 2000. Der er efter sigende stadig nogle få af de mindre søgemaskiner der tillægger keywords en betydning, men som Verden ser ud i 2016, er det lige meget med at have det med. Syntax'en, hvis nogen skulle have lyst til at tage det med, er:
<META NAME="keywords" CONTENT="dubbeditter, dibbedutter, himstregimser, dingenoter">
Principielt behøver man ikke bruge komma for at separere keywords, men det gør det lidt lettere at overskue.
Forfattere og udgivere, to af de tags, som umiddelbart virker som en god idé, men aldrig har været det:
<META NAME="author" CONTENT="Navnet på forfatteren">
<META NAME="publisher" CONTENT="Navnet på udgiver">
Muligheden er der, men søgemaskinerne bruger det ikke til noget, og indekserer ikke indholdet. Hvis det er noget man skal kunne søge på, så skriv det på selve siden, dvs. i BODY-tag'en.
Dato og tidspunkt er endnu en af de ting, der intuitivt lyder som en god idé at have i sine metatags. Det er det ikke. Hvis det er noget man skal bruge til noget konstruktivt, skal det stå i BODY-tag'en, og er det fordi man skal holde styr på opdatering af sidens indhold, så fremgår det af filens egenskaber sammen med størrelse osv. Skulle man have lyst til at bruge meta tag'en er syntaxen:
<META NAME="date" CONTENT="1994-11-06T08:49:37+00:00">
Bemærk: Flere af de overflødige tags findes som det der hedder microtagging, og her er de højeste grad både virksomme og relevante.
Tilbage i Web's barndom var keywords et af de vigtigste felter at få udfyldt. Fordi der var et massivt snyd med at skrive en masse irrelevante ord under keywords, for at tiltrække besøgende, har dette felt ikke være brugt ret meget siden omkring år 2000. Der er efter sigende stadig nogle få af de mindre søgemaskiner der tillægger keywords en betydning, men som Verden ser ud i 2016, er det lige meget med at have det med. Syntax'en, hvis nogen skulle have lyst til at tage det med, er:
<META NAME="keywords" CONTENT="dubbeditter, dibbedutter, himstregimser, dingenoter">
Principielt behøver man ikke bruge komma for at separere keywords, men det gør det lidt lettere at overskue.
Forfattere og udgivere, to af de tags, som umiddelbart virker som en god idé, men aldrig har været det:
<META NAME="author" CONTENT="Navnet på forfatteren">
<META NAME="publisher" CONTENT="Navnet på udgiver">
Muligheden er der, men søgemaskinerne bruger det ikke til noget, og indekserer ikke indholdet. Hvis det er noget man skal kunne søge på, så skriv det på selve siden, dvs. i BODY-tag'en.
Dato og tidspunkt er endnu en af de ting, der intuitivt lyder som en god idé at have i sine metatags. Det er det ikke. Hvis det er noget man skal bruge til noget konstruktivt, skal det stå i BODY-tag'en, og er det fordi man skal holde styr på opdatering af sidens indhold, så fremgår det af filens egenskaber sammen med størrelse osv. Skulle man have lyst til at bruge meta tag'en er syntaxen:
<META NAME="date" CONTENT="1994-11-06T08:49:37+00:00">
Avancerede tags
Når man bliver lidt trænet i webdesign, begynder man at lave det der hedder Cascading Style Sheets, eller CSS, og anvende eksterne JavaScript. CSS skal uploades sammen med siden, og JavaScrips kan man uploade sammen med siden. Syntaxen for style sheet'et stylesheet.css og scriptet JavaScripts.js er:
<LINK REL="stylesheet" HREF="stylesheet.css" TYPE="text/css">
<SCRIPT TYPE="text/javascript" SRC="JavaScripts.js"></SCRIPT>
Dette er for avancerede web-designere og bliver gennemgået under hhv. CSS og JavaScript.
<LINK REL="stylesheet" HREF="stylesheet.css" TYPE="text/css">
<SCRIPT TYPE="text/javascript" SRC="JavaScripts.js"></SCRIPT>
Dette er for avancerede web-designere og bliver gennemgået under hhv. CSS og JavaScript.