Einbetten von PDF-Dateien in HTML: So geht’s

Ich zeige dir, wie ich PDF-Dateien in HTML einbette, welche Methoden wirklich funktionieren und wann du besser eine Alternative nimmst. Wenn du eine PDF auf deiner Website direkt anzeigen willst, ist das hier die schnelle, saubere Lösung.

Warum ich PDFs überhaupt in HTML einbetten würde

Manchmal willst du ein Dokument zeigen, ohne den Nutzer aus dem Flow zu werfen. Genau dafür ist das Einbetten stark. Ob Produktbroschüre, Whitepaper, Speisekarte, Anleitung oder Vertrag: Die PDF bleibt direkt auf der Seite sichtbar.

Der Vorteil: Besucher bleiben auf deiner Website. Der Nachteil: PDFs sind nicht immer perfekt für Mobile, Barrierefreiheit oder SEO. Deshalb setze ich sie bewusst ein, nicht blind.

Einbetten von PDF-Dateien in HTML so gehts mit <iframe>

Die einfachste Methode ist ein <iframe>. Damit zeigst du die PDF direkt auf der Seite an.

<iframe src="deine-datei.pdf" width="100%" height="800px">
  Dein Browser kann diese PDF nicht anzeigen. 
  <a href="deine-datei.pdf">PDF herunterladen</a>
</iframe>

So baue ich es in der Praxis:

• src zeigt auf die PDF-Datei
• width steht meist auf 100%
• height sollte hoch genug sein, oft 700 bis 1000px
• Der Fallback-Link ist wichtig, falls der Browser das PDF nicht rendert

Wenn du es sauber machen willst, nutze zusätzlich CSS, damit das Element auf Mobile gut aussieht.

.pdf-container {
  width: 100%;
  height: 80vh;
  border: 1px solid #ddd;
}

.pdf-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

Einbetten von PDF-Dateien in HTML so gehts mit <embed>

Eine zweite Möglichkeit ist <embed>. Das ist schlank und direkt.

<embed src="deine-datei.pdf" type="application/pdf" width="100%" height="800px" />

Ich nutze <embed> gern, wenn ich möglichst wenig Markup will. Aber: Du hast weniger Kontrolle als bei <iframe>. Für viele Projekte reicht das trotzdem völlig aus.

Einbetten von PDF-Dateien in HTML so gehts mit <object>

Wenn ich einen Fallback sauber mitgeben will, ist <object> oft die bessere Wahl.

<object data="deine-datei.pdf" type="application/pdf" width="100%" height="800px">
  <p>Dein Browser kann die PDF nicht anzeigen. <a href="deine-datei.pdf">Hier herunterladen</a>.</p>
</object>

Mein Fazit: Wenn ich maximale Kompatibilität und einen klaren Ersatzlink will, nehme ich <object>. Wenn ich es am einfachsten will, nutze ich <iframe>.

Welche Methode ich wann nutze

• iframe für die beste Allround-Lösung
• embed für kurze, einfache Einbindungen
• object für besseren Fallback und mehr Kontrolle

Wenn du keine Sonderanforderungen hast, starte mit <iframe>. Das ist am verständlichsten und funktioniert in den meisten Fällen gut.

Worauf ich bei der PDF-Einbettung achte

Hier passieren die typischen Fehler. Ich vermeide sie so:

• Pfad prüfen: Die PDF muss korrekt erreichbar sein
• Dateigröße klein halten: Sonst lädt die Seite zu langsam
• Responsive Design: Auf Smartphones muss die PDF lesbar bleiben
• Fallback einbauen: Nicht jeder Browser zeigt PDFs gleich gut an
• HTTPS nutzen: Gemischte Inhalte machen oft Probleme

Ein Punkt, den viele vergessen: PDFs sind nicht automatisch SEO-stark. Suchmaschinen können Inhalte zwar teilweise lesen, aber HTML ist fast immer besser für Sichtbarkeit, Struktur und interne Verlinkung.

Ist das gut für SEO?

Kurz: Nur bedingt. Wenn du eine PDF direkt einbettest, kann das Nutzererlebnis gut sein. Für SEO ist es aber oft besser, den Inhalt zusätzlich als HTML anzubieten.

Ich mache es so:

• Ich zeige die PDF für Nutzer, die das Originaldokument brauchen
• Ich schreibe die Kernaussagen als HTML auf die Seite
• Ich verlinke die PDF zusätzlich zum Download

So holst du das Beste aus beiden Welten: gute Nutzererfahrung und bessere Auffindbarkeit.

Was ich für Barrierefreiheit empfehle

Wenn du PDFs einbindest, denk an Menschen, die Screenreader nutzen oder auf kleinen Displays lesen. Eine eingebettete PDF allein ist oft nicht ideal.

• Nutze einen verständlichen Titel
• Biete einen direkten Download-Link an
• Stelle den Inhalt zusätzlich als HTML bereit
• Prüfe, ob die PDF barrierefrei erstellt wurde

Gute Anlaufstellen für Standards und Browserverhalten sind die offiziellen Dokus von MDN zum iframe-Element, MDN zum embed-Element und MDN zum object-Element.

Mein einfaches Setup für die Praxis

Wenn ich schnell live gehen will, nutze ich dieses Setup:

<section class="pdf-section">
  <h2>Produktbroschüre</h2>
  <p>Hier kannst du die Broschüre direkt ansehen oder herunterladen.</p>

  <iframe src="broschuere.pdf" width="100%" height="900px" title="Produktbroschüre">
    <a href="broschuere.pdf">PDF herunterladen</a>
  </iframe>

  <p><a href="broschuere.pdf">PDF direkt herunterladen</a></p>
</section>

Das ist simpel, verständlich und robust. Genau so mag ich es.

Fazit

Einbetten von PDF-Dateien in HTML so gehts am schnellsten mit <iframe>, sauber mit <object> und minimal mit <embed>. Wenn ich Nutzer auf der Seite halten will, funktioniert das gut. Wenn ich SEO und Lesbarkeit ernst nehme, ergänze ich immer eine HTML-Version oder zumindest eine gute Zusammenfassung.

Wenn du nur eine Sache mitnimmst: PDF einbetten ist einfach, aber die beste Lösung ist fast nie nur die PDF allein.