{"id":31958,"date":"2024-11-12T12:39:32","date_gmt":"2024-11-12T12:39:32","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31958"},"modified":"2025-03-18T13:52:19","modified_gmt":"2025-03-18T13:52:19","slug":"Frontend","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/de\/wiki\/Frontend","title":{"rendered":"Frontend"},"content":{"rendered":"

Definition<\/span><\/h2>\n

Frontend und Backend sind zwei Begriffe aus der Software Entwicklung. Das Frontend umfasst alles, was der Benutzer einer Software oder einer Webseite sieht, ber\u00fchrt und erlebt. Bei einer Website umfasst das Frontend die Inhalte – Posts, Seiten, Medien und Kommentare -, das Design sowie die Navigation. Ein weiteres Beispiel w\u00e4re das Frontend einer Datenbank-Software, wo Nutzer Daten eingeben und anzeigen lassen k\u00f6nnen.\n<\/p>\n

Abgrenzung des Frontend zum Backend<\/span><\/h2>\n
\n
\"Abgrenzung<\/a> <\/p>\n
Abbildung:<\/b> Frontend vs. Backend – Autor: Seobility – Lizenz: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

Das Back-End bezieht sich auf alles, was der Benutzer einer Software oder einer Website nicht sehen kann. Hierzu z\u00e4hlt beispielsweise der Server, auf dem eine Webseite gehostet wird. Auch eine Datenbank, in der die vom Nutzer eingegebenen Daten oder die Inhalte einer Webseite gespeichert werden, l\u00e4sst sich dem Back-End zuordnen. Bei einer Website bildet das Internet die Verbindung zwischen Front-End und Backend. In Content-Management-Systemen<\/a> k\u00f6nnen sich die Begriffe Front-End und Back-End auf die Endbenutzer-Ansichten des CMS und den Administrationsbereich beziehen. Authentication und authorization erfolgen dabei auf dem Backend.\n<\/p>\n

Was macht ein SEO-freundliches Frontend aus?<\/span><\/h2>\n

User, die sich auf einer Webseite leicht zurechtfinden, verweilen l\u00e4nger auf dieser und verlassen sie seltener vorzeitig. Das ist f\u00fcr das Ranking einer Website von hoher Bedeutung, denn die Verweildauer<\/a> und die Absprungrate<\/a> (Bounce Rate) sind f\u00fcr Google wichtige Kriterien f\u00fcr die Bewertung einer Website. Nachfolgend werden einige Faktoren genannt, die zu einem SEO-freundlichen Frontend beitragen und damit auch die Verweildauer und die Absprungrate von Usern beeinflussen k\u00f6nnen.\n<\/p>\n

Sauberer und semantischer HTML-Code<\/span><\/h3>\n

Ein sauberer und semantisch einwandfreier HTML-Code ist die Grundvoraussetzung f\u00fcr ein SEO-freundliches Frontend. Fehler im HTML-Code k\u00f6nnen dazu f\u00fchren, dass eine Seite von den Suchmaschinen Robots<\/a> nicht gecrawlt und infolgedessen nicht indexiert werden kann.\n<\/p>\n

Seitenladegeschwindigkeit<\/span><\/h3>\n

Eine Website wird von ihren Besuchern h\u00e4ufiger vorzeitig verlassen, wenn sie nicht schnell genug geladen wird. Drei Sekunden gelten in der Regel als Maximalwert f\u00fcr die Ladedauer, wobei 200ms als optimaler Wert gilt. Bei mobilen Webseiten spielt vor allem eine schnelle Anzeige des Inhaltes „Above the Fold<\/a>“ eine wichtige Rolle. Webmaster k\u00f6nnen die Ladegeschwindigkeit ihrer Website mit dem kostenlosen Tool „PageSpeed Insights<\/a>“ von Google testen.\n<\/p>\n

Responsive Design<\/span><\/h3>\n

Neben der Ladegeschwindigkeit spielt auch Responsive Design f\u00fcr gutes Frontend eine wichtige Rolle. Gerade in Zeiten von Mobile First<\/a> verwenden User Endger\u00e4te mit unterschiedlichen Gr\u00f6\u00dfen und Displays. Daher sollten Websites und Bilder immer so gestaltet werden, dass sie f\u00fcr alle Viewports<\/a> optimal geeignet sind. Das hilft nicht nur (mobilen) Nutzern, sondern erleichtert auch den Suchmaschinenbots das Crawlen einer Website.\n<\/p>\n

Strukturierte Daten und Barrierefreiheit<\/span><\/h3>\n

Gutes Markup und Structured Data helfen – genau wie Responsive Webdesign – Suchmaschinencrawlern dabei, Seiten zu navigieren und zu indexieren. Zus\u00e4tzlich erm\u00f6glichen strukturierte Daten die Anzeige von Sternebewertungen, Preisen, Rezepten und Rich Snippets<\/a> in den SERPs. Ansprechende Snippets wiederum k\u00f6nnen die Click-Through-Rate<\/a> positiv beeinflussen.\n<\/p>\n

Nicht nur Suchmaschinen profitieren von strukturierten Daten und optimiertem Markup, auch f\u00fcr beeintr\u00e4chtigte Personen sind solche Optimierungen wichtig. Hilfsmittel wie Screenreader funktionieren \u00e4hnlich wie Crawler und nutzen diese strukturierten Daten, um die Inhalte einer Website zu beschreiben. In diesem Zusammenhang spielen auch Alt- und Title-Attribute bei Bildern und Links eine tragende Rolle und sollten auf keinen Fall fehlen.\n<\/p>\n

Framesets und Flash-Inhalte vermeiden<\/span><\/h3>\n

Framesets<\/a> und Adobe Flash gelten als veraltet und nicht mehr empfehlenswert und sollten daher nicht f\u00fcr Websites verwendet werden.\n<\/p>\n

Breadcrumb-Navigation<\/span><\/h3>\n

Bei Websites mit vielen Unterseiten oder Onlineshops mit zahlreichen Kategorien und Unterkategorien kann eine Breadcrumb-Navigation<\/a> den Besuchern die Orientierung erleichtern. Die Breadcrumb-Navigation ist ein zus\u00e4tzliches Navigationsschema, das beim Front-End Design am oberen Rand des Inhaltes hinzugef\u00fcgt wird. Diese bringt den Vorteil mit sich, dass User direkt sehen, wo sie sich auf der Website befinden. Au\u00dferdem k\u00f6nnen sie mit nur einem Klick zu einer \u00fcbergeordneten oder bereits besuchten Seite wechseln, ohne den Zur\u00fcck-Button im Browser zu nutzen oder auf der obersten Navigationsebene neu anfangen zu m\u00fcssen.\n<\/p>\n

Interne Verlinkung<\/span><\/h3>\n

Die Verkn\u00fcpfung der einzelnen Seiten einer Website durch interne Links hilft den Suchmaschinen, die Struktur einer Website zu verstehen und alle Unterseiten zu erfassen. Usern wird durch interne Links das Auffinden weiterer Informationen erleichtert, wodurch die Verweildauer auf der Website erh\u00f6ht wird. Wenn verhindert werden soll, dass Suchmaschinen Bots bestimmten Links folgen, k\u00f6nnen Nofollow-Tags beim Front-End Design zu den Links hinzugef\u00fcgt werden.\n<\/p>\n

Suchmaschinenfreundliche URLs<\/span><\/h3>\n

Beim Front-End Design wird gerne vergessen, dass die URL<\/a> einer Seite nicht nur von Suchmaschinen gecrawlt, sondern auch von Menschen gelesen wird. URLs sollten daher kurz, beschreibend und leicht lesbar sein. Sonderzeichen wie Unterstriche, Et-Zeichen und Prozentzeichen sollten vermieden werden. Je einfacher eine URL zu lesen ist, desto positiver wirkt sich das sowohl auf die Nutzerfreundlichkeit als auch auf die Suchmaschinenoptimierung aus.\n<\/p>\n

Weiterf\u00fchrende Links<\/span><\/h2>\n