WordPress: Meta-Tag <description> zu Beiträgen und Seiten hinzufügen

Meta-Tag <description> in WordPress nutzen...

Werbung
Heute erklären wir, wie man die eigene WordPress-Site für Suchdienste und soziale Netzwerke attraktiver gestaltet: Mit individuellen Meta-Tags <description> für Beiträge, Seiten und andere Inhaltstypen.
Heute erklären wir, wie man die eigene WordPress-Site für Suchdienste und soziale Netzwerke attraktiver gestaltet: Mit individuellen Meta-Tags <description> für Beiträge, Seiten und andere Inhaltstypen.
☆ Dieser Artikel ist Teil unserer WordPress-Trickkiste – Tipps, Tricks und Tutorials… ☆

Das Meta-Tag <description> wurde früher häufig verwendet, um Suchmaschinen die Indexierung von Websites zu erleichtern. Zu diesem Zweck enthielt es eine kurze Zusammenfassung des Seiteninhalts.

Dank intelligenter Verschlagwortung von Inhalten verlor die Meta <description> zwar an Bedeutung, spielt jedoch im Rahmen der Suchmaschinen-Optimierung (SEO) immer noch eine wichtige Rolle:

  • Viele Suchdienste verwenden es als Textauszug in ihren Trefferlisten. So nimmt die Meta <description> zwar keinen Einfluss mehr auf das eigentliche Ranking, kann jedoch bei geschickter Formulierung die Klickrate positiv beeinflussen.
  • Auch diverse soziale Netzwerke nutzen beim Teilen von URLs neben dem Seitentitel den Inhalt der <description> als Beschreibung in der Linkvorschau.

Anleitung für ein Meta-Tag <description> in WordPress

Leider ignoriert WordPress per Default sämtliche Meta-Tags. Wer also Beiträgen und Seiten seine eigene Meta <description> hinzufügen möchte, muss entweder zu einem der vielen (funktionsüberladenen) SEO-Plugins greifen – oder legt selbst Hand an.

Wir zeigen im Folgenden, wie man das Meta-Tag <description> ohne Plugins in WordPress einbindet:

  • Jeder Blogpost und jede Seite kann über eine individuelle Meta <description> verfügen; realisiert wird dies über ein benutzerdefiniertes Feld.
  • Zusätzlich steht ein Fallback mit einer generischen Beschreibung bereit (falls keine individuelle <description> vorhanden ist oder für andere Inhalte als Beiträge bzw. Seiten).

Schritt 1: Benutzerdefiniertes Feld anlegen

Wie erwähnt, speichern wir den Inhalt des Meta-Tags <description> in einem benutzerdefinierten Feld. Der Wert dieses Feldes kann für jeden Beitrag (bzw. jede Seite) individuell bestimmt werden.

Die Erstellung eines neuen benutzerdefinierten Felds ist kinderleicht: Öffnen Sie im Adminpanel einen beliebigen Beitrag (oder Seite) zum Bearbeiten und gehen zum Abschnitt „Benutzerdefinierte Felder“:

Unter „Ein neues benutzerdefiniertes Feld hinzufügen“, klicken Sie auf „Neu eingeben“ und legen dann den Namen des neuen Feldes fest. Wir nennen es schlicht „description“ (ohne Anführungszeichen, klein- und zusammengeschrieben).

Fehlt der Abschnitt „Benutzerdefinierte Felder“, prüfen Sie bitte die Einstellungen: Ein Klick auf das Kästchen „Ansicht anpassen“ am Seitenanfang öffnet eine Liste möglicher Elemente. Stellen Sie sicher, dass unter „Boxen“ der Eintrag „Benutzerdefinierte Felder“ mit einem Häkchen versehen ist.

Schritt 2: functions.php editieren

Allein das Erzeugen eines benutzerdefinierten Felds wäre sinnlos, wenn wir WordPress nicht wissen lassen, was es mit dessen Inhalt (Wert) tun soll.

Und hier kommt die Datei functions.php ins Spiel, welche Teil eines jeden Themes ist. Sie finden diese im Unterverzeichnis ./wp-content/themes/<Name des Layouts> Ihrer WordPress-Installation.

Fügen Sie den folgenden Code in die Datei functions.php des aktiven Themes ein:

/* Benutzerdefiniertes Feld für Meta-Tag <description> einfügen. */
/* Blogposts und Seiten */
function add_custom_meta_description() {

$default_description = 'Diese Inhaltsbeschreibung wird als Fallback verwendet, wenn keine individuelle Description für den Inhalt existiert.';

global $post;
echo '<meta name="description" content="';
    if ( is_single() || is_page() )
        {
        if ( get_post_meta($post->ID, "description", true) !='' )
           {echo get_post_meta($post->ID, "description", true);}
           else
           {echo $default_description;}
         }
         else {echo $default_description;}
    echo '"/>';
}
add_action('wp_head', 'add_custom_meta_description', 1);

Zum Bearbeiten der Datei eignet sich auf Shellebene ein Texteditor wie beispielsweise pico. Alternativ können Sie diese auch lokal auf Ihrem PC bearbeiten und dann via FTP hochladen.

Tipp: Vor Änderungen an functions.php bitte unbedingt ein Backup der Datei erstellen!

So funktioniert’s:

Zeile 5: Existiert für einen Beitrag oder eine Seite keine Meta <description>, soll der in der Variable $default_description gespeicherte Text verwendet werden (leer lassen, falls nicht gewünscht).

