Modul 26. CSS og SEO

Forberedelse

  • Læs kapitel 17 om CSS og kapitel 18 om SEO

Formål

  • Lære om CSS
  • Lære om SEO, dvs søgemaskineoptimering

Fælles gennemgang

Fra sidst

Head og body i html

Lektien til denne gang

  • CSS = styling.
  • Kronprinsesse Mary er tidligere kåret som en af verdens mest velklædte kvinder. Lige som CSS beskæftiger hendes stylist beskæftiger sig kun med, hvordan Mary ser ud, ikke med, hvad Marys “indhold” er.
     
Kronprinsesse Mary på besøg på Høng Efterskole

SEO: Historien om Google Prinsessen (Klodshans version 3.0)

Der var engang en prinsesse. For ca. 25 år siden var hun en lille prinsesse i et lille kongerige, der hed Google. Der var andre lignende kongeriger, f.eks. Yahoo, som var større, men kongens datter havde planer, så en dag hun ind til sin far. “Far, jeg vil være verdens mest ombejlede prinsesse. Jeg elsker, når andre bejler til mig, og når de kommer med gaver. Jeg vil ranke millionvis af bejlere i et system, som vil gøre den kinesiske regering år 2020 grøn af misundelse, og jeg vil være verdens mægtigste prinsesse.”

Her er gode gamle Klodshans (ScoreKaj version -3.0. Mindst!). I eventyret charmerede han som den eneste af alle bejlerne han prinsessen, og selvom han ikke var hverken kvik eller dannet som de andre bejlere, så vandt hvandt prinsessesen og det halve kongerige med sin klodsede men meget ligefremme, ærlige og hjertelige væremåde

Der var engang en prinsesse. For ca. 25 år siden var hun en lille prinsesse i et lille kongerige, der hed Google. Der var andre lignende kongeriger, f.eks. Yahoo, som var større, men kongens datter havde planer, så en dag hun ind til sin far. “Far, jeg vil være verdens mest ombejlede prinsesse. Jeg elsker, når andre bejler til mig, og når de kommer med gaver. Jeg vil ranke millionvis af bejlere i et system, som vil gøre den kinesiske regering år 2020 grøn af misundelse, og jeg vil være verdens mægtigste prinsesse.

Her er en anden og meget moderne prinsesse, Disneys “Elsa” fra “Frost”.
Hun har bestemt også sine meninger om tingene.

Hendes far kikkede på hende med åben mund. De havde da godt nok snakket om det i kongerigets øverste råd, men hendes planer lød alligevel ret vidtløftige.

Hun ivrede videre. “Ja far, kan du huske historien om Klodshans. Prinsessen fra dengang havde hundredevis af bejlere fra hele landet, og hun kunne vælge og vrage. Sådan vil jeg også have det, men vi er i internettets tidsalder nu, og jeg vil have millionvis af bejlere fra hele verden, som jeg kan vælge og vrage imellem”.

Hendes far var en god far og en dygtig konge, nogle ville endda kalde ham en god forretningsmand. Hvor andre piger vil have heste, tøj, biograf-, by- og cafeture med veninderne, Gucci-tasker,   kunstige negle, fri shopping i Milano med fars kreditkort, fast ugentlig tid hos byens dyreste frisør,  mascara samt kørekort og en lyserød Fiat 500 med soltag, så ville hans datter have bejlere bare for at have bejlere. “Ikke helt dumt”, tænke han, og sagde så: “Ok min datter. Om 10 – 20 år lover jeg dig, at du har millionvis af bejlere, og du får lov til at styre dem alle. Du skal endda få lov til at bo i et af verdens rigeste kongeriger, for bejlerne skal naturligvis komme med masser gaver til dig. Jeg lover dig endda, at du ikke skal gifte dig med dem, du skal bruge alt din arbejdstid på at vælge og vrage. Resten af tiden skal du dase og bruge alle dine penge på, hvad du har lyst til. Du bliver så rig og mægtig, at du slet ikke kan forestille dig det”.

