HTML lernen (3/5): Grundlagen lernen für Content Manager

Wer im Content Marketing arbeiten will, der sollte sich nicht nur mit Stories auskennen, sondern auch mit HTML, zumindest in den absoluten Grundzügen für Content Manager / Redaktion. Dabei geht es vor allem um Verständnis: Wie funktioniert HTML. Zusätzlich lernst du die 5 wichtigsten HTML Tags für dich, als Content Marketing Manager, kennen.

HTML für Content Manager – Video

In meinen Unternehmen gehören diesen 5 HTML Grundlagen zum absoluten Standard und sie werden bereits in der ersten Woche vermittelt. Schau dir dieses Video genau an, es macht dich besser, effizienter und schlauer. Wenn du die Inhalte im Video verstehst, kannst du schon 90% aller HTML Aufgaben!

In der Content Creation geht es nicht darum HTML komplett zu lernen, du musst nur den Aufbau verstehen und die wichtigsten 5 Tags können.

Das sind deine 5 HTML Grundkenntnisse für Content Marketing:

1. Überschriften
2. Links (intern und extern)
3. Listen (geordnet und ungeordnet)
4. Bilder
5. iFrame anpassen (Breite), Beispiel Google Maps

Tipp! Schau dir unbedingt die schriftliche Ausführung und die Beispiele unter dem Video an.

Du musst eingeloggt sein, um diesen Inhalt zu sehen!

Lukinski SEO Masterclass: Einloggen oder jetzt starten >

So funktioniert HTML

Hier noch einmal dein HTML 1×1 für Content Creation in WordPress:

1. Überschriften
2. Links (intern und extern)
3. Listen (geordnet und ungeordnet)
4. Bilder
5. iFrame anpassen (Breite), Beispiel Google Maps

HTML Tag: Aufbau

Der typische Aufbau ist schnell verstanden. Du hast immer ein öffnendes Tag und ein schließendes Tag. Diese bestimmen, was mit dem Inhalt passiert. Diese Tags sind fest definiert.

So heißen HTML Tags (aus dem Englischen)

• Überschriften (Headline) – h1, h2, h3, h4, h5, h6
• Text-Absatz (Paragraph) – p
• Link (Anker) – a
• Dicke Schrift (bold) – b
• …

Die HTML Tags (öffnend wie <b> und schließend wie </b> ) legst du dann jeweils vor und nach den Teil, den du in diesem Format (im Beispiel dick geschrieben [bold]) haben willst. Dafür verwendest du eckige, spitze Klammern < und >. Wichtig ist, die schließende Klammer enthält ein zusätzlichen Schrägstrich / .

Beispiel – Um einen Text zur Überschrift zu machen, setzt du vor und nach dem Text dein öffnendes und schließendes HTML-Tag.

<h2>Eine Überschrift</h2>

Wenn du Schrift dick machen willst, nutzt folgendes Tag:

<b>Dieser Satz ist jetzt dick geschrieben.</b>

So funktioniert HTML in der Grundlage.

Zusätzliche Parameter

Die einzelnen HTML-Tags kannst du durch zusätzliche Parameter erweitern. Für dieses Beispiel schauen wir uns das HTML für einen Link an.

<a href=”https://website.com/seite/”>Linktext</a>

Parameter setzt du in der öffnenden Klammer. Sie enthalten zusätzliche Informationen. Hier im Beispiel eines Links enthält der Parameter href (Englisch “horizontal referral”) das Linkziel:

<a href=”https://website.com/seite/”>Linktext</a>

Die Parameter lernst du schnell! Den besten Erfolg hast du, indem du bei Gelegenheit immer wieder einen Blick auf das HTML deines WordPress Posts wirfst. Schreibe auch gelegentlich selbst einen Link.

Es können auch mehrere Parameter in der öffnenden HTML Klammer stehen.

<a href=”https://website.com/seite/” target=”_blank” title=”Text”>Linktext</a>

Dein Link enthält jetzt insgesamt drei Parameter, die du gleich im Teil “Die 5 HTML-Tags für Content Marketing Manager” noch genauer kennenlernst. Diese bewirken folgendes:

Linkziel: href=”https://website.com/seite/”
Öffnen im neuen Tab: target=”_blank”
Text bei mouseover: title=”Text”

Herzlichen Glückwunsch, du kennst jetzt das Prinzip von HTML! Daraus kannst du dir nun ganz einfach die 5 wichtigen HTML Tags für Content Marketing Manager erschließen.

