Styleguide Vorlage

Eine Sammlung von Regeln für eine einheitliche und professionelle Darstellung Ihrer Website

Die Seite beschreibt eine Vorlage für einen Styleguide für WordPress-Websites. Ein Styleguide ist eine Sammlung von Regeln und Richtlinien, die verwendet werden, um eine einheitliche und professionelle Darstellung einer Website sicherzustellen. Diese Vorlage enthält spezifische Richtlinien für die Gestaltung von Texten, Schriftarten, Farben und anderen Designelementen, die für WordPress-Websites verwendet werden.

Der Styleguide enthält auch Beispiele für die Anwendung dieser Regeln in verschiedenen Bereichen einer WordPress-Website, wie z. B. in der Navigation, im Footer, im Blog etc. Es gibt auch Regeln für die Verwendung von Bildern und Medien sowie für die Anzeige von Links und Buttons.

Diese Vorlage kann von jedem genutzt und angepasst werden, um den Anforderungen des jeweiligen Projekts zu entsprechen. Es ist eine nützliche Ressource für Entwickler und Designer, die WordPress-Websites erstellen, um sicherzustellen, dass die Website einheitlich und professionell aussieht. Insbesondere dient es auch als Richtlinie für die zukünftige Wartung und Weiterentwicklung der Website.

Stand: 24.05.2023
Beispiel: nerdies24.de

WordPress Theme: GeneratePress
Containerbreite: 1400px

Styling Plugin:
GenerateBlocks

Farben

Schriftart

Schriftgrössen

Verlinkung

Menüpunkte

Audioplayer

Videoplayer

Logo Varianten

Beitragsbilder

Galleriebilder

Blog Inhaltscontainer

Button Varianten

Website Icon

Footer Widgets

Fusszeile

CF7 Formular

Robots.txt

Sicherheitsheader

SCHEMA.org

SEO Status

Video Layout

YouTube Banner

Facebook Titelbild

Instagram Post

Share Image

Die Bedeutung von Farben im Webdesign

Farben sind ein wichtiger Aspekt bei der Gestaltung einer Website, da sie eine starke Wirkung auf die Benutzer haben können. Farben beeinflussen das visuelle Erlebnis und können dazu beitragen, dass sich Benutzer willkommen fühlen, länger bleiben und mehr Engagement zeigen.

Farben sind auch ein wichtiger Faktor bei der Barrierefreiheit. Farben mit hohem Kontrast, wie schwarz auf weiß, können für Menschen mit Sehbehinderungen oder Lese-Rechtschreib-Schwächen leichter zu lesen sein. Es ist wichtig, sicherzustellen, dass die gewählten Farben für alle Benutzer gut lesbar und gut sichtbar sind.

Styleguide Farben im Webdesign

Primärfarben

Primärfarbe1
#B1D2E9

Primärfarbe2
rgba(64, 62, 87, 0.9)

Primärfarbe3
rgba(64, 62, 87, 0.8)

Primärfarbe4
rgba(64, 62, 87, 0.7)

Sekundärfarben

Sekundärfarbe1
#3F3D56

Sekundärfarbe2
rgba(64, 62, 87, 0.9)

Sekundärfarbe3
rgba(64, 62, 87, 0.8)

Sekundärfarbe4
rgba(64, 62, 87, 0.7)

Akzentfarben

Akzentfarbe1
#FF7F00

Akzentfarbe2
rgba(255, 128, 0, 0.9)

Akzentfarbe3
rgba(255, 128, 0, 0.8)

Akzentfarbe4
rgba(255, 128, 0, 0.7)

Weitere Farben auf dieser Seite

Website Hintergrundfarbe
#fff

Footer Widget Hintergrund
#E4E4E4

Website Schriftart

Die Schriftart Inter wird auf dieser Website lokal eingebunden

In Bezug auf die DSGVO (Datenschutz-Grundverordnung) gibt es einige Anforderungen, die bei der Verwendung von Schriftarten berücksichtigt werden müssen. Wenn eine Schriftart von einem externen Server geladen wird, müssen Sie sicherstellen, dass der Server in der EU oder in einem Land mit ähnlichen Datenschutzstandards gehostet wird. Außerdem müssen Sie sicherstellen, dass alle Daten, die beim Laden der Schriftart übertragen werden, verschlüsselt werden. Wenn die Schriftart lokal eingebunden wird, müssen diese Anforderungen nicht berücksichtigt werden. Eine lokal eingebundene Schriftart wird schneller geladen, da sie nicht von einem externen Server heruntergeladen werden muss. Zudem haben Sie die Kontrolle darüber, wann und wie die Schriftart geladen wird.

  • Fallback Schriftarten: Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif
  • Schriftart Inter downloaden von Google-Webfonts-Helper
  • Hochgeladene Stile: (400), (500), (600), (700) in die WordPress Mediathek
  • Für die Schriftart Inter wurden die Dateiformate woff und woff2 eingebunden (Browsersupport)
  • Wichtig: Damit die Typografie-Elemente greifen, müssen im GeneratePress Customizer alle Typografien auf System Default gesetzt werden
  • Kontrolle mit Dataskydd, ob alle eingebundenen Schriftarten keine Drittanbieter Cookies senden
  • Offizielle Erklärung von GeneratePress zur lokalen Einbindungen von Schriftarten
// Mimes im GeneratePress Child Theme aktivieren (kommt in die WordPress functions.php)

add_filter( 'upload_mimes', function( $mimes ) {
  $mimes['woff']  = 'application/x-font-woff';
  $mimes['woff2'] = 'application/x-font-woff2';
  return $mimes;
} );
// Möglicher WordPress Filter (kommt in die WordPress functions.php)