Hans datter sluttede af: “For resten far, jeg vil også have et større og noget mere moderne slot”. Faren svarede: Selvfølgelig min datter, om 20 år bygger vi det her til dig og til alle dine tjenere i Californien”. For selvfølgelig skal du bo i Californien.

Google Prinsessens slot i Californien
Googles nye hovedkvarter i Californien

Hendes far holdte ord. Google-prinsessen har millioner af bejlere, der alle kæmper om hendes gunst. Millioner af mennesker tænker på hende hver dag og gør deres bedste for at opfylde hendes mindste ønske. Dyre bureauer praler, hvis deres bejlen giver resultater, og overalt i verden viskes der tricks om, hvordan man fanger hendes gunst.

Vi kalder den globale bejlen til Google-prinsessen for “søgemaskineoptimering” eller SEO. De ord, som Google sælger for at komme øverst i Google ved søgninger, kalder vi for AdWords. I 2019 solgte Google for ca. 134.810.000.000 dollar AdWords, i øvrigt en stigning på ca. 20 mia dollar pr år siden 2016.

Dagens spørgsmål:

  • Regler for SEO og google prinsessen
Owned media
  • Et par regler
    • Alle sider skal have en titel
    • Kun 1 <h1> overskrift pr side, men lige så mange <h2> og <h3>, som man har lyst til
    • Du skal sætte meta-tags ind i <head> området, se https://www.w3schools.com/tags/tag_meta.asp. Du skal som mimimum have en description og et par keywords, men hvis du allerede nu er en selvfed CSS-haj lige som mig (og det håber jeg, at du er), så sæt også en author-meta tag ind med dit navn.

Øvelser

26.1 Styling i Rebl

  • Sæt koden her ind i style.css i din Repl – site fra sidst. Koden er napset fra W3Schools
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

26.2 Mere styling i Rebl

Find en af dine Rebls, hvor der er en tabel. I din CSS prøv at sætte koden her ind

table{border: solid green 6px;}
  • Hvad skete der med tabellen eller rettere: Alle tabellerne
  • I stedet for “solid” skriv “dotted”. I stedet for “green” skriv “orange” og i stedet for “6px” skriv “3px”. Hvad skete der
  • Prøv at sætte koden her ind i din CSS-fil og se, hvad der sker med dine billeder

img{border: solid green 6px;}

26.3 Styling på dit site

Du skal nu style på det site, du lavede sidst. Minimumskrav:

  • Baggrundsfarven må ikke være hvid
  • Ingen skrift må være sort
  • Der skal være kant på enten billeder og/eller tabeller

Så er der det, som du kan prøve af, hvis du har lyst. Det behøves ikke at være kønt, bare du prøver. Alle link herunder finder du på https://www.w3schools.com/css/default.asp

26.4 SEO på owned media

Der er nogle regler, som vi skal overholde på vores hjemmesider, hvis vi ikke vil ende nederst i søgemaskinerne. Her er et par stykker:

  • Alle sider skal have en titel
  • Kun 1 <h1> overskrift pr side, men lige så mange <h2> og <h3>, som man har lyst til
  • Du skal sætte meta-tags ind i <head> området, se https://www.w3schools.com/tags/tag_meta.asp. Du skal som mimimum have en description og et par keywords, men hvis du allerede nu er en selvfed CSS-haj lige som mig (og det håber jeg, at du er), så sæt også en author-meta tag ind med dit navn.

26.5 Fede HTML og CSS udfordringer

W3Schools har nogle fede kodestumper, som man kan napse som man vil. De findes under https://www.w3schools.com/howto/default.asp. Der er f.eks. sliders på forsiden, fald-ned menuer https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_topnav, responsivt design der gør, at din kan se forskellig ud alt efter, om den vises på en mobil (smal skærm) eller en computer (bred skærm) og alt muligt andet. Nok til at holde dig beskæftiget et par år, hvis du kan lide CSS.

Alt, hvad du f.eks. har lavet i Wix, er lavet med HTML og CSS.