Die 5 HTML-Tags für Content Marketing Manager

Dies sind deine zentralen 5 HTML-Tags für SEO Texte in WordPress:

Überschriften: Struktur, Keywords und SEO

Überschriften verdeutlichen dem Leser (und dem Algorithmus) die grundlegende Struktur deiner Seite. Hier müssen deine Keywords platziert sein, gleichzeitig dürfen sie nicht zu statisch geschrieben sein.

Inhalt – Gute Überschriften beinhalten Keyword(s) und (manchmal eine kleine) Story. Eine schlechte Überschrift wäre z.b. “So funktioniert es”, „Mehr dazu”, etc. Eine gute Überschrift vereint Keyword und Story: “Suchmaschinenoptimierung (SEO): Seite 1 Platzierung für deine Website“.

• Schlechte Überschrift (ohne Keyword): “So funktioniert es”
• Überschrift (nur Keyword): “Haus bauen”
• Gute Überschrift (Keyword und Story): “Haus bauen: Schritt für Schritt”

Hierarchie – Deine Überschriften müssen immer eine bestimmte Hierarchie aufweisen. So, wie jede Kurzgeschichte, jede Hausarbeit, jedes Buch. Das bedeutet, arbeiten in Ebenen.

Deine H1-Überschriften ist der Seitentitel, du verwendest sie nicht im Text-Editor. So erkennt die Suchmaschine den Fokus deines Artikels. Innerhalb des Artikels verwendest du dann alle Überschriften ab H2.

Deine H2-Überschriften sind die zentralen Themen (Keywords). Diese haben wiederum Unterüberschriften, sogenannte H3-Überschriften. Sollte deine Seite sehr lang sein, z.b. über 2.000 Wörter, lohnt es sich mitunter H3-Überschriften weiter zu  segmentieren, in H4-Überschriften. Im Normalfall verwendest du aber nur H2/H3-Überschriften für deine SEO Texte.

Überschrift HTML

Ein guter Artikel bis 2.000 Wörter ist dann ungefähr im Folgenden Schema strukturiert:

Merke: H1 wird nicht im Editor verwendet, sie ist der Beitragstitel deines Posts.

• H1
  • H2
    • H3
    • H3
    • H3
  • H2
    • H3
    • H3
    • H3
  • H2
    • H3
    • H3
    • H3
  • H3
    • H3
    • H3
    • H3

Das einzelne HTML-Tag dazu ist wirklich einfach.

Überschrift HTML Tag:

<h1>Titel der Seite</h1>

<h2>Überschrift 2</h2>

<h3>Überschrift 3</h3>

<h4>Überschrift 4</h4>

<h5>Überschrift 5</h5>

<h6>Überschrift 6</h6>

Merke dir also:

1. Keywords verwenden
2. Kleine Story, statt nur Keywords
3. Hierarchie beachten

Links – Internet und externe Verlinkung

Definition – Links verweisen auf Inhalte im Internet (Webseiten und einzelne Dateien). Es gibt es in zweierlei Formen, die interne Verlinkung und die externe Verlinkungen.

Interne Links sorgen dafür, dass deine Besucher weiterführende Informationen bekommen und dementsprechend länger auf deiner Website bleiben. Das erhöht die Verweildauer und dementsprechend auch die Positionierung in den Suchergebnissen, durch eine bessere Bewertung. Wichtige Kennzahlen sind:

• Durchschnittliche Verweildauer
• Durchschnittlicher Seitenanzahl

Externe Links verweisen auf andere Websites. Externe Links müssen immer im neuen Tab geöffnet werden! Merke dir dies ab sofort, für deine gesamte Arbeit. Dadurch, dass sich die externe Website in einem neuen Tab öffnet, bleibt der Besucher auf deiner Seite.

Verweise auf Dateien sind wie externe Links.

Beachte: Wenn du auf eine interne Datei verweist, beispielsweise eine PDF, ist diese gleich zu behandeln wie ein externer Link. Der Besucher soll auf deine Website bleiben. Deshalb öffnest du eine PDF, wie einen externen Link, in einem neuen Tab.

Link HTML

Links sind sehr einfache HTML Tags, im Prinzip brauchst du nur drei Teile. Die URL, den Titel und die Entscheidung, ob sich das Fenster im selben Tab oder in einem neuen Tab öffnet (externe Links).

