Barrierenfreie Websites (responsiv)

Das Tool „Am I Responsive?“ von Justin Avery ermöglicht die Ansicht der verschiedenen Devices, einfach Domain-Name eingeben...

Bootstrap richtig angewandt

Bei folgendem Link sind die Grids mit guten Beispielen erklärt.

http://holdirbootstrap.de/css/#grid-example-basic

Bootstrap/FA Icon-Übersicht

Die Icons von Bootstrap können wie folgt eingefügt werden.

mit dem Tag "i" und folgender class="icon mdi mdi-link"

Folgende Icons sind verfügbar:

https://cdn.materialdesignicons.com/1.1.34/

oder

https://getuikit.com/v2/docs/icon.html

oder

fa: https://fontawesome.com/v5.15/icons?d=gallery&p=2&q=host&m=free

Wichtige Meta Tags auf Webseiten

Meta-Tags sind ein wichtiger Bestandteil von Websites, da sie Suchmaschinen helfen, die Inhalte der Seiten besser zu verstehen und die Nutzererfahrung zu verbessern. Hier sind die wichtigsten Meta-Tags, die Sie auf Ihrer Website berücksichtigen sollten:

1. Meta-Tags für SEO (Suchmaschinenoptimierung):

Title-Tag

• Bedeutung: Der Seitentitel wird in den Suchergebnissen und im Browser-Tab angezeigt.
• Optimierung:
  • Maximal 50–60 Zeichen.
  • Keyword enthalten, aber leserfreundlich.

<title>Optimierter Seitentitel mit Keyword</title>

Meta Description

• Bedeutung: Eine kurze Beschreibung der Seite, die in den Suchergebnissen unter dem Titel angezeigt wird.
• Optimierung:
  • Maximal 150–160 Zeichen.
  • Handlungsaufforderung oder Nutzen hervorheben.
  • Relevant für das Haupt-Keyword.

<meta name="description" content="Kurzbeschreibung Ihrer Website mit Keywords und Mehrwert für den Nutzer.">

Meta Keywords (optional)

• Bedeutung: Früher verwendet, um relevante Keywords anzugeben.
• Hinweis: Nicht mehr relevant für Google, aber manche andere Suchmaschinen könnten sie noch nutzen.

<meta name="keywords" content="Keyword1, Keyword2, Keyword3">

2. Meta-Tags für die Darstellung in sozialen Medien:

Open Graph (OG) Tags

• Bedeutung: Erlauben das Optimieren von Vorschauen (z. B. auf Facebook, LinkedIn).
• Wichtige Tags:
  • og:title: Titel für die Vorschau.
  • og:description: Vorschautext.
  • og:image: Bild-URL für die Vorschau.
  • og:url: Seiten-URL.

<meta property="og:title" content="Titel der Seite">
<meta property="og:description" content="Beschreibung der Seite für soziale Medien">
<meta property="og:image" content="URL-zum-Bild.jpg">
<meta property="og:url" content="https://www.ihrewebsite.de">

Twitter Cards

• Bedeutung: Optimieren der Darstellung auf Twitter.
• Beispiele:
  • summary: Standard-Tweet-Vorschau.
  • summary_large_image: Vorschau mit großem Bild.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Titel der Seite">
<meta name="twitter:description" content="Kurze Beschreibung für Twitter">
<meta name="twitter:image" content="URL-zum-Bild.jpg">

3. Meta-Tags für technische Optimierung:

Viewport

• Bedeutung: Optimiert die Anzeige auf mobilen Geräten.
• Beispiel:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Canonical Tag

• Bedeutung: Verhindert Duplicate Content, indem die Haupt-URL einer Seite angegeben wird.
• Beispiel:

<link rel="canonical" href="https://www.ihrewebsite.de/hauptseite">

Robots Meta Tag

• Bedeutung: Steuert das Verhalten von Suchmaschinen-Crawlern.
• Beispiele:
  • Indexieren erlauben:

    <meta name="robots" content="index, follow">
    

  • Indexierung verhindern:

    <meta name="robots" content="noindex, nofollow">
    

4. Meta-Tags für Sicherheit und Performance:

Charset

• Bedeutung: Legt die Zeichenkodierung fest (empfohlen: UTF-8).

<meta charset="UTF-8">

Content Security Policy (CSP)

• Bedeutung: Schutz vor Angriffen wie Cross-Site-Scripting.

<meta http-equiv="Content-Security-Policy" content="default-src 'self';">

Referrer Policy

• Bedeutung: Kontrolliert, welche Referrer-Daten beim Verlinken übermittelt werden.

<meta name="referrer" content="no-referrer">

Zusammenfassung

Die wichtigsten Meta-Tags für SEO, Darstellung und Technik sind:

1. Title-Tag und Meta Description.
2. Open Graph Tags und Twitter Cards für soziale Medien.
3. Viewport und Canonical Tag für mobile und technische Optimierung.
4. Robots und CSP für Kontrolle und Sicherheit.

Eine saubere Implementierung dieser Tags verbessert sowohl die Auffindbarkeit in Suchmaschinen als auch die Nutzererfahrung.