Website Relaunch
Da ich für Freunde ab und zu Websites erstelle bzw. aktualisiere und ich Anfang 2023 wieder ein Projekt bearbeitet habe, wollte ich ebenfalls meine eigene Website auf den neuesten Stand bringen. Das war auch die Gelegenheit für mich einigen uralten Content rauszunehmen. Ich poste nur selten und eigentlich würde sich die Mühe kaum lohnen, aber ich wollte auf dem neuesten Stand sein.
Ich habe dann für mich ein Dokument erstellt zur Dokumentation meiner Website mit allen Konfigurationeinstellungen. Dieses Dokument habe ich noch umgewandelt, damit es auch als Vorlage für weitere Websites genutzt werden kann. Ich stelle diese Vorlage kostenlos zum Download zur Verfügung (siehe unten).
DGVO konform war ich natürlich schon, aber ich hatte zu der Zeit als die DSGVO wirksam wurde auf meiner Website sehr viele WordPress Plugins einfach rausgeschmissen und keinen Wert mehr auf detaillierte Zugriffs-Statisten gelegt. Nun wollte ich wieder Google Analytics nutzen und auch etwas über SEO lernen.
Ich schreibe meine Artikel nicht vorrangig um viele Treffer bei der Google-Suche zu generieren, da ich hier nichts verkaufen muss. Mir geht es mit meinen Artikeln darum Leuten zu helfen, die evtl. vor ähnlichen Problemen stehen wie ich und die von meinen Erfahrungen und Problemlösungen profitieren können. Trotzdem ist es natürlich schön, wenn ich mehr potenzielle Interessenten erreiche durch besser zu findende Seiten. Deshalb wollte ich mich mehr um Suchmaschinen optimierte Seiten kümmern.
Auf meiner alte Website hatte ich ein WordPress-Theme für etwa 50€ eingesetzt. Nach kurzer Recherche habe ich mich für Divi für meine neue Website entschieden. Da ich mit meiner Lizenz nicht nur meine eigene WordPress Site gestalten kann, sondern Divi auch auf den Websites meiner Freunde einsetzen kann, geht dieses etwas teurere Theme für mich in Ordnung.
Statt Yoast SEO, das ich früher eingesetzt hatte, setzte ich jetzt auf Rank Math SEO. Damit versuche ich meine Blog-Beiträge Suchmaschinen freundlicher zu schreiben und mit Metadaten zu versehen.
Ressourcen
Die folgenden YouTube Kanäle und deren Blogs haben mir mit Divi, SEO und Rank Math und den nötigen Anpassungen zur DSGVO Konformität sehr geholfen:
Divi Theme von ElegantThemes
Für mich lohnt sich die einmalig zu zahlende Lifetime-Access Lizenz von Divi. Ab der dritten Website auf der ich Divi nutze ist Divi günstig für mich.
Es gibt viele Tutorials und einen Marktplatz für Plugins speziell für Divi. Mit den Templates für Webseiten und Teile von Seiten kann man schnell ein modernes Design erstellen und es gibt viele Funktionen mit denen ich schnell alles nötige hinbekommen habe.
Da Divi sehr weit verbreitet ist, gibt es viele Videos, auch auf Deutsch, die alle möglichen Aspekte erklären. Speziell zur DSGVO konformen Einbindung von Google Analytics und der kostenlosen Nutzung von Cookie Bannern und Content Blockern habe ich einiges gefunden.
Damit alle Anpassungen der eigenen Website auch nach einem Update von Divi selbst erhalten bleiben, legt man zu allererst ein Child Theme zu Divi an. Das ist hier von nexTab super beschrieben.
Rank Math SEO
Mit Rank Math kontrolliere ich, wie Google meine Blog-Artikel auf den Suchseiten anzeigt. Es hilft mir auch dabei, etwas mehr auf mögliche Schlüsselwörter zu achten und die Artikel suchgerecht zu schreiben.
Da ich eine Reihe meiner alten Artikel rausgeschmissen habe, ist auch die Kontrolle der 404-Fehler für mich hilfreich. Ich kann sogar einfach Umleitungen auf meine Seite mit den alten Inhalten erstellen.
Mit Google Analytics und Rank Math bekommt man jede Menge Zahlen und Statistiken zu seinen Artikeln. Mit der Zeit kann man dann Artikel schreiben, die häufiger aufgerufen werden, da sie öfter gefunden werden.
Welche Konfiguration man vornehmen sollte erklärt Farbentour hier sehr gut.
DSGVO konforme Website
Die Firma Google bietet besonders gute, einfach zu benutzende und kostenlose Werkzeuge zur Zugriffsstatistik und kostenlose Schriftarten an. Kostenlos heisst natürlich das man als Website Betreiber und als Internet Nutzer mit seinen Daten bezahlt. Durch die DSGVO soll jeder Nutzer selber entscheiden können, ob der Website Betreiber die Daten weitergibt oder nicht.
Technisch wird das mit einer Benutzerabfrage, Cookies und Codefragmenten auf den Webseiten abgebildet, die eben erst eingebettet werden, wenn die Webseitenbesucher zugestimmt haben.
Es ist natürlich gut und wichtig das die Einhaltung dieses Vorgehens bzw. dieser Verordnung kontrolliert wird. Es gibt Anwälte die nach Fehlern auf Webseiten suchen und die Betreiber dann abmahnen. Als Betreiber einer Website sollte man also die Einbindung jeglicher Tools so gut verstehen, dass man sie DSGVO konform einsetzen kann.
Google Fonts sind zwar kostenlos zu nutzen, dadurch dass die Fonts normalerweise erst im Moment des Webseitenbesuchs von den Google Servern abgerufen werden, kann Google weitere Daten der Webseiten Nutzung erfassen. Man kann die Schriftarten lokal auf dem Webserver installieren und damit diese Datenerfassung von Google unterbinden.
Ich binde auch YouTube Videos auf meinen Webseiten ein. Auch diese Einbindung erfolgt ähnlich wie die Nutzung von Google Fonts, nur das ich hier die Videos nicht lokal speicher. Deshalb ist bei der Einbindung der YouTube Videos ein Content Blocker notwendig. Der blockiert das eingebundene Video solange, bis der Besucher zugestimmt hat das er als Zuschauer bei YouTube gezählt werden darf.
Google SiteKit
- Zuerst braucht man einen Google Account.
- Dann erstellt man sich einen Google Analytics Account: https://analytics.google.com
- In Analytics legt man eine Property an, mit der man eine Website statistisch erfasst. Man kann mehrere Properties in einem Analytics Konto anlegen, wenn man z.B. mehrere Websites hat. Da Google gerade (Anfang 2023) von Universal Analytics (UA) auf Google Analytics 4 (GA4) umstellt, braucht man evtl. sowieso noch UA Properties parallel zu GA4 Properties. In der neuen Property gibt man noch allgemeine Informationen zur Website an und zu den geplanten Inhalten (z.B. die Branche).
- Google benutzt jetzt noch ein weiteres Element, den Datenstream, um das Verhalten der Website-Besucher zu erfassen. Am Ende muss eine eindeutige Kennung auf jeder Webseite installiert werden, diese Kennung ist der Google-Tag, er steht für den Datenstream.
- Auf der eigenen WordPress Website installiert man nun das kostenlose SiteKit Plugin von Google.
- Bei der Konfiguration von SiteKit benutzt man nicht die automatische Platzierung des Google-Tags, sondern fügt den manuell ein. Auf der Analytics Seite kann man sich das Code-Fragment (Snippet) anzeigen lassen, das eingefügt werden muss.
- Dieses Snippet darf erst eingefügt werden, wenn der Besucher zur Datenerfassung zugestimmt hat.
- Dazu installiert man zunächst das Cookie Notice Plugin und kann dann dort das Snippet angeben.
Schritte 1 bis 8 erklärt im Video von nexTab hier.
Cookie Notice
- Jetzt installiert man sich das Plugin „Cookie Notice & Compliance for GDPR / CCPA“
- Das Code Snippet von Google kopieren. Das findet man auf seiner Analytics Seite wenn man bei Google angemeldet ist. Oben auf der Seite wählt man sein Konto und das richtige Property aus und dann gelangt man links unten über das Zahnrad in die Verwaltung. Dort wählt man den Menüpunkt „Datenstreams“ und auf der dann angezeigten Seite den Punkt „Tag-Anleitung ansehen“. Auf dieser Seite gibt es den Tab „Manuell installieren“. Dort kann man sich dann sein eigenes Google Code Snippet heraus kopieren. Meins sieht ungefähr so aus wie unter dieser Liste (natürlich mit anderer ID).
- Diesen Code fügt man in das Cookie Plugin ein unter Script-Blockierung und dort im Head.
- In der Zeile „…gtag(‚config‘, …“ am Ende des Snippets muss man noch einfügen, dass auch die IP-Adresse anonymisiert werden soll. Man muss also noch „, {‚anonymize_ip‘: true}“ innerhalb der runden Klammer einfügen. Siehe auch unten.
- Damit man die Frage an den Benutzer nicht einfach weg-klicken kann über das Schliessen-X des Fensters, muss man in der styles.css Datei des Themes noch eine Zeile einfügen:
#cookie-notice #cn-close-notice { display: none; } - Auf der Datenschutz-Seite gibt man dem Besucher dann die Möglichkeit das Tracking auszuschalten und wieder einzuschalten. Man fügt einfach folgende Zeile mit einem Shortcode ein:
Das Webtracking auf diesen Seiten ist - Damit der Shortcode auch funktioniert muss abschliessend noch etwas PHP-Code in die functions.php Datei des Themes eingetragen werden.
PHP-Code für die functions.php Datei:
function ds_button_shortcode() {
return '<script>
if (localStorage.getItem(\'optout\')) {
document.write(\'<span> deaktiviert. </span><button class="et_pb_button ds_button" onclick="deleteOptOut()">Jetzt aktivieren</button>\');
} else {
document.write(\'<span> aktiviert. </span><button class="et_pb_button ds_button" onclick="setOptOut()">Jetzt deaktivieren</button>\');
}
function setOptOut() {
localStorage.setItem(\'optout\', \'true\');
window.location.reload(false);
}
function deleteOptOut() {
localStorage.removeItem(\'optout\');
window.location.reload(false);
}
</script>';
}
add_shortcode( 'ds-button', 'ds_button_shortcode' );Google Snippet für das Cookie Plugin:
<!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-1234567890"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-1234567890', {'anonymize_ip': true}); </script> Auch das ist im Video von nexTab erklärt.
Google Fonts lokal installieren
Mit den kostenlosen Google Fonts bekommt man eine sehr grosse Auswahl von Schriftarten zur Verwendung auf seinen Webseiten. Man muss diese aber lokal auf seinem Webserver installieren, damit man DSGVO konform bleibt.
- Zuerst deaktiviert man Google Fonts in den Optionen seines Divi Themes.
- Dann lädt man auf dieser Seite die gewünschten Schriften herunter:
https://gwfh.mranftl.com/fonts - Man entpackt die Schriftarten auf seinem Computer.
- In Divi geht man in ein beliebiges Textmodul und in der Konfiguration in die Schriftart Auswahl.
- Hier kann man dann Schriftart hochladen auswählen.
Das ist alles detailliert hier beschrieben: https://www.lichtweb.ch/google-fonts-divi/
Content Blocker nach nexTab Anleitung
Will man jetzt noch Videos auf seiner eigenen Webseite einbinden, muss man auch hier den Nutzer um Zustimmung des Trackings bitten. Dazu setzt man Content Blocker ein, die ein Element erst anzeigen nachdem der Besucher zugestimmt hat. Eine kostenlose Variante hat nexTab vorgestellt.
- Die Seite oder den Blog-Beitrag mit dem Video editieren.
- Das Video muss mit zwei Shortcodes umgeben werden (natürlich mit anderer Video ID):
- Um das Aussehen der Hinweis-Box anzupassen wird ein Snippet in die styles.css Datei des Themes eingefügt (siehe unten).
- Dann muss ein Stückchen PHP Code in die functions.php Datei des Themes eingefügt werden (ebenfalls weiter unten angefügt).
- Das reicht noch nicht. Jetzt muss noch eine kleine Datei mit JavaScript Code auf den Webserver hochgeladen werden. Dazu benutzt man ein FTP Programm.
- Im Root Folder des Child Themes einen neuen Ordner anlegen Namens js.
- Jetzt auch noch die Datei meine-scripts.js (siehe unten) hochladen.
Code Snippet für die styles.css Datei des Themes (Farbe an eigenen Look anpassen):
.agreement-box {
background: #ffffff;
border-radius: 8px;
box-shadow: 0 0 6px 2px #ef4566;
padding: 1.5rem;
text-align: center;
margin-bottom: 2rem;
}Code Snippet für die functions.php Datei des Themes:
function agreement_shortcode( $atts, $content = null ) {
$a = shortcode_atts([
'class' => 'wide-player',
'hinweis' => 'Um das Video hier anzuzeigen, müssen Dateien von einem externen Server geladen werden. Bitte gestatte die Anzeige externer Inhalte (hierzu wird deine IP-Adresse an den externen Dienst weitergeleitet, der mit ihr zwar eigentlich nichts anstellen kann, trotzdem schreibt das Gesetz vor, dass ich zunächst dein Einverständnis einhole).',
], $atts);
if ( isset( $_COOKIE['cookie_notice_accepted'] ) && $_COOKIE['cookie_notice_accepted'] == 'true' ) return '<div class="' . $a["class"] . '">' . do_shortcode($content) . '</div>';
if ( ! isset( $_COOKIE['agreement'] ) ) {
return '
<div class="agreement-overlay ' . $a["class"] . '">
<div class="agreement-box">
<p>' . $a["hinweis"] . '</p>
<p></p>
<button class="et_pb_button agreement-button">Zustimmen</button>
</div>
</div>';
}
return do_shortcode( $content );
}
add_shortcode( 'agreement', 'agreement_shortcode' );
function nxt_content_blocker() {
wp_register_script('meine_scripts', get_stylesheet_directory_uri() . '/js/meine-scripts.js', false, '', true);
wp_enqueue_script('meine_scripts');
}
add_action( 'wp_enqueue_scripts', 'nxt_content_blocker', 10);Code der neuen JavaScript Datei meine-scripts.js:
/****************/
/** JavaScript **/
/****************/
/* Content Blocker */
var agreementButton = document.querySelector(".agreement-button");
var agreementOverlay = document.querySelector(".agreement-overlay");
if(agreementButton) {
agreementButton.addEventListener("click", function() {
document.cookie = "agreement=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
agreementOverlay.style.display = "none";
location.reload();
});
}Das ist hier im Video von nexTab noch detaillierter beschrieben: https://www.youtube.com/watch?v=fjJ9LQh9Mkw
Hier ist noch der Teil mit der Einbindung von JavaScript in WordPress von nexTab erklärt.
Weitere Plugins
Antispam Bee
Bei der Konfiguration dieses Plugins muss man nur darauf achten, dass man keine Kommentare aus bestimmten Ländern oder in bestimmten Sprachen herausfiltert. Dazu wären externe Dienste notwendig mit dazugehöriger Datenübertragung, was nicht ohne weiteres DSGVO konform ist.
PageNavi
Dieses Plugin sorgt für eine schöne Seitenweise Auflistung der Blog-Artikel. Die Konfiguration besteht aus Übersetzungen einzelner Worte und weniger weiterer Einstellungen.
Shariff
Mit dem Shariff Plugin gibt man den Webseiten-Besucher die Möglichkeit, die gelesenen Blog-Artikel über Social Media zu verbreiten. Das Besondere dabei ist, dass dieses Plugin die Verknüpfungen zu den unterschiedlichen Social Media Kanälen DSGVO konform erstellt.
Meine Reichweite ist sehr gering und meine Social Media Strategie nicht sehr ausgefeilt. Ich nutze hier nur E-Mail und Pinterest.
Download Monitor
Dieses Plugin nutze ich in der kostenlosen Version um meine Vorlagen kostenlos zum Download zur Verfügung zu stellen. Es erstellt dabei einfache Statistiken.
Sonstiges
FavIcon erstellen
Da es nicht nur eine Datei gibt, die die eigene Website in einem Besucher-Browser symbolisieren soll, ist die Erstellung des FavIcons nicht ganz so einfach. Für unterschiedliche Zielgeräte braucht man leicht unterschiedliche Dateien, die die eigene Website als Icon erkennbar machen sollen. Dazu kann man aber einfach den kostenlosen Webdienst realfavicongenerator.net benutzen.
Im Detail hier nochmal von nexTab erklärt.
Meine Vorlagen und Checklisten
Ich habe mir eine Vorlage erstellt zur Dokumentation der Konfiguration meiner WordPress Seite Pages Vorlage - Dokumentation Website .
Ausserdem habe ich eine Vorlage zur Dokumentation der benutzten Farben und Schriftarten, das ist der Styleguide Pages Vorlage - Website Styleguide .
Die Dritte Vorlage ist zur Dokumentation eines einzelnen Artikeln Pages Vorlage - Blogartikel .
0 Kommentare