-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
404 lines (390 loc) · 38.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
<!doctype html>
<html lang="de" dir="ltr">
<head>
<!-- Primary Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WP-Checkliste – WordPress Schritt für Schritt optimieren</title>
<meta name="title" content="WP-Checkliste – WordPress einfach optimieren">
<meta name="description" content="Schneller Selbsttest für deine WordPress-Website. Eine hilfreiche Checkliste zum Prüfen von Formatierung, WordPress-Optimierungen, Barrierefreiheit, Performance und Sicherheit. Am besten direkt vor einem Launch oder regelmäßig anwenden.">
<meta name="keywords" content="wordpress checkliste, wordpress audit, site audit, web performance checkliste, web accessibility checkliste, html checkliste, css checkliste, javascript checkliste, entwickler checkliste, developer checkliste">
<link rel="preload" href="webfonts.min.css" as="style">
<link rel="stylesheet" href="webfonts.min.css">
<link rel="stylesheet" href="style.min.css">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/imgs/wpauditsite-icon.png">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://wpcheckliste.de/">
<meta property="og:title" content="WordPress-Checkliste – WordPress Schritt für Schritt optimieren">
<meta property="og:description" content="Schneller Selbsttest für deine WordPress-Website. Eine hilfreiche Checkliste zum Prüfen von SEO, WordPress-Optimierungen, Barrierefreiheit, Performance und Sicherheit.">
<meta property="og:image" content="/assets/imgs/logo.jpg">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://wpcheckliste.de/">
<meta property="twitter:title" content="WordPress-Checkliste – WordPress Schritt für Schritt optimieren">
<meta property="twitter:description" content="Schneller Selbsttest für deine WordPress-Website. Eine hilfreiche Checkliste zum Prüfen von SEO, Optimierungen, Barrierefreiheit, Performance und Sicherheit.">
<meta property="twitter:image" content="https://wpcheckliste.de/assets/imgs/logo.jpg">
<meta property="copyright" content="GPL License, created by Simon Kraft">
<link rel="shortcut icon" href="/assets/imgs/favicon.png">
</head>
<body>
<a rel="noopener" target="_blank" class="skip-link screen-reader-text" href="#main">Zum Inhalt springen (Enter drücken)</a>
<header class="site-header">
<h1><a href="/"><img src="assets/imgs/logo-transparent.png" alt="Die Checkliste für WordPress"></a></h1>
<article>
<h2>Schneller Selbsttest für deine WordPress-Website.</h2>
<p>Eine hilfreiche Checkliste zum Prüfen von Formatierung, WordPress-Optimierungen, Barrierefreiheit, Performance und Sicherheit.</p>
<p>Am besten direkt vor einem Launch oder regelmäßig anwenden.</p>
</article>
</header>
<main id="main">
<input id="security" type="checkbox" class="section">
<label for="security" class="section-header"><span role="heading" aria-level="3">Sicherheit</span></label>
<section class="security" aria-label="Security Checklist">
<article class="checklist-item">
<input id="ssl" type="checkbox">
<label for="ssl" class="tickoff"><span role="heading" aria-level="4">SSL: Sicher deine Seite!</span></label>
<p>Wir haben das Jahr 2022. Let’s Encrypt existiert! Und es ist kostenlos! Wenn dein Hoster noch kein Let’s Encrypt oder andere kostenlose Möglichkeiten für kostenlose SSL-Zertifikate unterstützt ist es <strong>Zeit zu wechseln</strong>.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://www.ssl.com/faqs/faq-what-is-ssl/">SSL erklärt</a></li>
<li><a rel="noopener" target="_blank" href="https://letsencrypt.org/about/">About Let’s Encrypt SSL</a></li>
</ul>
</article>
<article class="checklist-item">
<input id="backups" type="checkbox">
<label for="backups" class="tickoff"><span role="heading" aria-level="4">Regelmäßige Backups</span></label>
<p>Jemand oder etwas sollte regelmäßig ein Backup deiner Seite anlegen. Und damit meine ich nicht auf demselben Server. Wenn deine Backups nur auf dem System liegen, auf dem deine Website läuft, gehen sie im schlimmsten Fall zusammen mit der Website verloren.</p>
<ul>
<li><a rel="noopener" target="_blank" href="http://de.wordpress.org/plugins/backwpup/">BackWPup</a> – Backup-Plugin mit vielen Möglichkeiten für Off-Site-Backups.</li>
</ul>
</article>
<article class="checklist-item">
<input id="latestwp" type="checkbox">
<label for="latestwp" class="tickoff"><span role="heading" aria-level="4">Nutzt du die neueste WordPress-Version?</span></label>
<p>WordPress aktuell zu halten ist wichtig, um deine Seite sicher zu halten!</p>
</article>
<article class="checklist-item">
<input id="noadmin" type="checkbox">
<label for="noadmin" class="tickoff"><span role="heading" aria-level="4">Kein „admin“-Benutzer!</span></label>
<p>Einer einfachen Form von Brute-Force-Attacke kannst du ohne großen Aufwand entgehen. Setze einfach niemals einen Benutzer mit dem Namen <em>admin</em> ein. Wenn du schon einen Benutzer mit diesem Namen hast, lohnt es sich, einen neuen Account anzulegen und den alten zu löschen.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://wordpress.org/documentation/article/users-screen/">Neue Benutzer anlegen</a></li>
</ul>
</article>
<article class="checklist-item">
<input id="unused" type="checkbox">
<label for="unused" class="tickoff"><span role="heading" aria-level="4">Entferne unbenutzte Themes und Plugins</span></label>
<p>Bis auf ein Standard-Theme solltest du alle inaktiven Themes entfernen. Wirf außerdem alle inaktiven Plugins raus und schau die Liste der aktiven Plugins nochmal genau durch. Sind die wirklich alle nötig?</p>
</article>
<article class="checklist-item">
<input id="update" type="checkbox">
<label for="update" class="tickoff"><span role="heading" aria-level="4">Themes und Plugins aktualisieren</span></label>
<p>Halte deine Plugins und Themes auf dem neuesten Stand. Vorab solltest du aber ein Backup der Installation machen. Bonuspunkte gibt es für einen Test auf einem Testsystem.</p>
</article>
<article class="checklist-item">
<input id="strongp" type="checkbox">
<label for="strongp" class="tickoff"><span role="heading" aria-level="4">Nutze sichere Passwörter</span></label>
<p>Nur starke Passwörter sind sichere Passwörter! Das gilt nicht nur für dich, sondern auch für alle anderen Benutzer deiner Website.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://xkcd.com/936/">XKCD: Passwort Strength</a></li>
</ul>
</article>
<article class="checklist-item">
<input id="twofactor" type="checkbox">
<label for="twofactor" class="tickoff"><span role="heading" aria-level="4">Zwei-Faktor-Authentifizierung</span></label>
<p>Mit einer Zwei-Faktor-Authentifizierung zusätzlich zu deinem Passwort kann dein WordPress-Konto effektiv vor fremdem Zugriff geschützt werden. Zusätzlich sollte Zwei-Faktor-Authentifizierung mindestens für alle Benutzer mit Administrator-Rechten aktiviert werden.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://de.wordpress.org/plugins/two-factor/">„Two Factor“-Plugin</a></li>
<li><a rel="noopener" target="_blank" href="https://krautpress.de/2016/zwei-factor-authentifizierung/">2 Factor Authentifizierung – das zweite Schloss an der Tür</a></li>
</ul>
</article>
<article class="checklist-item">
<input id="limitlogin" type="checkbox">
<label for="limitlogin" class="tickoff"><span role="heading" aria-level="4">Limit Login Attempts</span></label>
<p>Sehr hilfreiches Plugin, das viele Attacken auf deine Seite schon im Keim ersticken kann.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://de.wordpress.org/plugins/limit-login-attempts-reloaded/">„Limit login attempts reloaded“-Plugin</a></li>
</ul>
</article>
</section>
<input id="performance" type="checkbox" class="section">
<label for="performance" class="section-header"><span role="heading" aria-level="3">Performance und Ladezeit</span></label>
<section class="performance" aria-label="Performance-Checkliste">
<article class="checklist-item">
<input id="gzip" type="checkbox">
<label for="gzip" class="tickoff"><span role="heading" aria-level="4">GZip-Kompression</span></label>
<p>Wird deine Seite schon GZip-komprimiert ausgegeben? Bei Gzip handelt es sich um eine clevere Art die Daten, für deine Website schneller zu übertragen. Moderne Web-Browser fragen automatisch zuerst die Gzip-Version der Daten von deinem Server an.</p> <p>Die meisten WordPress-freundlichen Hoster haben GZip schon aktiviert. Kontrollieren solltest du es trotzdem nochmal. Wenn du GZip nicht auf Server-Ebene aktivieren kannst, hilft dir ein Plugin:</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://www.giftofspeed.com/gzip-test/">Gzip-Compression-Checker</a> – hilft dir, zu überprüfen, ob deine Seite per GZip ausgeliefert wird.</li>
<li><a rel="noopener" target="_blank" href="https://torquemag.io/2016/04/enable-gzip-compression-wordpress/">How To Easily Enable Gzip Compression For WordPress</a> – praktischer Artikel der erklärt, warum genau GZip super ist und was du tun musst.</li>
</ul>
</article>
<article class="checklist-item">
<input id="validhtml" type="checkbox">
<label for="validhtml" class="tickoff"><span role="heading" aria-level="4">Valides HTML</span></label>
<p>Lass deinen Code durch den HTML-Validator laufen, damit du keine super heftigen Fehler übersiehst. Manchmal gibt es kleinere Fehler, die du nicht beheben kannst und das ist okay. Du solltest dir nur sicher sein, dass du nichts Offensichtliches übersiehst.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://validator.w3.org/"> Markup Validation Service</a> – du kannst den Test auf eine URL oder auf direkt eingefügten Code loslassen.</li>
</ul>
</article>
<article class="checklist-item">
<input id="images" type="checkbox">
<label for="images" class="tickoff"><span role="heading" aria-level="4">Kleine kleine Bilder</span></label>
<p>Optimiere die Bilder auf deiner Seite! Sie sollten so klein wie möglich ausgeliefert werden und im Optimalfall mittels Lazy Loading nachgeladen werden. Bei vielen Websites hat das enorme Auswirkungen auf die Ladezeit.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://de.wordpress.org/plugins/imagify/">Imagify</a> – ist ein tolles Plugin zur Bildkompression direkt in WordPress. Neben einigen kostenpflichtigen Tarifen gibts auch einen kostenlosen für Gelegenheitsnutzer/innen.</li>
<li><a rel="noopener" target="_blank" href="https://de.wordpress.org/plugins/lazy-loading-responsive-images/">Lazy Loader</a> – einfaches Lazy Loading ohne überflüssige Optionen.</li>
<li><a rel="noopener" target="_blank" href="https://compresspng.com/">Compress PNG</a> – mit diesem Online-Tool kannst du deine Bilder manuell komprimieren.</li>
<li><a rel="noopener" target="_blank" href="https://tinypng.com/">TinyPNG</a> – ein weiteres großartiges Online-Tool zur manuellen Kompression.</li>
<li><a rel="noopener" target="_blank" href="https://imageoptim.com/mac">ImageOptim</a> – Mac-App zur schnellen Offline-Bildkompression von Bildern aller Art.</li>
</ul>
</article>
<article class="checklist-item">
<input id="fonts" type="checkbox">
<label for="fonts" class="tickoff"><span role="heading" aria-level="4">Webfonts optimieren</span></label>
<p>Die Webfonts deiner Website schnell und <em>richtig</em> zu laden ist wichtig. Achte darauf, dass du nur das lädst, was du wirklich brauchst und nutze <code>preconnect</code> um die Dateien schneller zu laden und <a rel="noopener" target="_blank" href="https://css-tricks.com/fout-foit-foft/">das <strong>Aufblitzen von ungestyltem Text</strong> und <strong>unsichtbarem Text</strong></a> zu vermeiden.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect/">Preconnect fonts</a> – wie du deine Fonts schneller laden kannst</li>
<li><a rel="noopener" target="_blank" href="https://github.com/typekit/webfontloader">WebFont Loader</a> – nutze diese einfache Library, um das Laden deiner Webfonts zu verbessern.</li>
</ul>
</article>
<article class="checklist-item">
<input id="caching" type="checkbox">
<label for="caching" class="tickoff"><span role="heading" aria-level="4">Cache dein Zeug</span></label>
<p>Du hast es schon früher gelesen und wirst es jetzt wieder tun. Setz Caching ein. Es gibt unzählige tolle Caching-Plugins für WordPress. Gute Hoster haben außerdem fast immer eigene, serverseitige Caching-Lösungen, auch die wollen genutzt werden!</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://de.wordpress.org/plugins/cachify/">Cachify</a> – einfaches Caching-Plugin <em>fast</em> ohne Einstellungen.</li>
<li><a rel="noopener" target="_blank" href="https://wp-rocket.me/de/">WP Rocket</a> – ein kostenpflichtiges und <em>sehr</em> gutes Caching- und Performance-Plugin.</li>
</ul>
</article>
<article class="checklist-item">
<input id="co2" type="checkbox">
<label for="co2" class="tickoff"><span role="heading" aria-level="4">CO₂</span></label>
<p>Wenn deine Seite aufgerufen wird, verbraucht das Strom und sorgt dafür, dass CO₂ ausgestoßen wird. Schau dir an, wie viel CO₂-Ausstoß deine Website bei jedem Aufruf verursacht und ob du den Wert vielleicht verbessern kannst.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://simon.blog/2019/wordpress-web-und-klima/">WordPress, das Web und das Klima</a> – mein recht umfassender Blog-Artikel zum Thema klimafreundliche Websites.</li>
<li><a rel="noopener" target="_blank" href="https://www.websitecarbon.com">Website Carbon Calculator</a> – einfaches tool zur CO₂-Messung deiner Website.</li>
</ul>
</article>
<article class="checklist-item">
<input id="httprequests" type="checkbox">
<label for="httprequests" class="tickoff"><span role="heading" aria-level="4">HTTP-Requests reduzieren</span></label>
<p>Je mehr Dateien für deine Website übertragen werden, desto mehr HTTP-Requests werden benötigt. Schmeiß unnötigen Kram raus und reduziere so die Anzahl der Requests.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://wp-rocket.me/blog/reduce-http-requests-speed-wordpress-site/">How to Reduce HTTP Requests to Speed Up Your WordPress Site</a> – hilfreiche Anleitung zur Oprimierung.</li>
</ul>
</article>
<article class="checklist-item">
<input id="speedcheck" type="checkbox">
<label for="speedcheck" class="tickoff"><span role="heading" aria-level="4">Speedtest</span></label>
<p>Lass deine Website durch das Speedtest-Tool deiner Wahl laufen, um Probleme zu finden, die du sonst übersiehst. Hinter unseren flotten DSL-Anschlüssen vergessen wir nur zu schnell, dass das Internet nicht überall so schnell ist – in ICEs zum Beispiel.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://tools.pingdom.com">Pingdom Website Speed Test</a> – übersichtlicher Test mit verständlicher Auswertung.</li>
<li><a rel="noopener" target="_blank" href="https://www.webpagetest.org/">Webpagetest.org</a> – deutlich komplexerer Test für Fortgeschrittene.</li>
</ul>
</article>
</section>
<input id="privacy-legal" type="checkbox" class="section">
<label for="privacy-legal" class="section-header"><span role="heading" aria-level="3">Datenschutz und Rechtliches</span></label>
<section class="privacy-legal" aria-label="Datenschutz und Rechtliches">
<article class="checklist-item">
<input id="impressum" type="checkbox">
<label for="impressum" class="tickoff"><span role="heading" aria-level="4">Impressum und mehr</span></label>
<p>Die meisten Websites brauchen ein ordentliches Impressum. Wenn du als Kind nicht in den Topf mit der Juristerei gefallen bist kannst du dafür einfach einen Impressums-Generator benutzen und anschließend dein Impressum z.B. über ein Menü überall auf deiner Website erreichbar machen.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://de.wordpress.org/plugins/impressum/">„Impressum“-Plugin</a> – Ein Impressums-Generator direkt in deiner Website</li>
<li><a rel="noopener" target="_blank" href="https://rechtsbelehrung.com/impressum-rechtsbelehrung-94/">Podcast-Folge der <em>Rechtsbelehrung</em></a> – für alle Fragen rund um Impressum und Co.</li>
</ul>
</article>
<article class="checklist-item">
<input id="traffic" type="checkbox">
<label for="traffic" class="tickoff"><span role="heading" aria-level="4">Besucher*innen Statistik - ganz legal</span></label>
<p>In vielen Fällen sind Infos über die Besucher*innen deiner Website interessant. Wie viele kommen vorbei, und welche Beiträge und Seiten sehen sie an? Während die meisten Tracking-Lösungen auf Cookies setzen und die Privatsphäre deiner Besucher*innen gefährden, kannst du mit Plugins wie Statify sicher und zuverlässig einfache Statistiken erheben. Hast du ein Statistik-Tool aktiv und ist es datensicher?</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://de.wordpress.org/plugins/statify/">„Statify“-Plugin</a></li>
</ul>
</article>
<article class="checklist-item">
<input id="external-content" type="checkbox">
<label for="external-content" class="tickoff"><span role="heading" aria-level="4">Externe Inhalte ausklammern</span></label>
<p>Wenn du auf deiner Website Inhalte von externen Websites wie etwa YouTube-Videos, Tweets oder Karten von Google-Maps einbetten möchtest, solltest du deine Besucher*innen um Erlaubnis fragen, bevor du sie anzeigst. Sonst können personenbezogene Daten wie IP-Adressen nämlich an die Anbieter dieser externen Dienste übertragen werden.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://de.wordpress.org/plugins/embed-privacy/">„Embed Privacy“-Plugin</a> – Ein Plugin für eine einfache 2-Klick-Lösung</li>
</ul>
</article>
<article class="checklist-item">
<input id="local-fonts" type="checkbox">
<label for="local-fonts" class="tickoff"><span role="heading" aria-level="4">Keine externen Webfonts verdammt nochmal!</span></label>
<p>Auch wenn die ersten Abmahnwellen rund um Google-Fonts sich wieder gelegt haben, ist es einfach nicht ratsam Webfonts von externen Quellen zu laden. Ähnlich wie mit anderen externen Inhalten werden auch beim Laden von Webfonts personenbezogene Daten an Dritte übermittelt ohne, dass deine Besucher*innen explizit zugestimmt haben. Vermeide den Einsatz externer Webfonts daher und lade sie lokal von deinem eigenen Server. (Ja, das gilt auch für andere Anbieter wie zum Beispiel Typekit!)
</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://de.wordpress.org/plugins/custom-fonts/">Custom
Fonts Plugin</a> – relativ wenig Code-lastige Lösung zum Lokalen Laden von Fonts</li>
<li><a rel="noopener" target="_blank" href="https://kinsta.com/de/blog/lokaler-schriftarten/">Ausführliche Anleitung zum Hosten lokaler Schriftarten in WordPress</a> – ein hilfreiches Tutorial zum einfachen lokal Hosten von Webfonts in WordPress.</li>
<li><a rel="noopener" target="_blank"
href="https://blog.logrocket.com/self-hosted-fonts-vs-google-fonts-api/">Self-hosted fonts
vs. Google Fonts API</a> – ein einfacher Guide für lokal gehostete Google Fonts.</li>
</ul>
</article>
</section>
<input id="formatting-seo" type="checkbox" class="section">
<label for="formatting-seo" class="section-header"><span role="heading" aria-level="3">Formatierung und SEO</span></label>
<section class="formatting" aria-label="Formatierungs-Checkliste">
<article class="checklist-item">
<input id="index" type="checkbox">
<label for="index" class="tickoff"><span role="heading" aria-level="4">Ist deine Seite für Suchmaschinen sichtbar?</span></label>
<p>In den WordPress-Einstellungen unter <em>Einstellungen</em> <em>Lesen</em> kann festgelegt werden, ob Suchmaschinen davon abgehalten werden sollen, deine Seite in ihren Index aufzunehmen. Während eine neue Website gebaut wird, ist es super sinnvoll, diese Option auzuwählen. Oft wird an dieser Einstellung nach dem Start aber einfach nichts geändert. Schau lieber nochmal nach.</p>
</article>
<article class="checklist-item">
<input id="language" type="checkbox">
<label for="language" class="tickoff"><span role="heading" aria-level="4">Gib die Sprache deiner Website an</span></label>
<p>Stell sicher, dass <code>language_attributes()</code> im Code deines Themes angegeben ist. Das hilft nicht nur Menschen mit Screen-Readern, sondern auch Übersetzungs-Tools und Google zu verstehen, welche Sprache deine Seite hat.</p>
<ul>
<li>Lies die Dokumentation zu <a rel="noopener" target="_blank" href="https://developer.wordpress.org/reference/functions/language_attributes/">Language Attributes</a>.</li>
<li><a href="https://de.wordpress.org/plugins/chl-change-html-lang/" rel="noopener">Change HTML Lang</a> – ein wirklich praktisches Plugin, das dir hilft die Sprache deiner Seite zu Setzen oder zu ändern, ohne Code anfassen zu müssen.</li>
</ul>
</article>
<article class="checklist-item">
<input id="seo" type="checkbox">
<label for="seo" class="tickoff"><span role="heading" aria-level="4">SEO</span></label>
<p>Du willst, dass deine Seite gefunden wird? Installier ein SEO-Plugin, das dir dabei hilft und dich beim Schreiben und Anpassen deiner Inhalte an der Hand nimmt. Stell sicher, dass du alle wichtigen Informationen wie Meta-Beschreibung, Open-Graph-Titel und -Bilder für alle Inhalte angibst. Vielleicht ist eines dieser Plugins etwas für dich:</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://de.wordpress.org/plugins/wordpress-seo/">Yoast SEO</a></li>
<li><a rel="noopener" target="_blank" href="https://de.wordpress.org/plugins/autodescription/">The SEO Framework</a></li>
</ul>
</article>
<article class="checklist-item">
<input id="metatags" type="checkbox">
<label for="metatags" class="tickoff"><span role="heading" aria-level="4">Meta-Tags</span></label>
<p>Wenn du ein SEO-Plugin installiert und richtig konfiguriert hast, solltest du hier eigentlich keine Probleme haben. Aber wirf doch trotzdem nochmal einen Blick darauf und stell sicher, dass es mit den Meta-Tags auf deiner Seite keinen Ärger gibt.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://www.heymeta.com">Hey Meta</a> – zeigt dir, wie deine Seite in Social-Media aussieht und was für Basis-Tags du hast.</li>
<li><a rel="noopener" target="_blank" href="https://developers.facebook.com/tools/debug/sharing/">Facebook debugger</a> – zeigt dir <em>ganz genau</em> wie deine Seite auf Facebook aussieht und lässt sich sogar den Facebook-Cache für deine Seite leeren, wenn du etwas änderst.</li>
<li><a rel="noopener" target="_blank" href="https://cards-dev.twitter.com/validator">Twitter Card Validator</a> – hilft dir beim Testen der Twitter-Vorschau deiner Seite.</li>
</ul>
</article>
<article class="checklist-item">
<input id="links" type="checkbox">
<label for="links" class="tickoff"><span role="heading" aria-level="4">Links</span></label>
<p>Funktionieren alle Links auf deiner Seite noch? Es kommt häufig vor, dass verlinkte Seiten einfach nicht mehr existieren und Links ins Leere laufen. Wenn du auf deiner eigenen Website Seiten umbenennst, kann es auch zu Problemen kommen. Auch hier gibt es ein Plugin, dass dir helfen kann:</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://validator.w3.org/checklink">W3C Link Checker</a> – Einfaches Web-Tool zum Testen einer auf defekte Links.</li>
<li><a rel="noopener" target="_blank" href="https://de.wordpress.org/plugins/redirection/">Redirection</a> – Dieses Plugin überprüft 404-Fehler auf deiner Seite, fängt URL-Änderungen ab und leitet sie automatisch um, außerdem kannst du auch eigene Weiterleitungen einrichten.</li>
</ul>
</article>
<article class="checklist-item">
<input id="favicon" type="checkbox">
<label for="favicon" class="tickoff"><span role="heading" aria-level="4">Favicon</span></label>
<p>Hast du ein Favicon eingerichtet? Schau unter <em>Themes</em> › <em>Customize</em> › <em>Website-Informationen</em> nach und wähle ein <strong>Website-Icon</strong> aus, wenn keins ausgewählt ist. Das Bild, das du hier auswählst, wird als Favicon (und auf Smartphones und Tablets manchmal auch auf dem Homescreen) ausgegeben.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://wordpress.org/support/article/creating-a-favicon/">Schritt-für-Schritt-Anleitung</a> zur Einrichtung eines Website-Icons.</li>
</ul>
</article>
<article class="checklist-item">
<input id="responsive" type="checkbox">
<label for="responsive" class="tickoff"><span role="heading" aria-level="4">Responsive Webdesign</span></label>
<p>Ist deine Webseite responsive? Sie sollte es sein! Nutze CSS-Media-Queries und <em>bitte bitte</em> schau nochmal nach, ob der Zoom auf der Seite wirklich <em>nicht</em> abgeschaltet ist. Schau dir die Seite auf verschiedenen Geräten an.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/">Responsive Web Design</a> – eine wirklich tolle Einführung ins Thema von Smashing Magazine.</li>
<li><a rel="noopener" target="_blank" href="https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries">CSS-Media-Queries</a> – eine hilfreiche Referenz zum Einsatz dieser praktischen Queries!</li>
<li><a rel="noopener" target="_blank" href="https://search.google.com/test/mobile-friendly">Teste deine Website</a> – mit dem <em>Mobile Friendly</em> Test von Google</li>
<li><a rel="noopener" target="_blank" href="https://adrianroselli.com/2015/10/dont-disable-zoom.html">Don't Disable Zoom</a> – in diesem Artikel erfährst du, warum es wirklich wirklich schlecht ist, Zoomen auf deiner Seite zu unterbinden.</li>
</ul>
</article>
</section>
<input id="a11y" type="checkbox" class="section">
<label for="a11y" class="section-header"><span role="heading" aria-level="3">Barrierefreiheit</span></label>
<section class="a11y" aria-label="Accessibility Checklist">
<article class="checklist-item">
<input id="sitemap" type="checkbox">
<label for="sitemap" class="tickoff"><span role="heading" aria-level="4">Hast du eine Sitemap?</span></label>
<p>Wenn du dein SEO-Plugin eingerichtet hast, hast du vermutlich schon eine (oder mehrere). Geh auf <code>deineseite.de/sitemap.xml</code> und stell sicher, dass du wirklich eine hast!</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://webaim.org/techniques/sitetools/#siteindex">Sitemaps erklärt</a></li>
</ul>
</article>
<article class="checklist-item">
<input id="404" type="checkbox">
<label for="404" class="tickoff"><span role="heading" aria-level="4">404-Template</span></label>
<p>Stell sicher, dass du ein <em>nützliches</em> 404-Template hast.</p> <p>Nützliche Dinge auf deiner 404-Seite sind zum Beispiel: ein Suchformular, beliebte Seiten/Beiträge, Kontaktinformationen.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://developer.wordpress.org/themes/functionality/404-pages/">WordPress.org-Anleitung zum Erstellen von 404-Seiten</a>.</li>
</ul>
</article>
<article class="checklist-item">
<input id="contrast" type="checkbox">
<label for="contrast" class="tickoff"><span role="heading" aria-level="4">Kontraste überprüfen</span></label>
<p>Ohne ausreichenden Kontrast zwischen Text und Hintergrund können Menschen mit Fehlsichtigkeiten, schlechten Displays oder in sonniger Umgebung deine Seite nicht richtig erkennen. Ein einfacher Test dafür ist das hier:</p>
<pre><code>body { filter: grayscale(100%); }</code></pre>
<p>Aber natürlich gibt es auch hier eine Menge praktische Werkzeuge!</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://krautpress.de/2020/farbkontraste-testen/">Farbkontraste auf Barrierefreiheit testen</a> - Aritkel zur Benutzung des der Website "Who can use?"</li>
<li><a rel="noopener" target="_blank" href="http://www.checkmycolours.com/">Check my colours</a></li>
</ul>
</article>
<article class="checklist-item">
<input id="keyboard" type="checkbox">
<label for="keyboard" class="tickoff"><span role="heading" aria-level="4">Tastatur-Navigation</span></label>
<p>Kannst du dich mit der Tab-Taste durch die Seite navigieren und die Aktionen durchführen, die du durchführen möchtest? Wenn nicht, dann solltest du das reparieren!</p>
</article>
<article class="checklist-item">
<input id="checkboxes" type="checkbox">
<label for="checkboxes" class="tickoff"><span role="heading" aria-level="4">Mach diese Pseudo-Inputs barrierefrei!</span></label>
<p>Das ist hier <strong>extra</strong> deshalb drin, weil es so oft übersehen wird. Ich weiß, dass die Standard-Checkboxen wirklich hässlich sind. Es ist absolut okay, Pseudo-Elemente zum Styling zu nutzen, aber schau doch bitte, dass deine Version dann trotzdem barrierefrei benutzbar ist, ja?</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://www.a11ywithlindsey.com/blog/create-custom-keyboard-accesible-checkboxes">Create custom accessible checkboxes</a> – Funktioniert auch für Radio-Buttons.</li>
</ul>
</article>
<article class="checklist-item">
<input id="underline" type="checkbox">
<label for="underline" class="tickoff"><span role="heading" aria-level="4">Sehen deine Links wie Links aus?</span></label>
<p>Und <em>ja</em>, du kannst <code>border</code> statt <code>text-decoration: underline;</code> benutzen.</p>
<blockquote>"Unterstreicht eure scheiß Links ihr Soziopathen."<cite>— Heydon Pickering</cite></blockquote>
<ul>
<li><a rel="noopener" target="_blank" href="https://adrianroselli.com/2019/01/underlines-are-beautiful.html">Underlines are beautiful</a></li>
</ul>
</article>
<article class="checklist-item">
<input id="skip" type="checkbox">
<label for="skip" class="tickoff"><span role="heading" aria-level="4">Skip-to-content-Link, bitte!</span></label>
<p>Schau nochmal nach, ob du einen <em>skip to content</em> Link hast, der angezeigt wird, wenn er fokussiert ist.</p>
<p>Er muss nicht super schick sein. Schau im Zweifelsfall in den Sourcecode dieser Seite – es ist super einfach und dauert nur 2 Minuten.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://webaim.org/techniques/skipnav/">Skip to content techniques</a></li>
<li><a rel="noopener" target="_blank" href="https://torstenlandsiedel.de/2020/01/26/welche-themes-haben-einen-skip-to-content-link-und-was-ist-das-ueberhaupt/">Torsten Landsiedel: Themes mit Skip to content links</a> – wenn du lieber auf ein neues Theme wechseln möchtest.</li>
</ul>
</article>
<article class="checklist-item">
<input id="alttext" type="checkbox">
<label for="alttext" class="tickoff"><span role="heading" aria-level="4">Alt-Texte wären gut.</span></label>
<p>Schau nach, ob deine Bilder mit sinnvollen <code>alt</code>-Texten ausgestattet sind.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://www.seoptimer.com/alt-tag-checker">Alt Tag checker</a> – Testet einzelne URLs.</li>
</ul>
</article>
<article class="checklist-item">
<input id="lighthouse" type="checkbox">
<label for="lighthouse" class="tickoff"><span role="heading" aria-level="4">Mach einen Lighthouse-Test</span></label>
<p>Lighthouse ist Googles Website-Testing-Tool. Es testet Performance, Barrierefreiheit usw.</p>
<ul>
<li><a rel="noopener" target="_blank" href="https://developers.google.com/web/tools/lighthouse">Lighthouse</a></li>
<li><a rel="noopener" target="_blank" href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a></li>
</ul>
</article>
</section>
<div id="popup1" class="overlay" role="alert">
<div class="popup">
<h2>Yay!</h2>
<button class="close" onclick="closePopup()" aria-label="Nachricht schließen">×</button>
<div class="content">
Wow, du hast die <em>komplette</em> Checklist abgearbeitet! Du bist großartig.
</div>
</div>
</div>
</main>
<footer>
<p>2023 <a rel="noopener" target="_blank" href="https://simonkraft.de">Simon Kraft</a> | <a rel="nofollow" href="https://wpcheckliste.de/impressum">Impressum</a> | <a rel="nofollow" href="https://wpcheckliste.de/datenschutz">Datenschutz</a></p>
<p>Based upon wpaudit.site by <a rel="noopener" target="_blank" href="https://auroobaahmed.com">Aurooba Ahmed</a> licensed under <a rel="noopener" target="_blank" href="https://www.gnu.org/licenses/gpl-3.0.en.html">GPLv3</a> – do what you want, give some credit, any derivatives must also be GPLv3.</p>
</footer>
</body>
</html>