Frontend: Unterschied zwischen den Versionen

Aus Seobility Wiki
Wechseln zu: Navigation, Suche
(→‎Abgrenzung des Frontend zum Backend)
(→‎Ähnliche Artikel)
 
(20 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
−
<seo title="Frontend" metadescription="In diesem Artikel erfährst Du, was man unter dem Begriff Frontend versteht und was ein SEO-freundliches Frontend ausmacht." />
+
<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 ==
Zeile 6: Zeile 6:
  
 
== Abgrenzung des Frontend zum Backend ==
 
== Abgrenzung des Frontend zum Backend ==
−
 
 
[[File:Frontend-vs-Backend.png|mini|450px|rechts|alt=Abgrenzung Frontend Backend|'''Abbildung:''' Frontend vs. Backend - Autor: Seobility - Lizenz: [[Creative Commons Lizenz BY-SA 4.0|CC BY-SA 4.0]]|link=https://www.seobility.net/de/wiki/images/0/04/Frontend-vs-Backend.png]]
 
[[File:Frontend-vs-Backend.png|mini|450px|rechts|alt=Abgrenzung Frontend Backend|'''Abbildung:''' Frontend vs. Backend - Autor: Seobility - Lizenz: [[Creative Commons Lizenz BY-SA 4.0|CC BY-SA 4.0]]|link=https://www.seobility.net/de/wiki/images/0/04/Frontend-vs-Backend.png]]
  
−
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 [[CMS (Content Management System)|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.
+
Das Back-End bezieht sich auf alles, was der Benutzer einer Software oder einer Website 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 [[CMS (Content Management System)|Content-Management-Systemen]] können 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.
  
 
== Was macht ein SEO-freundliches Frontend aus? ==
 
== 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 [[Bounce Rate (Absprungrate)|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.
+
User, die sich auf einer Webseite leicht zurechtfinden, verweilen länger auf dieser und verlassen sie seltener vorzeitig. Das ist für das Ranking einer Website von hoher Bedeutung, denn die [[Verweildauer]] und die [[Bounce Rate (Absprungrate)|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 ===
 
=== Sauberer und semantischer HTML-Code ===
Zeile 19: Zeile 18:
 
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 Crawler|Suchmaschinen Robots]] nicht gecrawlt und infolgedessen nicht indexiert werden kann.
 
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 Crawler|Suchmaschinen Robots]] nicht gecrawlt und infolgedessen nicht indexiert werden kann.
  
−
=== Unique Content ===
+
=== 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, wobei 200ms als optimaler Wert gilt. Bei mobilen Webseiten spielt vor allem eine schnelle Anzeige des Inhaltes "[[Above the fold|Above the Fold]]" eine wichtige Rolle. Webmaster können die Ladegeschwindigkeit ihrer Website mit dem kostenlosen Tool "[https://developers.google.com/speed/pagespeed/insights/?hl=de PageSpeed Insights]" von Google testen.
  
−
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 Tag|Canonical-Tags]] auf die Ursprungsseite hingewiesen werden, die in den Index aufgenommen werden soll.
+
=== Responsive Design ===
  
−
=== Framesets und Flash-Inhalte vermeiden ===
+
Neben der Ladegeschwindigkeit spielt auch Responsive Design für gutes Frontend eine wichtige Rolle. Gerade in Zeiten von [[Mobile First]] verwenden User Endgeräte mit unterschiedlichen Größen und Displays. Daher sollten Websites und Bilder immer so gestaltet werden, dass sie für alle [[Viewport|Viewports]] optimal geeignet sind. Das hilft nicht nur (mobilen) Nutzern, sondern erleichtert auch den Suchmaschinenbots das Crawlen einer Website.
  
−
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.
+
=== Strukturierte Daten und Barrierefreiheit ===
  
−
=== Seitentitel und Meta-Description ===
+
Gutes Markup und Structured Data helfen - genau wie Responsive Webdesign - Suchmaschinencrawlern dabei, Seiten zu navigieren und zu indexieren. Zusätzlich ermöglichen strukturierte Daten die Anzeige von Sternebewertungen, Preisen, Rezepten und <html><a href="https://www.seobility.net/de/blog/rich-snippets-guide/" target="_blank">Rich Snippets</a></html> in den SERPs. Ansprechende Snippets wiederum können die [[CTR (Click-Through-Rate)|Click-Through-Rate]] positiv beeinflussen.
  
−
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.
+
Nicht nur Suchmaschinen profitieren von strukturierten Daten und optimiertem Markup, auch für beeinträchtigte Personen sind solche Optimierungen wichtig. Hilfsmittel wie Screenreader funktionieren ähnlich 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.
  
−
=== Seitenladegeschwindigkeit ===
+
=== Framesets und Flash-Inhalte vermeiden ===
  
−
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.  
+
[[Frames und Framesets|Framesets]] und Adobe Flash gelten als veraltet und nicht mehr empfehlenswert und sollten daher nicht für Websites verwendet werden.
  
 
=== Breadcrumb-Navigation ===
 
=== Breadcrumb-Navigation ===
  
−
Bei Websites mit vielen Unterseiten oder Onlineshops mit zahlreichen Kategorien und Unterkategorien kann eine [[Bread Crumbs|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 zur 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.
+
Bei Websites mit vielen Unterseiten oder Onlineshops mit zahlreichen Kategorien und Unterkategorien kann eine [[Bread Crumbs|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 ===
 
=== 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.
 
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 ===
 
=== Suchmaschinenfreundliche URLs ===
Zeile 66: Zeile 59:
 
[[Kategorie:Web Entwicklung]]
 
[[Kategorie:Web Entwicklung]]
 
[[Kategorie:Web Design]]
 
[[Kategorie:Web Design]]
 +
 +
<html><script type="application/ld+json">
 +
    {
 +
      "@context": "https://schema.org/",
 +
      "@type": "ImageObject",
 +
      "contentUrl": "https://www.seobility.net/de/wiki/images/0/04/Frontend-vs-Backend.png",
 +
      "license": "https://creativecommons.org/licenses/by-sa/4.0/deed.de",
 +
      "acquireLicensePage": "https://www.seobility.net/de/wiki/Creative_Commons_Lizenz_BY-SA_4.0"
 +
    }
 +
    </script></html>
 +
 +
{| class="wikitable" style="text-align:left"
 +
|-
 +
|'''Über den Autor'''
 +
|-
 +
| [[File:Seobility S.jpg|link=|100px|left|alt=Seobility S]] Das Seobility Wiki Team besteht aus SEO-, Online-Marketing- und Web-Experten mit praktischer Erfahrung in den Bereichen Suchmaschinenoptimierung, Online-Marketing und Webentwicklung. Alle unsere Artikel durchlaufen einen mehrstufigen Redaktionsprozess, um Dir die bestmögliche Qualität und wirklich hilfreiche Informationen bieten zu können. <html><a href="https://www.seobility.net/de/wiki/Seobility_Wiki_Team" target="_blank">Mehr Informationen über das Seobility Wiki Team</a></html>.
 +
|}
 +
 +
<html><script type="application/ld+json">
 +
{
 +
  "@context": "https://schema.org",
 +
  "@type": "Article",
 +
  "author": {
 +
    "@type": "Organization",
 +
    "name": "Seobility",
 +
    "url": "https://www.seobility.net/"
 +
  }
 +
}
 +
</script></html>

Aktuelle Version vom 23. Januar 2024, 13:44 Uhr

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

Abgrenzung Frontend Backend
Abbildung: Frontend vs. Backend - Autor: Seobility - Lizenz: CC BY-SA 4.0

Das Back-End bezieht sich auf alles, was der Benutzer einer Software oder einer Website 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. Authentication und authorization erfolgen dabei auf dem Backend.

Was macht ein SEO-freundliches Frontend aus?

User, die sich auf einer Webseite leicht zurechtfinden, verweilen länger auf dieser und verlassen sie seltener vorzeitig. Das 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.

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, wobei 200ms als optimaler Wert gilt. 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.

Responsive Design

Neben der Ladegeschwindigkeit spielt auch Responsive Design für gutes Frontend eine wichtige Rolle. Gerade in Zeiten von Mobile First verwenden User Endgeräte mit unterschiedlichen Größen und Displays. Daher sollten Websites und Bilder immer so gestaltet werden, dass sie für alle Viewports optimal geeignet sind. Das hilft nicht nur (mobilen) Nutzern, sondern erleichtert auch den Suchmaschinenbots das Crawlen einer Website.

Strukturierte Daten und Barrierefreiheit

Gutes Markup und Structured Data helfen - genau wie Responsive Webdesign - Suchmaschinencrawlern dabei, Seiten zu navigieren und zu indexieren. Zusätzlich ermöglichen strukturierte Daten die Anzeige von Sternebewertungen, Preisen, Rezepten und Rich Snippets in den SERPs. Ansprechende Snippets wiederum können die Click-Through-Rate positiv beeinflussen.

Nicht nur Suchmaschinen profitieren von strukturierten Daten und optimiertem Markup, auch für beeinträchtigte Personen sind solche Optimierungen wichtig. Hilfsmittel wie Screenreader funktionieren ähnlich 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.

Framesets und Flash-Inhalte vermeiden

Framesets und Adobe Flash gelten als veraltet und nicht mehr empfehlenswert und sollten daher nicht für Websites verwendet werden.

Breadcrumb-Navigation

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.

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

Ähnliche Artikel

Über den Autor
Seobility S
Das Seobility Wiki Team besteht aus SEO-, Online-Marketing- und Web-Experten mit praktischer Erfahrung in den Bereichen Suchmaschinenoptimierung, Online-Marketing und Webentwicklung. Alle unsere Artikel durchlaufen einen mehrstufigen Redaktionsprozess, um Dir die bestmögliche Qualität und wirklich hilfreiche Informationen bieten zu können. Mehr Informationen über das Seobility Wiki Team.

Überprüfen Sie Ihre Webseite mit
dem SEO Check!