iframe og embed — Indlejring af eksternt indhold i HTML

<iframe> (Inline Frame) er HTML-elementet der indlejrer en ekstern webside i din side. Det er den primære metode til at vise YouTube-videoer, Google Maps, betalingswidgets, sociale medier-feeds og tilsvarende tredjeparts-komponenter — indhold der eksisterer på en ekstern server og hentes til visning inden for din sides layout.

Hvornår iframe er det rigtige valg

iframe er det korrekte valg i tre situationer:

Tredjeparts-komponenter med egne sikkerhedskrav — betalingsformularer (Stripe, PayPal), SSO-logins og bank-integrations. Disse kræver isolation fra din sides kode af sikkerhedshensyn. iframe er den teknisk korrekte løsning.

Eksternt indhold der vedligeholdes af tredjeparten — Google Maps, YouTube-videoer, Calendly-bookingwidgets. Du har ikke kontrol over dette indhold og ønsker ikke at vedligeholde en lokal kopi.

Sandboxet kode-eksekvering — online code editors og interaktive demonstrationer der kræver isolation fra din sides JavaScript-kontekst.

iframe og SEO

iframe er problematisk for SEO i to situationer:

Kritisk tekstindhold i iframe — Googlebot kan indeksere iframe-indhold, men det indekseres som en del af source-URL’en, ikke din side. Tekst, overskrifter og links i en iframe bidrager ikke til din sides relevans. Sæt aldrig primært indhold i en iframe.

Performance — tredjeparts-iframes loader ekstern CSS, JavaScript og cookies. En enkelt YouTube-iframe kan øge sideens JavaScript med 500KB+ ved initial load, hvilket forværrer LCP og INP markant.

Facade pattern — lazy-loaded iframes

Facade pattern er den anbefalede teknik til performance-tunge iframes:

<!-- I stedet for direkte iframe -->
<div class="video-facade" data-src="https://www.youtube.com/embed/VIDEO_ID">
  <img src="https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg"
       alt="Video thumbnail"
       width="1280"
       height="720"
       loading="lazy">
  <button>▶ Afspil video</button>
</div>

document.querySelector('.video-facade button').addEventListener('click', function() {
  const container = this.closest('.video-facade');
  const iframe = document.createElement('iframe');
  iframe.src = container.dataset.src + '?autoplay=1';
  iframe.width = '560';
  iframe.height = '315';
  container.replaceWith(iframe);
});

Thumbnail loades med loading="lazy". iframe loades kun ved klik. Sideload-performance forbedres markant.

sandbox-attributten

sandbox begrænser hvad en iframe-side må gøre:

<iframe
  src="https://eksempel.dk/widget"
  sandbox="allow-scripts allow-forms"
  width="600"
  height="400">
</iframe>

Uden sandbox har iframe adgang til samme origin som din side og kan potentielt manipulere din DOM. Med sandbox og specifikke tilladelser isoleres iframe’s kapabiliteter.

<embed> og <object>

<embed> og <object> er ældre HTML-elementer til indlejring af ikke-HTML indhold — primært PDF-filer og Flash (nu forældet). For PDF-visning er <embed src="fil.pdf"> stadig den enkleste løsning, men mange brugere foretrækker et direkte download-link frem for in-browser PDF-visning.

---

Sidst opdateret: marts 2026. Denne artikel er en del af Stegger.dk’s SEO-ordbog. → Denne artikel er en del af Indholdselementer i kode — Links, billeder og formularer.