Link HTML:

<a href=”https://website.com/” title=”Ferrari Spider” target=”_blank” />Ferrari Spider</a>

Parameter sind:

href=”https://website.com/” – Verlinkte Internetseite
title=”Ferrari Spider” – Bildbeschreibung bei Mouseover

target=”_blank” – öffnet den Link in einem neuen Tab

Link Beispie:

Ferrari Spider

Sobald du tiefer in der Verlinkung bist, nutzt du gelegentlich einen weiteren Parameter. Backlinks sind die “Währung im Internet”. Wie im realen Leben ist es so, je mehr Leute über dich sprechen (auf dich verweisen), desto mehr Menschen werden auf die Aufmerksam. Auch der Algorithmus der Suchmaschinen wertet Backlinks stark. Je mehr qualitative Seiten auf dich verweisen (also über dich sprechen), desto stärker wird deine Seite bzw. Domain. Manchen Seiten willst du keine “extra Stärke” verleihen, zum Beispiel bei Linklisten mit zehn, zwanzig oder fünfzig Links zu externen Seiten. In diesem Fall verwendest du folgenden zusätzlichen Parameter im Link HTML Tag.

Alle Links sind automatisch “dofollow”, das heißt, soviel wie “ja, ich will meine Leser aktiv auf diese Domain verweisen”. Solltest du keinen Seitenwert geben wollen, wie in besagten großen Linklisten, setzt du ein “nofollow” Parameter in dein HTML Tag.

rel=”nofollow”

Dein Link sieht jetzt so aus:

<a href=”https://website.com/” title=”Ferrari Spider” target=”_blank” rel=”nofollow”>Ferrari Spider</a>

Listen: Fakten zusammengefasst

Definition – Listen fassen die wichtigsten Erkenntnisse deines Artikel, bzw. einzelner, größerer und Fakten-reicher Absätze in kurzen Stichpunkten zusammen.

Wenn du gute SEO Texte schreiben willst, dann startet jeder deiner Artikel mit einer Liste, dem Inhaltsverzeichnis. Viele Webmaster nutzen dafür ein Plugin, welches die Inhaltsverzeichnisse der einzelnen Artikel automatisch generiert. Ohne eine solche Erweiterung, solltest du am Anfang, nach dem ersten Absatz, immer eine Gliederung für deinen Leser zusammenstellen: Worum geht es in diesem Artikel?

Von hier aus kann jeder Nutzer direkt an eine, für ihn relevanten, Stelle im Text springen. Listen eignen aber vor allem hervorragend, um lange Absätze für den Leser zusammenzufassen. Das hilft Besucher, die nur eine schnelle Information suchen aber auch den Besuchern, die sich intensiv mit deinem Artikel und den Inhalten befassen.

• Schneller Überblick für den Besucher
• Alle Fakten des Abschnitts
• Steigert die User Experience

Listen HTML

Grundsätzlich gibt es zwei Typen von Listen. Ungeordnete Listen bestehen einfach nur aus Stichpunkten. Geordnete Listen besteht aus einer Nummerierungen von 1 bis X.

Geordnete Liste, HTML:

<ol>

<li>Stichpunkt 1</li>

<li>Stichpunkt 2</li>

<li>Stichpunkt 3</li>

</ol>

Geordnete Liste, Beispiel:

1. Stichpunkt 1
2. Stichpunkt 2
3. Stichpunkt 3

Ungeordnete Liste, HTML:

<ul>

<li>Stichpunkt 1</li>

<li>Stichpunkt 2</li>

<li>Stichpunkt 3</li>

</ul>

Ungeordnete Liste, Beispiel:

• Stichpunkt 1
• Stichpunkt 2
• Stichpunkt 3

Bilder

Definition – Die Verwendung von Bildern und Grafiken rentiert sich aus zwei Aspekten, zum einen hast du schöne visuelle Inhalte, zum anderen kannst du mit Bild SEO arbeiten. Beides fördert deine Platzierung in den Suchergebnissen. Das HTML Tag eines Bildes ist sehr einfach.

Bild HTML

Das HTML Tag enthält die URL zur Bilddatei, den Bildtitel und optimal die Abmessung des Bildes (für WordPress nicht nötig, du kannst direkt im Editor mit der Maus skalieren).

Standardaufbau von Bildern:

<img src=”https://website.com/bild.jpg” title=”Roter Ferrari Spider” />