Ebenso wird dieser Fallback für spezielle Inhaltstypen genutzt, beispielsweise für die Homepage, Kategorien, Schlüsselbegriffe, Suchergebnisse und Archive.

Zeile 8/17: In den Kopfbereich der HTML-Seite (siehe Zeile 19) fügen wir das HTML-Grundgerüst ein, welches das Meta-Tag <description> definiert.

Ab Zeile 9: Die bedingte Anweisung prüft, ob es sich um ein Posting (is_single) oder um eine Seite (is_page) handelt. Ist ein benutzerdefiniertes Feld namens „description“ vorhanden, wird dessen Wert genutzt, anderenfalls die Standardbeschreibung aus Zeile 5.

Zeile 16: Alle anderen Inhaltstypen verwenden die Standardbeschreibung aus Zeile 5.

Schritt 3: Meta <description> einem Beitrag / einer Seite hinzufügen

Öffnen Sie den Beitrag (bzw. die Seite) im Editor und wählen im Bereich „Benutzerdefinierte Felder“ den Eintrag „description“ aus der Liste. Als Wert geben Sie einfach den gewünschten Text ein.

Hinweis zu Anführungszeichen

Für eine größtmögliche Gestaltungsfreiheit wird der Wert des Felds „description“ ungefiltert in den HTML-Code übernommen. Dabei kann es zu Kollisionen mit der HTML-Auszeichnung kommen, was zu Fehlern im Quelltext und in der Folge zu Darstellungsproblemen der Website führt:

Doppelte Anführungszeichen müssen bei der Eingabe mit &quot; codiert werden. Alternativ nutzen Sie einfache Anführungszeichen oder verwenden die im Deutschen typographisch korrekte Variante („ “).

Eine andere Möglichkeit wäre die Funktion esc_html() zum Maskieren von Strings. Zeile 12 unserer Lösung sähe dann beispielsweise wie folgt aus:

           {echo esc_html( get_post_meta($post->ID, "description", true) );}

Allgemeine Syntax: $string = esc_html($string);

Erweiterung: Meta <description> für die Homepage

Vielleicht möchten Sie auch Ihre Homepage mit einem eigenen Meta-Tag <description> ausstatten? Passen wir also den vorhandenen Code für die functions.php entsprechend an:

/* Benutzerdefiniertes Feld für Meta-Tag <description>zu  einfügen. */
/* Homepage, Blogposts und Seiten */
function add_custom_meta_description() {

$default_description = 'Diese Inhaltsbeschreibung wird als Fallback verwendet, wenn keine individuelle Description für den Inhalt existiert.';

global $post; ?>
echo '<meta name="description" content="';
    if ( is_single() || is_page() )
        {
        if ( get_post_meta($post->ID, "description", true) !='' )
           {echo get_post_meta($post->ID, "description", true);}
           else
           {echo $default_description;}
         }
         elseif ( is_home() )
                {echo 'Diese Inhaltsbeschreibung wird nur auf der Homepage angezeigt.';}
         else {echo $default_description;}
    echo '"/>';
}

So funktioniert’s:

Ab Zeile 16: Die bedingte Anweisung wird mit is_home um eine weitere Prüfung auf den Inhaltstyp „Homepage“ erweitert.

Erweiterung: Meta <description> für Kategorien und Schlagwörter

Auf die gleiche Weise können wir andere „spezielle“ Inhalte von WordPress mit dem Meta-Tag <description> ausstatten. Beispielsweise fügen wir eine Unterstützung für Kategorien und Schlagwörter hinzu:

/* Benutzerdefiniertes Feld für Meta-Tag  einfügen. */
/* Homepage, Blogposts, Seiten, Kategorien und Schlagwörter */
function add_custom_meta_description() {

$default_description = 'Diese Inhaltsbeschreibung wird als Fallback verwendet, wenn keine individuelle Description für den Inhalt existiert.';

global $post; ?>
echo '<meta name="description" content="';
    if ( is_single() || is_page() )
        {
        if ( get_post_meta($post->ID, "description", true) !='' )
           {echo get_post_meta($post->ID, "description", true);}
           else
           {echo $default_description;}
         }
         elseif ( is_tag() )
                {echo 'Hier finden Sie zum Stichwort \'' . ucwords(single_term_title('',false)) . '\' viele weitere interessante Informationen.';}
         elseif ( is_category() )
                {echo 'Hier finden Sie zur Kategorie \'' . ucwords(single_term_title('',false)) . '\' viele weitere interessante Informationen.';}
         elseif ( is_home() )
                {echo 'Diese Inhaltsbeschreibung wird nur auf der Homepage angezeigt.';}
         else {echo $default_description;}
    echo '"/>';
}

So funktioniert’s:

Ab Zeilen 16/18/20: Wir erweitern die bedingte Anweisung erneut; nun können wir drei verschiedene Inhaltstypen zusätzlich zu Blogposts und Seiten unterscheiden:

  • is_tag – Schlagwörter
  • is_category – Kategorien
  • is_home – Homepage

Ändern Sie einfach die Texte in den Zeilen 17, 19 und 21 entsprechend Ihren Wünschen.

Werbung
IT- & Business Consultants, Softwareentwickler, Webdesigner und Kreative - alle Leistungen rund um IT und Internet für kleine und mittelständische Unternehmen, Handwerker, Selbständige und Freiberufler!

TOBIAS EICHNER IT + CONSULTING   -   persönliche Beratung in ganz Oberfranken...

Viel Spaß beim Ausprobieren! 🙂


Stand der Informationen: Juni 2020
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!