FJS26 · V45 · EXTRA

SEO och AEO

Hur sökmotorer, sociala medier och AI-tjänster läser din sida.

Chas Academy · Frontendutveckling

Idag

01SEO: hur sökmotorer läser din sida~45 min02Sociala medier~15 min03Hjälp crawlern~15 min04JavaScript, SSR och AEO~25 min

SEO OCH AEO2 / 26

SEO

Hur sökmotorer hittar, läser och rankar din sida.

SEO

Sökmotoroptimering

Search Engine Optimization: att göra det lätt för sökmotorer att hitta, förstå och visa din sida för rätt sökningar.

Teknisk SEO: att sidan går att crawla, är snabb, semantisk och har bra metadata. Det är ert ansvar.
Innehåll: text som svarar på det folk faktiskt söker efter.
Länkar: andra sajter som länkar hit, så kallade backlinks. Ett slags förtroende.

SEO OCH AEO4 / 26

SEO · SERP

Sökresultatsidan

SEO OCH AEO5 / 26

SEO

Crawla, indexera, ranka

SEO OCH AEO6 / 26

SEO

Google är en black box

SEO OCH AEO7 / 26

SEO · <HEAD>

Det sökmotorn läser först

Grunden

Titeln blir den blå länken i sökresultatet. Beskrivningen blir ofta texten under.

<html lang="sv">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1">
  <title>Europas huvudstäder – Quiz</title>
  <meta name="description"
    content="Tio frågor om Europas huvudstäder.
             Hur många klarar du?">
  <link rel="canonical"
    href="https://example.com/quiz/europa">
</head>

Tumregler

title: unik per sida, det viktigaste först, runt 50–60 tecken. description: en mening som lockar till klick. canonical: vilken adress som är originalet om samma innehåll finns på flera. keywords: ignoreras av Google sedan länge.

SEO OCH AEO8 / 26

SEO · <BODY>

Semantik är SEO

Rubriker och text

En h1 per sida, sedan h2, h3 i ordning. Sökmotorn läser strukturen som ett innehållsregister.

<main>
  <h1>Europas huvudstäder</h1>
  <h2>Så fungerar quizet</h2>
  <p>...</p>
  <h2>Topplista</h2>
</main>

Bilder och länkar

alt beskriver bilden. Länktexten beskriver målet. Sökmotorer följer <a href>, inte klick-händelser.

<img src="paris.webp" alt="Eiffeltornet i kvällsljus">

<!-- Nej -->
<a href="/regler">Klicka här</a>
<div onclick="go('/regler')">Regler</div>

<!-- Ja -->
<a href="/regler">Läs reglerna</a>

SEO OCH AEO9 / 26

SEO

Adresser och länkar

Läsbara URL:er. /quiz/europa säger mer än /index.html?id=7f3a.
Interna länkar. Länka mellan dina sidor med beskrivande text. Det är så crawlern hittar dem.
Rätt statuskoder. En sida som inte finns ska ge 404, inte 200 med texten "Hittades inte".
HTTPS och mobilvänligt. Google indexerar mobilversionen av sidan i första hand.
Prestanda räknas. Allt från del 1 hjälper även här.

SEO OCH AEO10 / 26

SEO · LINKBUILDING

Länkar är röster

SEO OCH AEO11 / 26

SEO · LINKBUILDING

Att få länkar

Kallas off-page SEO: det händer utanför din kod.

Förtjäna dem

Gör något värt att länka till: en guide, ett verktyg, öppen kod. Branschregister, partners och gästinlägg. Kvalitet före antal: en relevant och betrodd länk slår hundra okända.

Det som straffar sig

Köpta länkar, länkfarmar och länkspam i kommentarsfält. Google känner igen mönstren och kan sänka hela sajten.

Märk länkar du inte står för

Då räknas de inte som röster.

<a href="..." rel="sponsored">
<a href="..." rel="ugc">
<a href="..." rel="nofollow">

SEO OCH AEO12 / 26

Sociala
medier

När någon delar din länk i Slack, LinkedIn eller Messenger.

SOCIALA MEDIER

Länken är ett kort

SEO OCH AEO14 / 26

SOCIALA MEDIER

Open Graph och X

Open Graph

Bilden ska ha absolut URL. 1200 × 630 px fungerar nästan överallt.

<meta property="og:type" content="website">
<meta property="og:title"
  content="Europas huvudstäder – Quiz">
<meta property="og:description"
  content="Tio frågor. Hur många klarar du?">
<meta property="og:image"
  content="https://example.com/og/europa.png">
<meta property="og:url"
  content="https://example.com/quiz/europa">
<meta property="og:locale" content="sv_SE">

X (Twitter)

X läser Open Graph som reserv. Det som behövs i tillägg är korttypen, för stor bild.

<meta name="twitter:card"
  content="summary_large_image">
<meta name="twitter:image:alt"
  content="Karta över Europa">

SEO OCH AEO15 / 26

Hjälp
crawlern

robots.txt, sitemap och structured data.

HJÄLP CRAWLERN

robots.txt och sitemap.xml

robots.txt

Ligger i roten. Säger vad crawlers får besöka. Inget skydd: hemliga sidor ska ha inloggning.

User-agent: *
Disallow: /admin/

Sitemap: https://example.com/sitemap.xml

sitemap.xml

En lista över sidorna du vill ha indexerade. Skicka in den i Google Search Console.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns=
  "http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2026-11-04</lastmod>
  </url>
</urlset>

SEO OCH AEO17 / 26

HJÄLP CRAWLERN