Parameter sind:

src=”https://website.com/bild.jpg” – Bildquelle
title=”Roter Ferrari Spider” – Bildbeschreibung bei Mouseover

Beispiel für zusätzliche Parameter der Bildgröße:

<img src=”https://website.com/bild.jpg” title=”Roter Ferrari Spider” width=”800” height=”400”/>

Parameter sind:

src=”https://website.com/bild.jpg” – Bildquelle
title=”Roter Ferrari Spider” – Bildbeschreibung bei Mouseover
width=”800”

height=”400”

Damit ist das Bild 800 Pixel breit und 400 Pixel hoch.

iFrame anpassen (Breite), Beispiel Google Maps

Definition – Iframes verwendest du für die Einbettung von Inhalten anderer Websites.

Ein einfaches Beispiel sind hier Google Maps. Iframes verwendest du aber auch für Aktienkurse, Wetterdaten und manchen Social Media Angebote. Diese HTML Codes bekommst du immer fertig vom jeweiligen Anbieter.

In der Regel passt du nur einen Parameter an.

Wenn du die standardmäßige Breite und Höhe nimmst, ist die Einbettung häufig zu schmal. Stichwort: Responsive Design. Deine Website sollte sich so gut wie möglich an alle verfügbaren Endgeräte anpassen. Vom Smartphone über Tablet und Notebook bis zum 4K Smart TV.

Beispiel – Standardmäßig hat eine Karte von Google Maps eine Breite von 600 Pixeln. Dein Blog hat aber in der Regel eine Breite von bis zu 1.200 Pixeln (je nach Einstellung)t. Dementsprechend wäre es praktisch, wenn deine Map immer auf 100% skalieren würde.

Dadurch sind die Abstände aber auch die Größenverhältnisse der einzelnen Elemente gleich. Dies wirkt sich wiederum positiv auf die User Experience aus, durch einheitliches Layout und Responsiveness.

Hier siehst du ein Beispiel für den Standard Tag von Google Maps:

<iframe src=“https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387193.305935303!2d-74.25986548248684!3d40.69714941932609!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%20City%2C%20New%20York%2C%20USA!5e0!3m2!1sde!2sde!4v1587836247877!5m2!1sde!2sde“ width=“600″ height=“450″ frameborder=“0″ style=“border:0;“ allowfullscreen=““ aria-hidden=“false“ tabindex=“0″></iframe>

Dessen Parameter „width“ (Breite) veränderst du. Durch die Abwandlung passt Google Maps sich perfekt auf alle Seitenverhältnisse an, von Smartphone bis Fullscreen.

width=”100%”

Google Maps vorher:

Google Maps nach der Änderung des width-Parameters:

Dieses Prinzip brauchst du bei fast allen Iframes, nicht nur bei der Karten Einbindung von Google. selbes Prinzip verwendest du beispielsweise auch bei Wetterkarten Einbindung oder früher bei YouTube Videos (mittlerweile wandelt WordPress YouTube URLs automatisch in Videos um). Einige haben diesen Paramter schon von Haus aus, beispielsweise Giphy. Du kannst jetzt ganz einfach erkennen, ob die Karte responsive ist (100%) oder nicht (Pixel [wie oben 600]).

Du verstehst jetzt die HTML Systematik

Herzlichen Glückwunsch!  Du verstehst jetzt noch mehr von der HTML Systematik. Du kennst alle wichtigen Grundlagen für deine Arbeit in WordPress. Mit diesem neuen Wissen kannst du schon 90% aller Inhalte, die du kreieren wirst, abdecken.

Dir wird es mit zunehmender Übung auch leicht fallen neue HTML Tags zu verstehen.

Vieles im HTML erklärt sich schnell, wenn du an die englische Übersetzung denkst. Alle Begriffe sind feststehend. Kursiv heißt im Englischen “italic”, dessen Tag ist <i>Text</i> . Unterstrichen (Engl. “underline”) kreierst du mit einem <u>Text</u> . Zitate (Engl. “blockquote”) in WordPress heben Textstellen hervor, dafür nutzt du <blockquote>Text</blockquote>.

Weitere Folgen: Tabellen, CSS & Co.

Alle weiteren Folgen dieser Serie sind für dich weiterführenden Inhalte, so wie Tabellen erstellen und das Verständnis von CSS (Design [wie sieht Überschrift, etc. aus von Schriftgröße bis Farbe]).