import Image from "next/image"; // import { Callout } from '@/components/mdx/Callout'; // import { CodeBlock } from '@/components/mdx/CodeBlock'; // import { FAQPageSchema } from '@/components/mdx/FAQPageSchema'; {/* */} Om du redan använder MDX i din Next.js-blogg – grattis! Men MDX är mer än bara Markdown med extra funktioner. Det är ett kraftfullt sätt att skapa dynamiskt, engagerande och SEO-optimerat innehåll genom att sömlöst kombinera Markdown med React-komponenter. Här går vi igenom hur du kan använda MDX mer strategiskt i App Router-eran. Den här guiden visar hur du kan använda MDX-komponenter och innehållsstrategier för att öka kvaliteten, engagemanget och sökmotoroptimeringen på din Next.js-sajt. ## Varför MDX för innehåll och SEO? * **Markdown är enkelt:** Du kan skriva strukturerat innehåll med vanlig Markdown-syntax som är lättläst både för människor och sökmotorer. * **Kraften i React-komponenter:** Du kan infoga interaktiva element, layoutkomponenter, optimerade bilder eller t.o.m. schema-data direkt i flödet. * **Bättre underhåll:** Separera logik från presentation, vilket gör det enklare att uppdatera och återanvända innehåll. ## Grundläggande SEO med vanlig Markdown Börja med grunderna – även i MDX: * **Semantiska rubriker:** Använd rätt nivå på `

`, `

`, osv. för att skapa en logisk innehållsstruktur. * Beskrivande länkar: Använd tydlig länktext, inte bara "klicka här". * Läsbar formatering: Listor, blockcitat, fetstil och kursiv hjälper både läsare och sökmotorer att förstå innehållet. ## Förbättra SEO med anpassade MDX-komponenter Här glänser MDX på riktigt. Genom att skapa återanvändbara React-komponenter kan du injicera SEO-värde direkt i innehållet. ### 1. Strukturerad data (Schema.org) Sökmotorer använder JSON-LD för att förstå innehållets kontext. Du kan skapa komponenter som renderar både synligt innehåll och dold schema-data. Skapa gärna komponenter för vanliga schema-typer som FAQ, Artikel, HowTo, eller Recept beroende på innehåll. ```tsx type FAQItem = { question: string; answer: string }; export function FAQPageSchema({ questions }: { questions: FAQItem[] }) { const faqSchema = { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": questions.map(item => ({ "@type": "Question", "name": item.question, "acceptedAnswer": { "@type": "Answer", "text": item.answer, } })) }; return (
{questions.map((item, index) => (

{item.question}

{item.answer}

))}