Structured data med JSON-LD

Berätta med maskinläsbar data vad sidan handlar om. Ordförrådet kommer från schema.org.

Till exempel i portfolion

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "[Ditt namn]",
  "jobTitle": "Fullstackutvecklare",
  "url": "https://[din-portfolio].se",
  "sameAs": [
    "https://github.com/[du]",
    "https://www.linkedin.com/in/[du]"
  ]
}
</script>

Varför

Kan ge rich results i Google: betyg, priser, evenemang, recept. Och det är exakt den sortens data AI-tjänster har lätt att läsa. Testa med Googles Rich Results Test eller Schema Markup Validator.

SEO OCH AEO18 / 26

JavaScript,
SSR och AEO

Det som blir viktigt när ni bygger med React.

JAVASCRIPT OCH SEO

Vad ser crawlern i er quiz-app?

SEO OCH AEO20 / 26

FRAMÖVER

SEO i React och Next.js

Metadata per sida

I en app med flera vyer ska varje vy ha egen titel. React 19 lyfter <title> och <meta> till <head> automatiskt.

function QuizPage({ quiz }) {
  return (
    <>
      <title>{quiz.name} – Quiz</title>
      <meta name="description"
            content={quiz.summary} />
      <h1>{quiz.name}</h1>
    </>
  );
}

Rendera på servern

Med Next.js blir HTML:en, och metadatan, klar på servern. Bäst för SEO, delningskort och AI-crawlers.

// app/quiz/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const quiz = await getQuiz((await params).slug);
  return {
    title: quiz.name,
    openGraph: { images: [quiz.image] },
  };
}

SEO OCH AEO21 / 26

AEO

Answer Engine Optimization

Att bli källan när svaret kommer från en AI i stället för en lista med länkar: ChatGPT, Perplexity, Googles AI Overviews. Kallas också GEO, Generative Engine Optimization.

Allt fler frågor besvaras utan att någon klickar sig vidare.
Målet flyttas från att ranka högt till att bli citerad.
Ett ungt område. Det finns mycket säljsnack och få säkra svar.

SEO OCH AEO22 / 26

AEO

Det som verkar fungera

Bra SEO är grunden. AI-tjänsterna bygger ofta på sökindex. Det som inte hittas kan inte citeras.
Svaret först. Rubrik som en fråga, svaret i första meningen, detaljer efteråt.
Innehållet i HTML:en. Många AI-crawlers kör inte JavaScript. Samma slutsats som nyss: rendera på servern.
Structured data. Tydlig, maskinläsbar fakta om vem, vad, när och var.
Gå att lita på. Författare, datum, källor och fakta som går att kontrollera.

SEO OCH AEO23 / 26

AEO

Styra AI-crawlers

robots.txt

AI-företagen har egna crawlers med egna namn. Man kan stänga ute träning men tillåta sök.

# Inte för träning
User-agent: GPTBot
Disallow: /

User-agent: Google-Extended
Disallow: /

# Men gärna i ChatGPT:s sökning
User-agent: OAI-SearchBot
Allow: /

llms.txt

Ett förslag från 2024: en markdownfil i roten som sammanfattar sajten för språkmodeller. Ingen standard, och det är oklart vilka tjänster som läser den. Bra att känna till, inte att lita på.

SEO OCH AEO24 / 26

Övning · i teamen

Gör quiz-appen hittbar och delbar

Lägg till lang, en bra title och description, och Open Graph-taggar med en delningsbild. Kör Lighthouse igen och titta på SEO. Testa länken i opengraph.xyz eller genom att klistra in den i Slack.

Tid

[20 min]

Mål

Ett delningskort som ser ut som ni vill, och SEO-poäng i grönt.

SEO OCH AEO25 / 26

SAMMANFATTNING

Att ta med sig

SERP: de organiska träffarna är obetalda. Där spelar SEO roll.
SEO är semantisk HTML plus bra title, description och länkar.
Länkar är röster. Förtjäna dem, köp dem inte.
Delningskort: Open Graph med absolut bild-URL, i HTML:en från början.
AEO: bra SEO är grunden, och innehållet ska finnas i HTML:en. Rendering på servern hjälper båda.

SEO OCH AEO26 / 26

SEO och AEO

By sandra-larsson

SEO och AEO

sandra-larsson

Educator Fullstack Developer Javascript at Chas Academy

SEO och AEO

Idag

SEO

Sökmotoroptimering

Sökresultatsidan

Crawla, indexera, ranka

Google är en black box

Det sökmotorn läser först

Grunden

Tumregler

Semantik är SEO

Rubriker och text

Bilder och länkar

Adresser och länkar

Länkar är röster

Att få länkar

Förtjäna dem

Det som straffar sig

Märk länkar du inte står för

Socialamedier

Länken är ett kort

Open Graph och X

Open Graph

X (Twitter)

Hjälpcrawlern

robots.txt och sitemap.xml

robots.txt

sitemap.xml

Structured data med JSON-LD

Till exempel i portfolion

Varför

JavaScript,SSR och AEO

Vad ser crawlern i er quiz-app?

SEO i React och Next.js

Metadata per sida

Rendera på servern

Answer Engine Optimization

Det som verkar fungera

Styra AI-crawlers

robots.txt

llms.txt

Gör quiz-appen hittbar och delbar

Tid

Mål

Att ta med sig

SEO och AEO

SEO och AEO

sandra-larsson

More from sandra-larsson

Sociala
medier

Hjälp
crawlern

JavaScript,
SSR och AEO