Frontend: Unterschied zwischen den Versionen
| Zeile 1: | Zeile 1: | ||
| − | <seo title="Frontend - Was ist das?" metadescription=" | + | <seo title="Frontend (vs. Backend) - Was ist das?" metadescription="Das Frontend umfasst alles, was der Benutzer einer Software oder einer Webseite sieht, berührt und erlebt (z.B. Inhalte, Medien, Design und Navigation)." /> |
== Definition == | == Definition == | ||
Version vom 27. Juli 2020, 16:06 Uhr
Inhaltsverzeichnis
Definition
Frontend und Backend sind zwei Begriffe aus der Software Entwicklung. Das Frontend umfasst alles, was der Benutzer einer Software oder einer Webseite sieht, berührt und erlebt. Bei einer Website umfasst das Frontend die Inhalte - Posts, Seiten, Medien und Kommentare -, das Design sowie die Navigation. Ein weiteres Beispiel wäre das Frontend einer Datenbank-Software, wo Nutzer Daten eingeben und anzeigen lassen können.
Abgrenzung des Frontend zum Backend
Das Back-End bezieht sich auf alles, was der Benutzer einer Software oder einer Website im Browser nicht sehen kann. Hierzu zählt 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ässt sich dem Back-End zuordnen. Bei einer Website bildet das Internet die Verbindung zwischen Front-End und Backend. In Content-Management-Systemen können sich die Begriffe Front-End und Back-End auf die Endbenutzer-Ansichten des CMS und den Administrationsbereich beziehen. Skriptsprachen wie Node.js, PHP oder Python und kompilierte Sprachen wie C # und Java arbeiten auf dem Backend. Ebenso erfolgen authentication und authorization auf dem Backend.
Was macht ein SEO-freundliches Frontend aus?
Ein SEO-freundliches Frontend beginnt mit einer optimalen Usability. User, die sich leicht zurechtfinden, verweilen länger auf einer Webseite und verlassen sie seltener vorzeitig. Dies ist für das Ranking einer Website von hoher Bedeutung, denn die Verweildauer und die Absprungrate (Bounce Rate) sind für Google wichtige Kriterien für 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önnen.
Sauberer und semantischer HTML-Code
Ein sauberer und semantisch einwandfreier HTML-Code ist die Grundvoraussetzung für ein SEO-freundliches Frontend. Fehler im HTML-Code können dazu führen, dass eine Seite von den Suchmaschinen Robots nicht gecrawlt und infolgedessen nicht indexiert werden kann.
Unique Content
Unique Content bedeutet, dass alle Inhalte auf der eigenen Website einzigartig sein sollten. So sollten kein Content von anderen Webseiten genutzt werden und die Inhalte der eigenen Webseite sollten sich nicht auf mehreren Seiten wiederholen. Andernfalls stehen Suchmaschinen vor dem Problem, dass sie nicht entscheiden können, welche der Seiten mit identischen Inhalten für einen Suchbegriff relevanter ist und demnach indexiert werden soll. Wenn doppelte Inhalte unvermeidbar sind, können die Suchmaschinen Bots mit Canonical-Tags auf die Ursprungsseite hingewiesen werden, die in den Index aufgenommen werden soll.
Framesets und Flash-Inhalte vermeiden
Framesets und Flash-Inhalte sollten heute nicht mehr für eine Webseite verwendet werden. Suchmaschinen können diese Inhalte nicht crawlen und folglich nicht indexieren. Serverseitige Techniken, die auf dem Backend eingesetzt werden, eignen sich besser, um Inhalt einer Webseite auszulagern.
Seitentitel und Meta-Description
Für jede Seite einer Website sollte ein individueller Seitentitel und eine eigene Beschreibung erstellt werden. Die Metadaten helfen Google und anderen Suchmaschinen, den Inhalt einer Seite zu verstehen und einzuordnen.
Seitenladegeschwindigkeit
Eine Website wird von ihren Besuchern häufiger vorzeitig verlassen, wenn sie nicht schnell genug geladen wird. Drei Sekunden gelten in der Regel als Maximalwert für die Ladedauer. Bei mobilen Webseiten spielt vor allem eine schnelle Anzeige des Inhaltes "Above the Fold" eine wichtige Rolle. Webmaster können die Ladegeschwindigkeit ihrer Website mit dem kostenlosen Tool "PageSpeed Insights" von Google testen.
Bei Websites mit vielen Unterseiten oder Onlineshops mit zahlreichen Kategorien und Unterkategorien kann eine Breadcrumb-Navigation den Besuchern die Orientierung erleichtern. Die Breadcrumb-Navigation ist ein zusätzliches Navigationsschema, das beim Front-End Design am oberen Rand des Inhaltes hinzugefügt wird. Diese bringt den Vorteil mit sich, dass User direkt sehen, wo sie sich auf der Website befinden. Außerdem können sie mit nur einem Klick zu einer übergeordneten oder bereits besuchten Seite wechseln, ohne den Zurück-Button im Browser zu nutzen oder auf der obersten Navigationsebene neu anfangen zu müssen.
Interne Verlinkung
Die Verknüpfung 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öht wird. Wenn verhindert werden soll, dass Suchmaschinen Bots bestimmten Links folgen, können Nofollow-Tags beim Front-End Design zu den Links hinzugefügt werden.
Robots.txt
Die "robots.txt" Datei sollte bei der Frontend Entwicklung genutzt werden, um Suchmaschinen mitzuteilen, welche Seiten der Website nicht gecrawlt werden sollen. Durch den Ausschluss beispielsweise des Impressums oder der Datenschutzerklärung wird das Crawling Budget der Website geschont. Damit wird sichergestellt, dass nur die wichtigsten Seiten gecrawlt und indexiert werden. Damit die "robots.txt" Datei von den Suchmaschinen gefunden und genutzt werden kann, muss sie im obersten Verzeichnis des Servers gespeichert werden.
XML-Sitemap
Bei umfangreichen Websites sollte eine XML-Sitemap-Datei mit einer Auflistung aller vorhandenen Unterseiten erstellt und über die Search Console direkt bei Google eingereicht werden. Die XML-Sitemap unterstützt die Suchmachinenbots dabei, umfangreiche Webseiten vollständig zu crawlen. Mithilfe der Sitemap kann somit die Indexierung beschleunigt werden. Mit einer HTML-Sitemap wird hingegen den Usern die Orientierung auf einer Website erleichtert.
Suchmaschinenfreundliche URLs
Beim Front-End Design wird gerne vergessen, dass die URL 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.
Weiterführende Links
- https://www.frontend-gmbh.de/blog/frontend-und-backend/
- https://skillcrush.com/2016/02/11/skills-to-become-a-front-end-developer/