add_filter( 'generate_typography_system_stack', function() {
    return 'Inter, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif';
} );
// Mögliche CSS-Anweisung » für die Schriftart Inter 
//  font-display: swap;   ist eine CSS-Eigenschaft, die bestimmt, wie eine Webseite die Ladezeit von Web-Schriften handhaben soll.

/* inter-regular - latin */
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     src: local(''), url('https://nerdies24.de/wp-content/uploads/2022/10/inter-v12-latin-regular.woff2') format('woff2'), 
    /* Chrome 26+, Opera 23+, Firefox 39+ */
     url('https://nerdies24.de/wp-content/uploads/2022/10/inter-v12-latin-regular.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
     font-display: swap;
}
/* inter-500 - latin */
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 500;
     src: local(''), url('https://nerdies24.de/wp-content/uploads/2022/10/inter-v12-latin-500.woff2') format('woff2'), 
    /* Chrome 26+, Opera 23+, Firefox 39+ */
     url('https://nerdies24.de/wp-content/uploads/2022/10/inter-v12-latin-500.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
     font-display: swap;
}
/* inter-600 - latin */
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 600;
     src: local(''), url('https://nerdies24.de/wp-content/uploads/2022/10/inter-v12-latin-600.woff2') format('woff2'), 
    /* Chrome 26+, Opera 23+, Firefox 39+ */
     url('https://nerdies24.de/wp-content/uploads/2022/10/inter-v12-latin-600.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
     font-display: swap;
}
/* inter-700 - latin */
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 700;
     src: local(''), url('https://nerdies24.de/wp-content/uploads/2022/10/inter-v12-latin-700.woff2') format('woff2'), 
    /* Chrome 26+, Opera 23+, Firefox 39+ */
     url('https://nerdies24.de/wp-content/uploads/2022/10/inter-v12-latin-700.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
     font-display: swap;
}

Flüssige Typografie mit calc() zwischen Viewport 360px und 1800px

Die Formel innerhalb von calc() berechnet die Schriftgröße basierend auf der Viewport-Breite (100vw), die als CSS-Einheit „Viewport Width“ (vw) angegeben ist. Hierbei handelt es sich um eine relative Größeneinheit, die einen Bruchteil der Viewport-Breite repräsentiert.

// Mögliche H1 » CSS-Anweisung   Kalkulation für eine flüssige Typografie mit calc()  zwischen 60px (Desktop) und 28px (Mobil)

.h1 {font-size: calc(28px + (60 - 28) * ((100vw - 360px) / (1800 - 360)))!Important;}

.h1 {line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 360px) / (1800 - 360)))!Important;}
// Möglicher Body Text » CSS-Anweisung   Kalkulation für eine flüssige Typografie mit calc()  zwischen 20px (Desktop) und 17px (Mobil)

body {font-size: calc(17px + (20 - 17) * ((100vw - 360px) / (1800 - 360)));}

Flüssige Typografie mit clamp() zwischen Viewport 360px und 1800px

clamp() ist eine CSS-Funktion, die es ermöglicht, einen numerischen Wert zwischen einem Minimum und einem Maximum zu beschränken. Die Syntax lautet clamp(min, value, max)

// Mögliche h1 » CSS-Anweisung  Kalkulation für eine flüssige Typografie clamp()   zwischen 60px (Desktop) und 28px (Mobil)

h1 {font-size: clamp(1.75rem, 1.25rem + 2.2222vw, 3.75rem);}

// Möglicher Body Text » CSS-Anweisung   Kalkulation für eine flüssige Typografie clamp()  zwischen 20px (Desktop) und 17px (Mobil)

body {font-size: clamp(1.0625rem, 1.0156rem + 0.2083vw, 1.25rem);}

Font-size Clamp Generator, BrowserSupport

Desktop Website Schriftgrößen

p – 17px und Sonderfall 20px
(Fließtext – font-weight: 400)

H6 – 18px
(font-weight: 500)
H5 – 20px
(font-weight: 500)

H4 – 22px
(font-weight: 500)

H3 – 24px
(font-weight: 500)

H2 – 30px
(font-weight: 600)

H1 – 60px
(font-weight: 600)

Tablet Website Schriftgrößen

p – 17px und Sonderfall 20px
(Fließtext – font-weight: 400)

H6 – 18px
(font-weight: 500)
H5 – 20px
(font-weight: 500)

H4 – 22px
(font-weight: 500)

H3 – 24px
(font-weight: 500)

H2 – 30px
(font-weight: 600)

H1 – 60px
(font-weight: 600)

Mobil Website Schriftgrößen

p – 17px
(Fließtext – font-weight: 400)

H6 – 18px
(font-weight: 500)
H5 – 20px
(font-weight: 500)

H4 – 22px
(font-weight: 500)

H3 – 24px
(font-weight: 500)

H2 – 26px
(font-weight: 600)

H1 – 28px
(font-weight: 600)

