Was ist der HTML-Tab?
Der HTML-Tab ermöglicht es Ihnen, alle Ihre Google Docs-Inhalte als sauberen, semantisch optimierten HTML-Code zu exportieren. Dieser HTML-Code ist bereit, direkt in WordPress, Blogger, Webflow oder jedes andere CMS eingefügt zu werden.
Der exportierte HTML-Code bewahrt die gesamte Struktur: Überschriften, Listen, Fettdruck, Links, Tabellen und Bilder (mit ihren Alt-Attributen).
Warum sauberer HTML-Code
Sauberer HTML-Code ist aus mehreren Gründen unerlässlich:
Vorteile von sauberem HTML
1. SEO: Google liest semantisches HTML besser
2. Geschwindigkeit: Leichter HTML-Code lädt schneller
3. Kompatibilität: Funktioniert auf allen CMS-Plattformen
4. Wartung: Code ist später leichter zu bearbeiten
Schmutzigen HTML-Code vermeiden
Wenn Sie aus Word, Google Docs oder einigen Tools kopieren, ist der resultierende HTML-Code voller unnötiger Tags, die die Formatierung zerstören und SEO beeinträchtigen.
Was ist im exportierten HTML enthalten
Der von SEOwer generierte HTML-Code enthält:
- Vollständige semantische Struktur: article, header, main, section, footer
- Überschriftenhierarchie: H1, H2, H3 korrekt verschachtelt
- Geordnete und ungeordnete Listen: ul, ol mit li
- Tabellen mit thead und tbody: Ideal für vergleichende Daten
- Links mit Attributen: href, title, target="_blank" für externe Links
- Bilder mit optimiertem Alt: Bewahrt den Alternativtext
- Fettdruck und Kursiv: strong und em korrekt angewendet
- Blockquotes: Für Zitate und hervorgehobene Inhalte
<article>
<h1>Haupttitel des Artikels</h1>
<p>Einführungsabsatz mit dem Keyword...</p>
<h2>Hauptabschnitt</h2>
<p>Abschnittsinhalt...</p>
<h3>Unterabschnitt</h3>
<p>Mehr Inhalt...</p>
</article>
So kopieren und fügen Sie in WordPress ein
1 HTML in SEOwer generieren
Klicken Sie im HTML-Tab auf die "HTML kopieren" oder "HTML herunterladen"-Schaltfläche. Der Code wird in Ihre Zwischenablage kopiert oder als Datei heruntergeladen.
2 WordPress-Editor öffnen
Wechseln Sie in Ihrem WordPress-Beitrag zum Code-Editor (auch "Code-Editor" oder "Textmodus" genannt). Verwenden Sie den "HTML-Block" oder die Tastenkombination Strg+Umschalt+Alt+M (Klassischer Editor).
3 HTML einfügen
Fügen Sie den gesamten HTML-Code in den Editor ein. Sie werden sehen, dass der Inhalt korrekt formatiert erscheint.
4 SEO-Titel und Meta-Beschreibung hinzufügen
Vergessen Sie nicht, den SEO-Titel und die Meta-Beschreibung in Ihrem SEO-Plugin zu konfigurieren (Yoast, Rank Math, SEOPress, etc.). Der HTML-Code enthält nur den Artikelkörper.
5 Veröffentlichen und überprüfen
Veröffentlichen Sie den Beitrag und überprüfen Sie, dass alles korrekt aussieht. Kontrollieren Sie, dass Überschriften, Listen, Links und Bilder wie erwartet erscheinen.
Tipp für Gutenberg
Wenn Sie den WordPress-Block-Editor (Gutenberg) verwenden, fügen Sie einen "HTML"-Block hinzu und fügen Sie den Code dort ein. Sie können ihn dann bei Bedarf in reguläre Blöcke umwandeln.
So kopieren und fügen Sie in andere CMS ein
Blogger
Gehen Sie in Blogger zu Beitrag → HTML-Editor. Fügen Sie den HTML-Code direkt ein. Blogger bewahrt grundlegende Stile auf.
Webflow
Fügen Sie einen "Embed"-Block hinzu und fügen Sie den HTML-Code ein. Oder kopieren Sie den Inhalt in einen Textabsatz.
Shopify
Wechseln Sie in der Produktbeschreibung oder im Artikel in den HTML-Modus und fügen Sie den Code ein. Verwenden Sie den Rich-Editor von Shopify, um bei Bedarf weitere Bilder hinzuzufügen.
Wix / Squarespace
Verwenden Sie den Rich-Text oder HTML-Embed-Block. In Wix ermöglicht der "Text"-Block das Einfügen von HTML.
Bilder in HTML
Der exportierte HTML-Code enthält Bilder als URL-Referenzen (src="..."). Bilder, die in Google Docs waren, müssen irgendwo gehostet werden.
Wichtig
Wenn Bilder in Google Docs von Google Drive eingebettet waren, müssen Sie wahrscheinlich die URLs ersetzen durch die Ihres CMS oder Medienservers.
1 Bilder in Ihr CMS hochladen
Laden Sie jedes Bild in die Medienbibliothek Ihrer Website hoch (WordPress, Blogger, etc.).
2 Die URL jedes Bildes kopieren
Kopieren Sie die vollständige URL des hochgeladenen Bildes (endet normalerweise mit .jpg, .png, .webp).
3 Im HTML ersetzen
Finden Sie im HTML-Code die img-Tags und ersetzen Sie die src durch die neue URL.
<img src="https://ihredomain.com/bild.jpg" alt="Bildbeschreibung">
Optimierung nach dem Export
Nachdem Sie den HTML-Code in Ihr CMS eingefügt haben, nehmen Sie diese letzten Anpassungen vor:
- H1 festlegen: Stellen Sie sicher, dass es nur eine H1 pro Seite gibt
- Veröffentlichungsdatum hinzufügen: Hilft bei der Aktualität der Inhalte
- Interne Links konfigurieren: Der HTML-Code behält die Links, aber überprüfen Sie, dass sie funktionieren
- Beitragsbild hinzufügen: Dies ist nicht im Body-HTML enthalten
- Medien überprüfen: Verifizieren Sie, dass Bilder korrekt geladen werden