AI-optimerad webbutik – teknisk optimering av webbutiker för utvecklare (del 2 av 2)

ProfilbildJohan Svenring·
AI SEOMarknadsföringTeknikWebbutiken
·

AI förändrar hur användare söker, hittar och interagerar med produkter online. Traditionell SEO är inte längre tillräcklig – AI-drivna sökmotorer, röstassistenter och generativa språkmodeller (LLM) förstår innehåll semantiskt. Den här artikeln guidar dig som utvecklare genom praktisk optimering för AI-sök (semantic/LLM search) och AIO (AI Optimization). Vi täcker strukturerad data, semantisk HTML, produktflöden, vektorsök och hur du bygger en AI-vänlig informationsarkitektur med kodexempel och verktyg.

1. Strukturerad data med Schema.org (JSON-LD)

Strukturerad data hjälper AI att förstå din webbutiks innehåll. Använd Schema.org i JSON-LD-format för att markera produkter, recensioner och FAQ.

Viktiga scheman

  • Produktsidor: Product, Offer, AggregateRating
  • FAQ-sidor: FAQPage
  • Recensioner: Review, Rating

Exempel: JSON-LD för en produktsida

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Smash Burger Meal",
  "image": "https://example.com/img/smashburger.jpg",
  "description": "Dubbel smash-burgare med krispiga pommes och valfri dryck. Perfekt för snabb lunch.",
  "sku": "SB123",
  "brand": {
    "@type": "Brand",
    "name": "Burger and Chill"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/products/smash-burger-meal",
    "priceCurrency": "SEK",
    "price": 129,
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": 4.7,
    "reviewCount": 238
  }
}

Implementering

  • Placera JSON-LD i <head> eller <body> via CMS eller templating-motor (t.ex. Next.js, Shopify Liquid, WooCommerce PHP).
  • Dynamiskt generera data från produktkatalogen:
  // Exempel i Next.js
  export async function getServerSideProps({ params }) {
    const product = await fetchProduct(params.id); // Hämta från DB/API
    const jsonLd = {
      '@context': 'https://schema.org',
      '@type': 'Product',
      name: product.name,
      // ... övriga fält
    };
    return { props: { product, jsonLd } };
  }

Verktyg för validering

2. Semantisk HTML och kontextuell markup

Semantisk HTML förbättrar AI:s förståelse och tillgänglighet.

Bästa praxis

  • Använd <article>, <section>, <header>, <nav>, <aside> för tydlig struktur.
  • Lägg till ARIA-attribut för navigering: aria-label och role.
  • Om JSON-LD inte används, implementera microdata:
  <article itemscope itemtype="https://schema.org/Product">
    <h1 itemprop="name">Smash Burger Meal</h1>
    <img itemprop="image" src="https://example.com/img/smashburger.jpg" alt="Smash Burger">
    <p itemprop="description">Dubbel smash-burgare med pommes och dryck.</p>
  </article>

Tips

  • Undvik överdriven JavaScript-rendering (t.ex. React SPA utan server-side rendering) för att säkerställa att LLM-crawlers kan läsa innehållet.
  • Använd role="navigation" och aria-label="main menu" för menystrukturer.

3. Optimera för AI-sök och LLM-crawling

LLM:er (t.ex. Google Gemini, Perplexity, ChatGPT Browse) analyserar innehåll semantiskt och resonerar utifrån kontext.

Strategier

  • Bygg rika produktsidor som svarar på frågor som:
  • Vad är produkten?
  • Vem är den för?
  • Varför välja denna framför konkurrenter?
  • Inkludera FAQ-sektioner i naturligt språk:
  <section itemscope itemtype="https://schema.org/FAQPage">
    <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
      <h3 itemprop="name">Är Smash Burger Meal laktosfri?</h3>
      <div itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
        <p>Ja, du kan välja laktosfritt bröd och ost som tillval.</p>
      </div>
    </div>
  </section>
  • Server-side rendering: Exponera innehåll direkt i HTML för att underlätta crawling.
  • Undvik att gömma viktigt innehåll i JavaScript eller dynamiska moduler.