Website
Verlinkungen

  • p – 17px (Fließtext, schwarz #000, font-weight: 400)
  • Linktext (wie Akzentfarbe)
  • Hoverfarbe (wie Akzentfarbe, animiert unterstrichen)

Beispiel

In einem Fließtext ist dies ein Link-Text. Hier geht der Fließtext weiter.

// Mögliche CSS-Anweisung » Animation Link Unterstreichung
// Füge dem a Element die Klasse nerdieslink oder Deine Klasse hinzu

<a class="nerdieslink" rel="noreferrer noopener" href="#" target="_blank">dies ein Link-Text</a>

.nerdieslink{
     background: linear-gradient(currentColor 0 0) bottom /var(--d, 0) 3px no-repeat;
     transition:0.5s;
}
 .nerdieslink:hover {
     --d: 100%;
}

Website Menüpunkte
(Primäres Menü)

Einstellung im WordPress Customizer

  • Schriftgröße: 18px, (font-weight: 400)
  • Erster Buchstabe groß, Rest klein
  • Textfarbe: weiß (#fff)
  • Hover- und Aktiv Farbe: rgba(130,135,140,0.29)
  • Header Hintergrundfarbe: wie Sekundärfarbe
  • Submenü Hintergrundfarbe: wie Sekundärfarbe
  • Submenü Hover Farbe: rgba(130,135,140,0.29)
  • Submenü Textfarbe: #fff
  • Submenü: Schriftgröße 14px, (font-weight: 400)
// Mögliche CSS-Anweisung » Submenü mittig » ohne Schatten » auf die gleiche Breite wie Hauptmenu bringen

.main-navigation ul ul {
	width: 100%;
	box-shadow: none;
	text-align: center;
}

.main-navigation .main-nav > ul > li:not(:last-child) {
    margin-right: 10px;
}

Audioplayer

  • MP3 wird geladen aus der WordPress Mediathek
  • Datei sollte möglichst klein gehalten werden
  • Datei sollte komprimiert sein

Videoplayer

  • Videos werden DSGVO konform aus der eigenen Next Cloud geladen und auf Mittwald über unseren Agentur Server gehostet
  • Kann auch aus Vimeo geladen werden. Hier muss Borlabs Cookie vorgeschaltet werden, da Vimeo das Privacyshield nicht erfüllt
  • Video Poster Image (Vorschaubild 1920x1080px). Kann in WordPress eingebunden werden.
  • Videos komprimieren mit https://compress.ohzi.io
  • Umwandlung des Vorschaubildes von jpg in ein modernes webp Format mit Squoosh
// Mögliche CSS-Anweisung » Video Player

.wp-block-video [poster] {
     border-radius: 20px;
     box-shadow: -webkit-box-shadow:0 0 10px rgba(0,0,0,0.8);
     -moz-box-shadow:0 0 10px rgba(0,0,0,0.8);
     box-shadow:0 0 10px rgba(0,0,0,0.5);
     top:10px;
     bottom:10px;
     left:0;
     right:0;
}

Logo Varianten Website

  • Logo Breite 240px (SVG Format)
  • Website Icon rund 512 x 512px
  • Die Angabe von Breite und Höhe des Logos werden in den Google PageSpeed Insights nicht erfasst und zeigen eine Fehlermeldung an. Deshalb muss man hier mit dem Code unterhalb nachhelfen. Breite (width) und Höhe (height) muss im Code individuell angepasst werden.
// Im GeneratePress Child Theme in die functions.php

add_filter( 'generate_logo_output','tu_logo_atts', 10, 2 );
function tu_logo_atts( $output, $logo ) {
	printf( 
		'<div class="site-logo">
			<a href="%1$s" title="%2$s" rel="home">
				<img width="240" height="46" class="header-image" src="%3$s" alt="%2$s" title="%2$s" />
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		esc_url( apply_filters( 'generate_logo', $logo ) )
	);
}
Nerdies24 Logo weiss
Logo Nerdies24

Logo soziale Netzwerke

  • Logo-Mindestgröße 180 x 180px
  • PNG oder JPG Format
Logo Nerdies24

Bild Größe Blog Beitragsbild

  • 1920x1080px oder 2000 x 500px (webp oder svg Format)
  • Volle Breite
  • Deckkraft rgb(0,5), damit die Schrift besser zu erkennen ist
  • Größe: cover
  • Position: center center, no-repeat, scroll
  • Bei einem neuen Blogbeitrag wird das gewünschte Bild als Beitragsbild eingestellt und dynamisch auf Breite und Höhe generiert
WordPress Beitragsbild

Bild in einem Blogbeitrag
(Gallerie Bild)

  • 1280x720px (webp oder svg Format)
  • Umwandlung in moderne webp Bilder mit Squoosh
  • 16:9 Format
  • Bilder komprimieren (PNG oder JPG)
  • Aufgrund der Barrierefreiheit, sollte jedes Bild mit einem ALT-Tag (Alternativtext) versehen werden, damit dieser von Bildschirmlesegeräten gelesen werden kann
  • ALT-Tag  beschreibt das Bild (Wichtig für SEO) Titel-Tag  benennt das Bild (Weniger wichtig für SEO)
  • Die Bild Datei sollte passend zum Blogbeitrag benannt werden, also styleguide.png nicht 123456.png
  • Best Practices für Google Bilder können hier nachgelesen werden
WordPress Gallerie Bild
// Um herrauszufinden, ob Bilder mit einem ALT-Tag versehen sind, geben Sie den folgenden Befehl auf der entsprechenden Seite in Ihre Browser Konsole ein
// Browser Konsole in Google Chrome öffnen mit  STRG + Umschalt + J 
// Wenn hier Bild-URL`s in einer Tabelle aufgelistet werden, sind diese nicht mit einem ALT-Tag versehen und Sie müssen nachbessern
// undefined heißt alles OK

console.table($$('img').filter(i => !i.alt), ['src'])

Inhalts-Container Blogbeitrag

  • Inhaltscontainer: 800px
  • Die Texte sind durch die geringe Breite besser lesbar
Blog Inhaltscontainer

Website Button Varianten

  • Hintergrundfarbe: Akzentfarbe oder Sekundärfarbe rgba(64, 62, 87, 0.7)
  • Hoverfarbe: rgba(255, 128, 0, 0.9) oder Sekundärfarbe
  • Schriftfarbe: #fff oder #000
  • Schriftgröße: 20, font-weight: 500
  • Rahmengröße: 5px
  • Rahmenfarbe: #fff oder Sekundärfarbe
  • Gilt auch für den „Nach oben“ Button (unten rechts)
  • Farben auf Barrierefreiheit prüfen mit dem Color Contrast Analyzer
StartseiteStartseiteKontaktformularRessourcen

Website Icon

  • Zur Zeit keine Icons
  • In GenerateBlocks einstellbar
  • Icon-Größe: 1em
  • Mehr Open Source Icon auf Bootstrap Icon

Website Footer Widgets

  • 4 Footer Widgets
  • Ausrichtung: linksbündig, zentriert, zentriert, rechtsbündig (Desktop)
  • Ausrichtung: In 2 Reihen zentriert (Tablet)
  • Ausrichtung: In 1 Reihe zentriert (Mobil)
  • Mit zuvor erstellen WordPress Menüs
  • Widget Titel: Unterstrichen, 24px, (font-weight: 700)
  • Listen Elemente: 20px, (font-weight: 700)
  • Linkfarbe: Sekundärfarbe
  • Link Hoverfarbe: Akzentfarbe
  • Footer Widget Hintergrundfarbe: (#E4E4E4)
  • Innenabstand (padding): 80px 40px 80px 40px (wird im Customizer eingetragen)
// Mögliche CSS-Anweisung » Footer Widgets

.footer-widgets .footer-widget-1 {
     flex-basis: 25%;
     text-align: left;
     line-height: 2em;
}
 .footer-widgets .footer-widget-2 {
     flex-basis: 25%;
     text-align: center;
     line-height: 2em;
}
 .footer-widgets .footer-widget-3 {
     flex-basis: 25%;
     text-align: center;
     line-height: 2em;
}
 .footer-widgets .footer-widget-4 {
     flex-basis: 25%;
     text-align: right;
     line-height: 2em;
}
 @media (min-width: 769px) and (max-width:1024px) {
     .site-footer .inside-footer-widgets > div {
         flex-basis: 50%;
    }
     .site-footer .inside-footer-widgets {
         flex-wrap: wrap;
    }
}
 .site-footer .inside-footer-widgets > div {
     margin-top: 20px;
     margin-bottom: 20px;
}
 @media (min-width: 360px) and (max-width:1024px){
     .footer-widgets .footer-widget-1 {
         flex-basis: 25%;
         text-align: center;
    }
}
 @media (min-width: 360px) and (max-width:1024px){
     .footer-widgets .footer-widget-2 {
         flex-basis: 25%;
         text-align: center;
    }
}
 @media (min-width: 360px) and (max-width:1024px){
     .footer-widgets .footer-widget-3 {
         flex-basis: 25%;
         text-align: center;
    }
}
 @media (min-width: 360px) and (max-width:1024px){
     .footer-widgets .footer-widget-4 {
         flex-basis: 25%;
         text-align: center;
    }
}
 .footer-widgets a {
     font-weight: 400;
}
 @media (min-width: 360px) and (max-width:1024px){
     .widget-title {
         margin-top: 20px!Important;
         margin-bottom: 10px!Important;
    }
}

Website Fußzeile

  • Copyright, Datum, 20px, (font-weight: 400)
  • Datum wird dynamisch generiert
  • Textfarbe: weiß
  • Hintergrundfarbe: Wie Sekundärfarbe
  • Innenabstand (padding): 40px (wird im Customizer eingetragen)

Contact Form 7 – Formular

  • Plugin Contact Form 7
  • Zweispaltig
  • Buttonfarbe und Hoverfarbe (Sekundärfarbe) im GeneratePress Customizer einstellbar
  • Breite kann durch den Selector .wps-form {width: 70%;) individuell angepasst werden
  • Spamschutz mit Honeypot
  • DSGVO Hinweistext + Checkbox
  • Erweiterbar mit Dropdown Angebote und Beste Kontaktzeit
  • Für ein  barrierefreies Kontaktformular  müssen die Label der Inputfelder for=“…“  dem Wert der id=“…“  entsprechen. Dann ist das Formular auch für stark sehbehinderte User nutzbar und können von Screenreadern vorgelesen werden.
  • Live Beispiel
// Seit dem Contact Form 7 - Plugin Update 5.7.1 sollte in der wp-config.php folgender Eintrag hinzugefügt werden:

define('WPCF7_AUTOP', false);

Dieser Eintrag in der Datei wp-config.php von WordPress deaktiviert die automatische Formatierung von Texten, die über das Contact Form 7-Plugin eingegeben werden. Standardmäßig ist diese Funktion aktiviert, und der Eintrag deaktiviert sie.
// Möglicher barrierefreie Contact Form 7 Code

<div class="wps-form">
     <div class="wps-form-row">
        <div class="wps-form-column">
            <label>Ihre Auswahl *</label>
            [select* dropdown1 include_blank "Allgemeine Anfrage" "WordPress Webdesign" "WordPress Landingpage" "Member Mambo und Digistore24" "Mitgliedersystem mit Cope Cart" "After Effects Video" "Lottie Animation"]
        </div>
         <div class="wps-form-column">
            <label>Ihre Beste Kontaktzeit *</label>
            [select* dropdown2 include_blank "08:00-10:00 Uhr" "10:00-12:00 Uhr" "12:00-14:00 Uhr" "14:00-16:00 Uhr" "16:00-18:00 Uhr"]
        </div>
    </div>
    <div class="wps-form-row">
        <div class="wps-form-column">
            <label for="vorname">Vorname</label>
            [text vorname id:vorname]
        </div>
        <div class="wps-form-column">
            <label for="nachname">Nachname</label>
            [text* nachname id:nachname]
        </div>
    </div>

    <div class="wps-form-row">
        <div class="wps-form-column">
            <label for="email">Ihre E-Mail-Adresse*</label>
            [email* nerdies24-email id:email]
        </div>
        <div class="wps-form-column">
            <label for="telefon">Ihre Telefonnummer</label>
            [tel nerdies24-telefon id:telefon]
        </div>
    </div>

    <div class="wps-form-row">
        <div class="wps-form-column">
            <label for="ihranliegen">Ihr Anliegen</label>
            [textarea nerdies24-nachricht id:ihranliegen]
        </div>
    </div>

    <div class="wps-form-row">
        <div class="wps-form-column">
            <b id="DSGVO">DSGVO Bedingung vor dem Absenden:</b><br>Ich stimme zu, dass meine Angaben aus diesem Anfrageformular zur Beantwortung meiner Anfrage erhoben und verarbeitet werden. Die Daten werden nach abgeschlossener Bearbeitung Ihrer Anfrage gelöscht. Hinweis: Sie können Ihre Einwilligung jederzeit für die Zukunft per E-Mail an support@nerdies24.de widerrufen. Detaillierte Informationen zum Umgang mit Nutzerdaten finden Sie in unserer <a class="nerdieslink" title="Datenschutzerklärung" href="/datenschutz" target="_blank"><strong>Datenschutzerklärung</strong></a>.
        </div>
    </div>

    <div class="wps-form-row">
        <div class="wps-form-column">
            [acceptance dsgvo-check class:form-check-input]Ja, ich bin einverstanden![/acceptance]
        </div>
    </div>

    [honeypot nerdies]

    <div class="wps-form-row">
        <div class="wps-form-column">
            [submit "Anfrage absenden"]
        </div>
    </div>
</div>
// Möglicher CSS Code » Contact Form 7 Formular

a, input, textarea {
     outline: medium none;
}

.wps-form {
     width: 70%;
     margin: 0 auto;
}

.wps-form-row {
     display: flex;
     flex-direction: column;
     width: 100%;
}

.wps-form-column {
     flex: 1;
     padding: 0.5rem 0;
     width: 100%;
}

@media only screen and (min-width: 360px) and (max-width: 800px) {
     .wps-form {
         width: 80%;
         margin: 0 auto;
}

.wps-form-row {
         display: flex;
         flex-direction: column;
         width: 100%;
}

.wps-form-column {
         flex: 1;
         padding: 0.5rem 0;
         width: 100%;
    }
}

/* Notebook / Desktop */
 @media only screen and (min-width: 48em) {
     .wps-form .wps-form-row {
         flex-direction: row;
    }
     .wps-form .wps-form-column {
         padding: .5rem 1rem;
    }
}

.wpcf7-form-control.wpcf7-acceptance input[type="checkbox"] {
     width: auto;
     margin-top: 0;
     margin-right: 5px;
}

.wpcf7-form-control.wpcf7-acceptance .wpcf7-list-item {
     margin-left: 0;
}

input.wpcf7-form-control.wpcf7-submit {
     color: #fff;
     font-size: 20px;
     font-weight: 400;
     letter-spacing: 0.01em;
     padding: 10px 20px;
     border-radius: 50px;
     border-style: solid;
     border-width: 5px;
}

.required {
     color: #3F3D56;
     font-weight: 700;
}

#DSGVO {
     color: #3F3D56;
     font-size: 18px;
}

input[type="text"], input[type="email"], input[type="url"], input[type="tel"], .wpcf7 select, .wpcf7 textarea {
     color: #000;
     width: 100%;
}

.wpcf7 select option {
     background: #B1C8ED!Important;
}

Robots.txt

Die robots.txt ist eine Textdatei, die sich auf der Wurzelebene einer Website befindet und Suchmaschinen mitteilt, welche Teile der Website durchsucht werden dürfen oder nicht. Diese Datei enthält Anweisungen, die von Suchmaschinenrobots befolgt werden sollen, wenn sie die Website durchsuchen. Mit der robots.txt-Datei kann man beispielsweise verhindern, dass bestimmte Seiten oder Ordner auf der Website durchsucht werden, oder dass bestimmte Suchmaschinen überhaupt keinen Zugriff auf die Website haben. Es ist wichtig zu beachten, dass die Verwendung von robots.txt keine hundertprozentige Sicherheit bietet und dass es immer möglich ist, dass ein Hacker oder ein Bot die Anweisungen ignorieren und trotzdem auf die geschützten Inhalte zugreifen kann.

  • Crawler sind Bots die Inhalte analysieren, Informationen in Datenbanken schreiben und indexieren. Die bekanntesten Bots sind GoogleBot (Google), Bingbot (Bing), Slurpbot (Yahoo), DuckDuckBot (DuckDuckGo), Baiduspider (Baidu), Yandex Bot (Yandex), Sogou Spider (Sogou) und Exabot (Exalead)
  • Die robots.txt kommt ins  Root Verzeichnis  von WordPress. Es ist die erste Datei worauf ein Bot zugreift
  • Darauf achten, dass diese Datei gültig ist (TXT Datei im  UTF-8  und nicht UTF-8-BOM abspeichern)
  • Kann in den Google PageSpeed Insights unter dem Punkt SEO auf Gültigkeit geprüft werden
  • Weitere Erklärungen finden Sie hier
  • Beispiel Datei downloaden
  • Eine Validierung der robots.txt kann hier durchgeführt werden
// Beispiel für eine mögliche robots.txt Datei

User-Agent: *
Allow: /wp-content/uploads/
Disallow: /wp-content/plugins/
Disallow: /wp-admin/
 
Sitemap: https://nerdies24.de/sitemap_index.xml

HTTPs-Sicherheitsheader 

HTTP-Sicherheitsheader sind Anweisungen, die von einem Server an einen Browser gesendet werden, um ihm mitzuteilen, wie die Verbindung gesichert werden soll. Sie können beispielsweise verwendet werden, um das Laden von Inhalten von Drittanbietern zu blockieren, um die Übertragung von Daten zu verschlüsseln oder um den Browser dazu zu bringen, eine sichere Verbindung (HTTPS) anstelle einer unsicheren Verbindung (HTTP) herzustellen.

Der unten gezeigte Code enthält mehrere Anweisungen, die von mod_headers bereitgestellt werden, einem Apache-Modul zum Setzen von HTTP-Headern. Diese Anweisungen setzen verschiedene Arten von Sicherheitskopfzeilen, wie z.B. X-Frame-Options, X-Content-Type-Options und Content-Security-Policy, die helfen, gegen bestimmte Arten von Angriffen zu schützen. Es gibt auch ein paar Anweisungen für mod_rewrite, einem anderen Apache-Modul, das es ermöglicht, URL-Anfragen umzuschreiben und weiterzuleiten. Dieser Code wird verwendet, um Anfragen an WordPress-Seiten umzuschreiben und weiterzuleiten.

Die Änderungen werden in der .htaccess-Datei vorgenommen. Dies ist eine Konfigurationsdatei für den Apache-Webserver. Sie ermöglicht es, bestimmte Einstellungen für einen bestimmten Verzeichnisbereich vorzunehmen, ohne dass dafür die Hauptkonfigurationsdatei des Servers geändert werden muss.

  • Es erfordert, dass Sie die .htaccess-Datei auf Ihrer Website bearbeiten
  • Diese liegt im Root Verzeichnis Ihrer WordPress-Installation
  • Videoanleitung
  • Kann auf Securityheaders überprüft werden
  • Die Regeln aus der .htaccess-Datei müssen für einen  Nginx Webserver  in die Nginx Syntax übersetzt werden. In der Regel wird die neue Syntax in die nginx.conf übertragen. Die Übersetzung kann beispielsweise mit diesem Converter erledigt werden.
// Mögliche .htaccess Datei für einen  Apache Webserver 

<IfModule mod_headers.c>
Header set Strict-Transport-Security "max-age=15768000; preload"
Header set X-Frame-Options "SAMEORIGIN"
Header set X-Content-Type-Options "nosniff"
Header set X-XSS-Protection "1; mode=block"
Header set Referrer-Policy "no-referrer"
Header set Permissions-Policy "accelerometer=(), autoplay=(self), camera=(), encrypted-media=(), fullscreen, geolocation=(self), gyroscope=(), magnetometer=(), microphone=(), midi=(); payment=(), picture-in-picture=('self'), usb=()"
Header Set Content-Security-Policy: "frame-ancestors 'self'"
</IfModule>

# BEGIN WordPress
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress

Schema.org FAQ Vorlage 

Schema.org ist ein von Google, Bing, Yahoo und Yandex entwickeltes Vokabular, das es Webseitenbetreibern ermöglicht, ihre Inhalte für Suchmaschinen besser strukturieren und kategorisieren zu können. Es ermöglicht es, die Inhalte einer Seite durch die Verwendung von spezifischen HTML-Tags besser zu beschreiben, was die Suchmaschinen dabei unterstützt, die Inhalte besser zu verstehen und in Suchergebnissen anzuzeigen.

  • Die vom W3C empfohlene Syntax ist das JSON-LD Format, womit eine Website semantisch ausgezeichnet wird. Videoerklärung
  • Ob der JSON-LD Code valide ist, kann im Schema.org Validator oder direkt in der Google Search Console getestet werden
  • Ein Standard-Code wird durch das Plugin SEO Yoast erzeugt
  • Sollte die Seite spezieller sein, beispielsweise eine Shopseite, FAQ Seite, Landingpage, Person, Beitrag, Podcast oder Videoseite und in Suchmaschinen unbedingt angezeigt werden, kann in GeneratePress Premium » Elements » ein wp_head Hook für die entsprechende Seite erzeugt werden und der Code dort eingefügt werden
  • Der JSON-LD Code kann beispielweise mit diesem Generator erzeugt werden
// Beispiel für eine mögliche valide FAQ Seite (Frage und Antwort Seite) 

<script type=application/ld+json>{
 "@context": "https://schema.org",
 "@type": "FAQPage",
 "mainEntity": [
  {
   "@type": "Question",
   "name": "Welcher Unterschied besteht zwischen wordpress.com und wordpress.org?",
   "acceptedAnswer": {
    "@type": "Answer",
    "text": "Bei WordPress.com ist das ganze System bereits vorkonfiguriert. Also, nur noch einloggen und loslegen, denn das System ist fertig installiert. Du benötigst keine Domain und keine Webhosting. Allerdings hast Du nicht so viele Freiheiten wie bei wordpress.org, kannst jedoch jederzeit zu einer selbstgehosteten WordPress Installation umziehen. Du kannst kostenlos mit einer Subdomain (z.B. https://deinefirma.wordpress.com) starten. Sollte es etwas mehr sein belaufen sich die Kosten zwischen €4 bis €45 pro Monat.WordPress ist eine freie Software (Open Source=Quelloffen). Deshalb kannst Du bei WordPress.org die Software kostenlos downloaden.Hierbei benötigst Du einen eigenen Webhoster, eine https URL und eine Datenbank, denn Du musst System selber installieren. Auf dieser Webseite erfährst Du alles über die wordpress.org Methode."
   }
  },
  {
   "@type": "Question",
   "name": "Welche Vorteile hat WordPress gegenüber anderen Plattformen?",
   "acceptedAnswer": {
    "@type": "Answer",
    "text": "Der große Vorteil gegenüber anderen Plattformen wie Wix und Jimdo ist, dass WordPress Open Source = Quelloffen ist und du dir Software selbst auf deinen Webspace installieren kannst. Dies bedeutet völlige Freiheit, denn Du kannst die Software selbst verwalten."
   }
  },
  {
   "@type": "Question",
   "name": "Ist WordPress nur für Blogger geeignet?",
   "acceptedAnswer": {
    "@type": "Answer",
    "text": "Nein, WordPress ist mit über 50.000 Plugins beliebig erweiterbar. Damit kannst Du Deine Webseite in jede Richtung beliebig erweitern. Du kannst beispielsweise eine Firmen Webseite, einen E-Commerce Shop, Foren oder ein Event Portal mit WordPress erstellen."
   }
  },
  {
   "@type": "Question",
   "name": "Welche Vorkenntnisse benötigst Du für eine WordPress Installation?",
   "acceptedAnswer": {
    "@type": "Answer",
    "text": "Für WordPress benötigst Du keine besonderen Fähigkeiten. Für ein kluges WordPress Setup solltest Du Dich jedoch mit einigen Fertigkeiten, die auf dieser Website beschrieben sind, vertraut machen. Zudem solltest Du Dich mit DSGVO Maßnahmen auseinandersetzten und diese konsequent umsetzten. In diesem E-Recht24 Blogbeitrag erfährst Du was nach der DSGVO noch erlaubt ist."
   }
  },
  {
   "@type": "Question",
   "name": "Ist WordPress kostenlos?",
   "acceptedAnswer": {
    "@type": "Answer",
    "text": "Ja, WordPress ist kostenlos. WordPress selbst sagt dazu: “Unbezahlbar und auch kostenlos”. Du kannst WordPress unter https://de.wordpress.org/download kostenlos downloaden."
   }
  },
  {
   "@type": "Question",
   "name": "Wann wurde WordPress entwickelt?",
   "acceptedAnswer": {
    "@type": "Answer",
    "text": "WordPress startete 2003, als Mike Little und Matt Mullenweg WordPress entwickelten. Heute basiert WordPress auf PHP und MySQL und ist unter der GPLV2 lizenziert. Es ist die Plattform mit der 35% aller Websites im Internet betrieben werden. Mittlerweile treffen sich in 436 Städten weltweit hunderttausende Entwickler, Content-Ersteller und Website-Betreiber in monatlichen Meetups."
   }
  },
  {
   "@type": "Question",
   "name": "Auf welchen Systemen wird WordPress aktuell ausgeführt?",
   "acceptedAnswer": {
    "@type": "Answer",
    "text": "Die aktuellen Statistiken zu den Systemen wie WordPress-Version, PHP-Versionen, MySQL-Version und Gebietsschemas kannst Du direkt bei WordPress unter https://wordpress.org/about/stats abfragen."
   }
  },
  {
   "@type": "Question",
   "name": "Wurde WordPress auch in andere Sprachen außer deutsch übersetzt?",
   "acceptedAnswer": {
    "@type": "Answer",
    "text": "WordPress wurde bis heute in über 70 Sprachen übersetzt wobei derzeit 48 Sprachen zu 100% übersetzt wurden. Welche Sprachen dies sind kannst Du unter https://translate.wordpress.org/stats/ einsehen."
   }
  },
  {
   "@type": "Question",
   "name": "Gibt es ein WordPress Handbuch?",
   "acceptedAnswer": {
    "@type": "Answer",
    "text": "Der WordPress Codex ist ein Online-Handbuch und ein Repository für WordPress-Informationen und -Dokumentationen. Der Codex wird in Englisch gehalten wird jedoch mit dem Google Übersetzer leicht verständlich. Du kannst den WordPress Codex unter https://codex.wordpress.org/ aufrufen."
   }
  },
  {
   "@type": "Question",
   "name": "Was ist der WordPress Live Counter?",
   "acceptedAnswer": {
    "@type": "Answer",
    "text": "Der WordPress Live Counter zeigt die aktuellen Downloadzahlen der aktuellen Version in Echtzeit. Du kannst diesen unter https://wordpress.org/download/counter aufrufen."
   }
  }
 ]
} </script>

Schneller SEO Status in der Browser Konsole überprüfen 

Das unten gezeigte JavaScript-Skript überprüft verschiedene SEO-relevante Faktoren auf einer Webseite, indem es nach bestimmten HTML-Tags und Attributen sucht. Es gibt Informationen über den Seitentitel, die Seitenbeschreibung, Titel und Beschreibung für Social Media, Meta-Robots, Canonische Link, Hreflang, H1-H6-Tags und p-Tags aus, und gibt außerdem eine Liste aller Bilder auf der Seite, die keine ALT-Attribute haben. Diese Informationen können verwendet werden, um die SEO-Leistung einer Webseite zu überwachen und zu verbessern.

  • Um herauszufinden wie es um die Suchmaschinenoptimierung einer Seite bestellt ist, geben Sie den folgenden Code auf der entsprechenden Seite in ihre Browser Konsole ein
  • Browser Konsole in Chrome  STRG + Umschalt + J 
  • In der Konsole wird der Seiten Titel, die Seiten Beschreibung, Titel für Social Media, Beschreibung für Social Media, Share Bild URL für Social Media, Meta Robots Status, Sprache und wieviele H1 bis H6 + p Elemente es gibt angezeigt
  • Es werden ganz unten auch Bild-URL`s in einer Tabelle aufgelistet, die nicht mit einem ALT-Tag versehen sind und nachgebessert werden dürfen
  • undefined heißt » mit den ALT-Tags ist alles OK
// Beispiel für die Überprüfung eines SEO Status in der Browser Konsole  

console.clear();
if( document.querySelector("title") ) {console.log("Seiten-Titel: " + document.getElementsByTagName("title")[0].innerHTML);} else console.log("Kein Seiten-Titel gefunden");
if( document.querySelector("meta[name='description']") ) { console.log("Seiten Beschreibungen: " + document.querySelector("meta[name='description']").getAttribute("content"));} else console.log ("Keine Seiten Beschreibung gefunden");

if( document.querySelector("meta[property=\"og:title\"]") ) {console.log("Titel für Social Media: " + document.querySelector("meta[property=\"og:title\"]").getAttribute("content"));} else console.log("Kein Titel für Social Media gefunden");
if( document.querySelector("meta[property=\"og:description\"]") ) {console.log("Beschreibung für Social Media: " + document.querySelector("meta[property=\"og:description\"]").getAttribute("content"));} else console.log("Keine Beschreibung für Social Media gefunden");
if( document.querySelector("meta[property=\"og:image\"]") ) {console.log("Dieses Bild wird auf Social Media geladen: " + document.querySelector("meta[property=\"og:image\"]").getAttribute("content"));} else console.log("Kein Bild für Social Media gefunden");

if( document.querySelector("meta[name='robots']") ) {console.log("Meta Robots für diese Seite: " + document.querySelector("meta[name='robots']").getAttribute("content"));} else console.log("Keine Meta Robots gefunden");
if( document.querySelector("link[rel='canonical']") ) {console.log("Hauptversion der Seite (Canonical Link): " + document.querySelector("link[rel='canonical']").getAttribute("href"));} else console.log("Kein Canonical Link gefunden");
if( document.querySelectorAll("link[hreflang]") ) {console.log("Sprache (Hreflang): " + document.querySelectorAll("link[hreflang]").length);} else console.log("Kein Hreflang gefunden");
if( document.querySelectorAll("link[hreflang]") ) {document.querySelectorAll("link[hreflang]").forEach(e => console.log(e));} else console.log("alternate link NOT FOUND");


if( document.querySelector("h1") ) {console.log("Anzahl H1 Tag: " + document.getElementsByTagName("h1").length);} else console.log("Keine H1 gefunden");
if( document.querySelector("h2") ) {console.log("Anzahl H2 Tag: " + document.getElementsByTagName("h2").length);} else console.log("Keine H2 gefunden");
if( document.querySelector("h3") ) {console.log("Anzahl H3 Tag: " + document.getElementsByTagName("h3").length);} else console.log("Keine H3 gefunden");
if( document.querySelector("h4") ) {console.log("Anzahl H4 Tag: " + document.getElementsByTagName("h4").length);} else console.log("Keine H4 gefunden");
if( document.querySelector("h5") ) {console.log("Anzahl H5 Tag: " + document.getElementsByTagName("h5").length);} else console.log("Keine H5 gefunden");
if( document.querySelector("h6") ) {console.log("Anzahl H6 Tag: " + document.getElementsByTagName("h6").length);} else console.log("Keine H6 gefunden");
if( document.querySelector("p") ) {console.log("Anzahl p Tag: " + document.getElementsByTagName("p").length);} else console.log("Keine p Elemente gefunden");

console.table($$('img').filter(i => !i.alt), ['src'])

Video Layout Vorgaben

  • 1920 x 1080px (HDTV – 25 Frames/pro Sekunden)
  • Frameseitenverhältnis: 16:9
  • Schriftart: Inter
  • Hoster: Next Cloud, Vimeo (bei Vimeo muss das Video durch Borlabs-Cookie blockiert werden)
  • Hintergrundfarbe: Primär- oder Sekundärfarbe
  • Schriftfarbe: Primär- oder Sekundärfarbe
  • Musik: Pixabay-Musik (Hier muss der Nachweis des Urhebers – z.B. in einem Menüpunkt: Nachweis Externe Dateien erbracht werden)
  • Transition: Pixabay Sound-Effekt (Hier muss der Nachweis des Urhebers – z.B. in einem Menüpunkt: Nachweis Externe Dateien erbracht werden)
Video Layout Variante 1
Video Layout Variante 2

YouTube Banner
2560 x 1440 Pixel

  • Mehr zum YouTube Kanal Branding
  • YouTube Profilbild: 98 x 98px – Dateiformat: PNG oder GIF
  • YouTube Thumbnails 1280 x 720px können mit Canva.com gemacht werden
YouTube Kanal Banner 2560x1440px

Facebook Seite
Titelbild 820 x 312 Pixel

  • Mehr zu den Social Media Formaten
  • Bildformat: jpg oder png
  • Das Facebook Titelbild kann mit Adobe Illustrator oder kostenlos mit canva.com gemacht werden
Facebook Titel Bild

Instagram Bild-Post
1080 x 1080 Pixel

  • Bei einem Bildpost sollte die URL im Bild zu sehen sein, da keine Verlinkung zum Bild-Post auf Instagram möglich ist
  • Bildformat: jpg
  • Bei einen Videopost – Videoformat: 1080 x 1350px (Hochformat), maximal 60 Sekunden
  • Farben: Primär- und Sekundärfarben
  • Instagram Vorlagen auf canva.com
Instagram Post Format

Share Image z.B. für Facebook
1200 x 630 Pixel

  • Wird durch das Plugin SEO Yoast eingebunden
  • Beim Posten der URL wird das Bild z. B. auf Facebook, Twitter, Xing oder LinkedIn angezeigt und ist anklickbar
  • Kann im Facebook Debugger, Twitter Validator oder LinkedIn Post Inspector kontrolliert und aktualisiert werden. (User muss eingeloggt sein)
  • Farben: Primär- und Sekundärfarben
  • Bildformat: jpg oder png
Share Image