Styleguide Vorlage

Stand: 11.11.2022
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

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

Website Hintergrundfarbe
#fff

Footer Widget Hintergrund
#E4E4E4

Website Schriftart

Inter (wird lokal eingebunden)

  • 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
// Mimes im GeneratePress Child Theme aktivieren (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 (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;  sorgt dafür, dass der gesamte Text während der Webfont-Ladevorgänge sichtbar bleibt

/* 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

// 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

// 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 eigener Next Cloud geladen und auf Mittwald über unseren Agentur Server gehostet
  • Kann auch aus Vimeo geladen werden (hier muss Borlabs Cookie vorgeschaltet werden)
  • 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

  • 3 Footer Widgets
  • Ausrichtung: mittig
  • 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

.widget-title {
   border-bottom: 1px solid #3F3D56;
   line-height: 2em;
   display: inline-block;
}

.footer-widgets {
   text-align: center;
}

.footer-widgets a {
   font-size: 20px;
   font-weight: 700;
}

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
// 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
Teilt der Suchmaschine mit, wie sie die Website crawlen soll

  • 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
// 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 

  • 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 eine Kollaboration von Google, Microsoft, Yahoo und Yandex die 2011 ins Leben gerufen wurde, um ein universelles Markup zu entwickeln, mittels derer Suchmaschinen verschiedene Begriffe besser verstehen können. 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 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 

  • 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

YouTube Kanal Banner 2560x1440px

Facebook Seite
Titelbild 820 x 312 Pixel

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 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