4. Produktflöden och katalogoptimering

AI-drivna e-handelsplattformar (t.ex. Google Shopping, Meta Catalog, Klarna AI) kräver välstrukturerade produktflöden.

Standardformat

  • Google Merchant Feed (XML/CSV/JSON)
  • Viktiga fält:
  • gtin, mpn, identifier_exists
  • material, flavor, dietary_restrictions, sustainability_certifications

Exempel: Google Merchant Feed (XML)

<item>
  <g:id>SB123</g:id>
  <g:title>Smash Burger Meal</g:title>
  <g:price>129 SEK</g:price>
  <g:availability>in stock</g:availability>
  <g:dietary_restrictions>lactose_free</g:dietary_restrictions>
</item>

Validering

Tips

  • Automatisera flöden med CMS-plugins (t.ex. WooCommerce Google Shopping Integration).
  • Använd CI/CD för att validera flöden med GitHub Actions eller liknande.

5. Röst- och konversationsoptimering (VUI/NLU)

Röstassistenter (t.ex. Siri, Alexa, Google Assistant) kräver innehåll som matchar konversationella frågor som:

  • “Finns det laktosfria burgare?”
  • “Vad är barnvänligt på menyn?”

Rekommendationer

  • FAQ-sektioner: Strukturera svar i naturligt språk med FAQPage-schema.
  • Promptliknande innehåll:
  <section>
    <h2>Laktosfri Cheeseburgare – Barnfavorit</h2>
    <p>Perfekt för barnfamiljer! Vår laktosfria cheeseburgare har mild smak och serveras med krispiga pommes.</p>
  </section>
  • Röst-API: Om du bygger egen integration, använd Dialogflow eller Alexa Skills Kit för att hantera röstintentioner.

6. Intern AI-optimerad sök (semantisk)

Byt ut traditionell nyckelordssök mot semantisk sök för bättre användarupplevelse.

Verktyg

  • ElasticSearch + kNN: För vektorsök med semantisk matchning.
  • Algolia AI: Inbyggd personalisering och AI-sök.
  • OpenAI embeddings: Använd pgvector (Postgres), Pinecone eller Weaviate för vektorsök.
  // Exempel: Skapa embedding med OpenAI
  const { Configuration, OpenAIApi } = require("openai");
  const configuration = new Configuration({ apiKey: process.env.OPENAI_API_KEY });
  const openai = new OpenAIApi(configuration);

  async function createEmbedding(text) {
    const response = await openai.createEmbedding({
      model: "text-embedding-ada-002",
      input: text,
    });
    return response.data.data[0].embedding;
  }

7. Verktyg och pipelines för utvecklare

  • Crawl och audit: Screaming Frog, Sitebulb, Ahrefs (med GPT-summarizer för rapporter).
  • Validering: Kör Lighthouse CI i GitHub Actions för att övervaka strukturerad data:
  name: Lighthouse CI
  on: [push]
  jobs:
    lighthouse:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v3
        - name: Run Lighthouse
          uses: foo-software/lighthouse-action@v1
          with:
            urls: 'https://example.com'
  • Testa AI-respons: Kör testprompter med GPT-4 eller Claude för att utvärdera hur väl produktsidor matchar AI-frågor.

8. Bonus: Promptdesign för e-handel

Förbered din sajt för konversationella AI-frågor, t.ex.:

“Jag letar efter en billig, mättande burgare utan laktos som barn gillar. Vad har ni?”

Svar på sajten:

<h2>Laktosfri Cheeseburgare – Barnfavorit</h2>
<p>Endast 99 SEK! Vår laktosfria cheeseburgare är ett populärt val för barnfamiljer tack vare sin milda smak och krispiga pommes.</p>

Tips

  • Testa prompter mot din sajt med verktyg som Promptfoo.
  • Använd naturligt språk i rubriker och beskrivningar för att matcha användarintentioner.