Eine Umleitung erfolgt, wenn eine Webseite unter einer bestimmten URL aufgerufen wird und zu einer anderen URL wechselt. Zum Beispiel besucht eine Person „website.com/seite-a“ in ihrem Browser und wird stattdessen zu „website.com/seite-b“ *umgeleitet*. Dies ist sehr nützlich, wenn wir eine bestimmte Seite an einen neuen Ort umleiten möchten, die URL-Struktur einer Website ändern möchten, den „www.“-Teil der URL entfernen möchten oder Benutzer sogar auf eine ganz andere Website umleiten möchten (um nur einige zu nennen).
Nehmen wir an, wir haben gerade unsere Website verschoben und möchten die alte abschalten. Wir möchten jedoch nicht, dass all diese Seiten von der alten Website den gefürchteten Status **404 Not Found** liefern. Wir brauchen etwas, damit diese alten Links zur gleichen Inhalt auf unserer neuen Website umleiten.
Hier ist unser Beispiel: Wir möchten, dass old-website.com/blog/post zu new-website.com/blog/post umgeleitet wird, zusammen mit allen anderen Beiträgen, die das gleiche URL-Format verwenden. Außerdem wäre es schön, wenn unsere Umleitungen den Suchmaschinen melden würden, dass diese Änderung dauerhaft ist, damit sie entsprechend aktualisiert werden.
Wie machen wir das also? Nun, bevor wir anfangen, müssen wir ein wenig über HTTP lernen.
HTTP-Antwortcodes
Jedes Mal, wenn wir eine URL eingeben oder eine Anfrage von einem Browser senden, verwenden wir das *Hypertext Transfer Protocol* (HTTP). Obwohl dies wie ein wirklich cooler Name für einen Sci-Fi-Krimi klingt, ist es tatsächlich der Prozess, mit dem wir Assets wie CSS, HTML und Bilder von einem Server anfordern. Nachdem wir eine Anfrage gesendet haben, geben diese Assets eine Antwort wie „Hey, ich bin da, los geht’s!“ (Antwortcode HTTP 200 OK). Es gibt viele verschiedene Arten von HTTP-Antwortcodes, vielleicht sind die bekanntesten **404 Not Found**; Webseiten können mit einem 404-Status antworten, aber das kann auch jedes andere Asset, das wir anfordern, egal ob es ein Bild oder irgendeine andere Art von Asset ist.
Jede HTTP-Antwort wird unter einer bestimmten dreistelligen Zahl kategorisiert, sodass **404 Not Found** ein 4XX-Statuscode ist, der verdeutlicht, dass es sich um einen Client-Fehler handelt, und 200 gehört zur 2XX-Kategorie, um anzuzeigen, dass es sich um eine Erfolgsmeldung irgendeiner Art handelt. Wir sind an der 3XX-Kategorie von HTTP-Antworten interessiert, wie **301 Moved Permanently** oder **302 Found**, da dies die Statuscodes sind, die speziell für Umleitungen reserviert sind. Je nachdem, welche Methode wir wählen, müssen wir diese Codes nicht unbedingt kennen, aber für andere sind sie unerlässlich.
In unserem Fall verwenden wir eine 301-Umleitung, da einige Webbrowser oder Proxyserver diesen Typ zwischenspeichern können, wodurch die alte Seite unzugänglich wird, was in diesem Fall genau das ist, was wir wollen.
Wie leiten wir also tatsächlich eine Webseite um?
HTML-Umleitungen
Vielleicht ist der einfachste Weg, zu einer anderen URL umzuleiten, das Meta-Refresh-Tag. Wir können dieses Meta-Tag im <head> am Anfang jeder HTML-Seite platzieren, so:
<meta http-equiv="refresh" content="0; URL='http://new-website.com'" />
Das Attribut content gibt die Verzögerung an, bevor der Browser zur neuen Seite umleitet, also haben wir es hier auf 0 Sekunden eingestellt. Beachten Sie, dass wir keinen HTTP-Statuscode festlegen müssen, aber es ist wichtig, die seltsame Öffnungs- und Schließung der Anführungszeichen oben noch einmal zu überprüfen (es gibt Anführungszeichen innerhalb von Anführungszeichen, daher müssen sie unterschiedliche Typen haben und übereinstimmen).
Obwohl diese Methode der einfachste Weg ist, zu einer Webseite umzuleiten, gibt es einige Nachteile. Laut dem W3C gibt es einige Browser, die mit dem Meta-Refresh-Tag Probleme haben. Benutzer sehen möglicherweise einen kurzen Aufblitz, während Seite A geladen wird, bevor sie zu Seite B umgeleitet werden. Es deaktiviert auch die Zurück-Schaltfläche in älteren Browsern. Es ist keine ideale Lösung und es wird *generell von der Verwendung abgeraten*.
Eine sicherere Option könnte darin bestehen, die Website mit JavaScript umzuleiten.
JavaScript-Umleitungen
Die Umleitung zu einer anderen URL mit JavaScript ist ziemlich einfach, wir müssen einfach die Eigenschaft location des window-Objekts ändern
window.location = "http://new-website.com";
JavaScript ist allerdings seltsam, es gibt VIELE Möglichkeiten, dies zu tun.
window.location = "http://new-website.com";
window.location.href = "http://new-website.com";
window.location.assign("http://new-website.com");
window.location.replace("http://new-website.com");
Ganz zu schweigen davon, dass man einfach location verwenden könnte, da das window-Objekt impliziert ist. Oder self oder top.
Mit dem location-Objekt können wir auch viele andere nette Dinge tun, wie die Seite neu zu laden oder den Pfad und den Ursprung der URL zu ändern.
Es gibt hier ein paar Probleme
- JavaScript muss aktiviert und heruntergeladen/ausgeführt werden, damit dies überhaupt funktioniert.
- Es ist nicht klar, wie Suchmaschinen darauf reagieren.
- Es gibt keine Statuscodes, sodass Sie sich auf Informationen über die Umleitung nicht verlassen können.
Was wir brauchen, ist eine serverseitige Lösung, die uns hilft, indem sie 301-Antworten an Suchmaschinen und Browser sendet.
Apache-Umleitungen
Die vielleicht gebräuchlichste Methode, eine Webseite umzuleiten, ist das Hinzufügen spezifischer Regeln zu einer `.htaccess`-Datei auf einem Apache-Webserver. Dann können wir den Server alles regeln lassen.
` .htaccess` ist ein Dokument, das uns die Möglichkeit gibt, Apache, der Software, die auf dem Server läuft, Befehle zu geben. Um Benutzer auf unsere neue Website umzuleiten, erstellen wir eine neue .htaccess-Datei (oder bearbeiten die vorhandene) und fügen sie in das Stammverzeichnis der alten Website ein. Hier ist die Regel, die wir hinzufügen werden:
Redirect 301 / http://www.new-website.com
Jede Seite, die der Benutzer auf der alten Website besucht, wird nun auf die neue umgeleitet. Wie Sie sehen können, haben wir den HTTP-Antwortcode ganz am Anfang der Umleitungsregel platziert.
Es ist erwähnenswert, dass diese Art von Umleitung nur auf Linux-Servern mit aktiviertem mod_rewrite funktioniert, einem Apache-Modul, das es uns ermöglicht, angeforderte URLs auf dem Server umzuleiten, indem ein bestimmtes Muster geprüft wird und bei Übereinstimmung die Anfrage in irgendeiner Weise modifiziert wird. Die meisten Hosting-Unternehmen haben dies standardmäßig aktiviert, aber wenn es ein Problem gibt, ist es am besten, sie zu kontaktieren. Wenn Sie weitere Informationen zu mod_rewrite suchen, gibt es ein tolles Tutorial auf tuts+. Hier auf CSS-Tricks gibt es auch viele .htaccess-Snippets.
Zurück zu unserem Beispiel: Wenn wir den obigen Code verwenden, würde ein Benutzer zu „old-website.com/blog/post“ gehen und zu „new-website.com“ gesendet werden, was nicht sehr benutzerfreundlich ist, da er die angeforderte Seite nicht sieht. Stattdessen fügen wir die folgende Regel zu unserer `.htaccess`-Datei hinzu, um all diese Blog-Posts an den richtigen Ort umzuleiten:
RedirectMatch 301 /blog(.*) http://www.new-website.com$1
Oder vielleicht möchten wir einzelne Seiten sehr spezifisch umleiten. Wir können die Regeln wie folgt hinzufügen:
Redirect 301 /page.html http://www.old-website/new-page.html
Und bei Fehlern können wir Benutzer zu unserer 404-Seite umleiten (wahrscheinlich voller Wortspiele und Gifs)
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* 404.html [L]
</IfModule>
Zuerst prüfen wir, ob das mod_rewrite-Modul verfügbar ist, dann können wir es aktivieren und, wenn die Datei oder das Verzeichnis nicht gefunden wird, leiten wir den Benutzer zu unserer 404-Seite weiter. Es ist irgendwie nett, dass der Inhalt der Seite, die sie sehen, von der Datei 404.html stammt, während die angeforderte URL gleich bleibt.
Wenn Sie sich nicht wohl dabei fühlen, mit `.htaccess`-Dateien zu hantieren, und Sie WordPress installiert haben, gibt es eine nette Erweiterung, die diese Dinge für uns erledigen kann.
Nginx-Umleitungen
Wenn Ihr Server Nginx als Webserver verwendet, können Sie in der Datei `nginx.conf` einen Server-Block hinzufügen, um diese Umleitungsanfragen zu bearbeiten:
server {
listen 80;
server_name old-website.com;
return 301 $scheme://new-website.com$request_uri;
}
Auch hier verwenden wir die 301-HTTP-Antwort, und mit der Variablen scheme fordern wir http:// oder https:// an, je nachdem, was der ursprüngliche Website verwendet hat. Es wäre ratsam, sich die HTML5 Boilerplate nginx.conf genauer anzusehen, um Best Practices für andere Nginx-bezogene Dinge zu erfahren.
Lighttpd-Umleitungen
Für Server, die einen Lighttpd-Webserver ausführen, nimmt man eine Umleitung vor, indem man zuerst das mod_redirect-Modul importiert und url.redirect verwendet:
server.modules = (
"mod_redirect"
)
$HTTP["host"] =~ "^(www\.)?old-website.com$" {
url.redirect = (
"^/(.*)$" => "http://www.new-website.com/$1",
)
}
PHP-Umleitungen
Mit PHP können wir die header-Funktion verwenden, die ziemlich geradlinig ist:
<?php
header('Location: http://www.new-website.com');
exit;
?>
Dies muss vor jeglicher Markierung oder Inhalt anderer Art gesetzt werden, allerdings gibt es einen kleinen Haken. Standardmäßig sendet die Funktion eine 302-Umleitungsantwort, die allen mitteilt, dass der Inhalt nur vorübergehend verschoben wurde. Angesichts unseres spezifischen Anwendungsfalls müssen wir die Dateien dauerhaft auf unsere neue Website verschieben, sodass wir stattdessen eine 301-Umleitung vornehmen müssen:
<?php
header('Location: http://www.new-website.com/', true, 301);
exit();
?>
Der optionale Parameter true oben ersetzt eine zuvor gesetzte Header-Information und die 301 am Ende ändert den Antwortcode auf den richtigen.
Ruby on Rails-Umleitungen
Von jedem Controller in einem Rails Projekt können wir mit redirect_to und der Option :status auf :moved_permanently gesetzt, schnell zu einer neuen Website umleiten. So überschreiben wir den Standard-302-Statuscode und ersetzen ihn durch Moved Permanently
class WelcomeController < ApplicationController
def index
redirect_to 'http://new-website.com', :status => :moved_permanently
end
end
In Rails 4 gibt es eine einfachere Möglichkeit, diese Anfragen zu bearbeiten, indem wir einen redirect in der Datei routes.rb hinzufügen, der automatisch eine 301-Antwort sendet.
get "/blog" => redirect("http://new-website.com")
Oder wenn wir jeden Artikel im Blog auf die neue Website umleiten wollen, können wir das tun, indem wir das obige durch Folgendes ersetzen:
get "/blog/:post" => redirect("http://new-website.com/blog/%{post}")
.NET-Umleitungen
Ich habe noch nie etwas mit dem .NET-Framework geschrieben, aber es sieht so aus, als ob es klare Dokumentation auf dem Microsoft Developer Network gibt.
Node.js-Umleitungen
Hier ist ein sehr schnelles lokales Setup, das erklärt, wie Umleitungen mit Node funktionieren. Zuerst binden wir das http-Modul ein und erstellen einen neuen Server, gefolgt von der .writeHead()-Methode:
var http = require("http");
http.createServer(function(req, res) {
res.writeHead(301,{Location: 'http://new-website.com'});
res.end();
}).listen(8888);
Wenn Sie eine neue Datei namens index.js erstellen, den obigen Code einfügen und dann node index.js in der Befehlszeile ausführen, finden Sie die lokale Version der Website, die auf new-website.com umgeleitet wird. Um jedoch alle Beiträge im /blog-Bereich umzuleiten, müssen wir die URL aus der Anfrage mit dem praktischen url-Modul von Node parsen:
var http = require("http");
var url = require("url");
http.createServer(function(req, res) {
var pathname = url.parse(req.url).pathname;
res.writeHead(301,{Location: 'http://new-website.com/' + pathname});
res.end();
}).listen(8888);
Mit der Funktion .writeHead() können wir dann den Pfadnamen aus der Anfrage an das Ende des URL-Strings anhängen. Jetzt wird sie zum gleichen Pfad auf unserer neuen Website umgeleitet. Juhu für JavaScript!
Flask-Umleitungen
Mit dem Flask-Framework aufbauend auf Python können wir einfach eine Route erstellen, die mit der Funktion redirect auf Unterseiten verweist. Wiederum muss 301 eine Option sein, die am Ende übergeben wird, da der Standard auf 302 gesetzt ist:
@app.route('/notes/<page>')
def thing(page):
return redirect("http://www.new-website.com/blog/" + page, code=301)
Wenn Sie weitere Tricks zur Umleitung einer Webseite kennen, fügen Sie unten einen Kommentar hinzu und ich werde diesen Beitrag mit den neuesten Informationen aktualisieren.
Vielen Dank.
Ein kleiner Punkt, ich glaube, „Redirect 301 / http://www.new-website.com“ ist Teil von mod_rewrite, nicht von mod_redirect.
„Obwohl dies wie ein wirklich cooler Name für einen Sci-Fi-Krimi klingt“ – möglicherweise mit Bruce Willis in der Hauptrolle! ;)
„Infinite Redirect Looper“
Großartige Arbeit, Robin. Klar und gründlich.
Hm,
location.replaceundlocation.assignsind Funktionen, also sollten Sie die URL in Klammern setzen.Trotzdem eine schöne Zusammenfassung.
Guter Fang! Das ist meine Schuld, nicht Robins. Ich habe einmal einen Beitrag gelesen, der wie 100 Wege auflistete, wie man die Seite in JavaScript umleiten kann, den ich hinzufügen wollte, aber ich konnte ihn nicht finden, also habe ich einfach ein paar davon hineingeschmissen.
Du solltest Lecker mehr öfter benutzen, Chris :)
Tolle Informationen, jetzt nutze ich sie für meine neue Website 302-Umleitung
Toller Artikel und großartig, so viele verschiedene Architekturen enthalten zu sehen.
Außerdem Bonuspunkte für die FANTASTISCHE HR, ich weiß nicht, warum ich sie vorher nicht bemerkt habe, aber das ist eine schöne Linie.
Für die .NET-Leute, die sich außen vor gelassen fühlen
Golang:
Ich habe nach diesem Problem gesucht, das ich am Ende ihrer Gesundheit gefunden habe, vielen Dank
Guter Artikel!
Das Problem mit
.htaccessist, dass es schnell sehr unübersichtlich wird. Es ist großartig, wenn Sie nur ein paar einfache Umleitungen wünschen, aber was ist, wenn Sie auch www oder non-www erzwingen möchten? Was ist, wenn Sie zusätzliche Schrägstriche oder endende Schrägstriche entfernen und umleiten möchten? Was ist, wenn Sie einige Aliase erstellen möchten, zum Beispiel: Wenn ich nach/fr/pagefrage, die Datei unter/languages/french/pagebereitstellen?Die Logik für Umleitungen und kanonische URLs kann ziemlich knifflig werden, da die Syntax kryptisch ist und die Reihenfolge der Deklarationen wichtig ist. Und
.htaccesswird auch für mehrere andere Zwecke verwendet, wie z.B. das Aktivieren von gzip. Sie haben also eine ganze Reihe unterschiedlicher Anliegen, die in einer Datei zusammengepackt sind.Wenn Sie ein Framework verwenden, werden alle Anfragen ohnehin über
index.phpgeroutet. Warum also nicht diese komplizierte Logik aus.htaccessentfernen und in Ihren Hauptcode einfügen?.htaccessist eine Datei zur Überschreibung von Server-Einstellungen. Es ist kein guter Ort für Logik. Logik gehört in Ihren Code.Zum Beispiel verwende ich Laravel. Ich habe eine Klasse namens
LinkResolver, die sich der Logik von Umleitungen, Aliasen und dem Erzwingen kanonischer URLs widmet. Ich pflege eine separate Datei, die meine Umleitungen in einem PHP-Array speichert, und eine weitere für Aliase.Da ich diese Logik in meinen Code integriert habe, kann ich automatisierte Tests schreiben, um sicherzustellen, dass sie wie beabsichtigt funktioniert. Das macht es robust – während Apaches
mod_rewriteVoodoo ist, wie sogar die offizielle Dokumentation zugibt:...weil die Syntax kryptisch ist **und** die Reihenfolge der Deklarationen wichtig ist.
Verdammt phatte Finger.
Wenn Sie keine Serverumleitung verwenden, sollten Sie wahrscheinlich auch einen expliziten Link auf der ursprünglichen Seite einfügen. Dies deckt Clients ab, die
meta http-equivnicht unterstützen und JavaScript nicht aktivieren.Ich wusste nicht, dass Umleitungen auch über Node.js und RAILS durchgeführt werden können. Danke fürs Teilen.
Ich benutze ein Redirect-Plugin, wenn ich Seiten von einer alten Website migriere
Danke für Ihre freundlichen Informationen
In Django ist es so ziemlich dasselbe wie in Flask
def my_view(request)
...
return redirect('/some/url/')
Helicon Ape, ein Apache .htaccess und .htpasswd Emulator für IIS, unterstützt nicht die Syntax „Redirect 301 /alt /neu“, was zu einem 500er führt. Es erfordert eine RewriteRule mit Flags:
RewriteRule /some-page http://new-website.com/some-page [NC,R=301,L]
NC steht für NoCase, R=301 bedeutet, wir wollen nicht neu schreiben, sondern umleiten, L steht für Last, als letzte .htaccess-Zeile, die abgeglichen und verwendet wird.
Ein toller Artikel! Vor diesem Beitrag kannte ich nur wenige dieser Techniken zur Weiterleitung von Webseiten wie
window.location="http://any-website.com";. Danke für diesen detaillierten Artikel Robin Rendle und Chris Coyier.Man sollte bedenken, dass nicht jeder Javascript zulässt. Wenn Sie also Javascript verwenden, stellen Sie sicher, dass Sie eine Backup-Methode haben!
Ups, ich habe gerade gesehen, dass Stephen Thomas das oben schon erwähnt hat! Entschuldigung, Stephen!
Die besten Schätzungen gehen von weniger als 2 % der Nutzer aus, die Javascript deaktiviert haben. Ich bin mir nicht sicher, ob ich die Funktionalität opfern würde.
Zusätzlich zu der obigen Liste gibt es auch Weiterleitungen für Jekyll/Github-Seiten. Der folgende Link sollte alle Informationen enthalten, die Sie benötigen, um dasselbe zu erreichen:
https://help.github.com/articles/redirects-on-github-pages/
Das ist der beste Artikel über die Weiterleitung einer Webseite.
Vielen Dank
Konfigurieren der HTTP-Weiterleitung in IIS mit freundlicher Genehmigung von Microsoft Tech Net.
Sehr umfassender und gründlicher Beitrag. Ich möchte eine Sache fragen: Kann die gesamte Website ebenfalls mit demselben Verfahren wie eine einzelne Webseite umgeleitet werden?
Leider ist es nicht so einfach (korrigieren Sie mich, wenn ich falsch liege, aber ich habe noch keine Lösung für die gesamte Website gesehen).
...aber hey, schau dir diesen älteren Beitrag von Chris an. Sehr einfache Lösung.
Ich bin froh, dass Sie diese Frage gestellt haben, damit ich etwas Neues lernen konnte ;)
Vielen Dank, Robin, sehr hilfreicher Beitrag!
Können Sie bitte erklären, wie sich eine Umleitung auf die Google-Suchergebnisse auswirkt?
Ich meine, kann es Unterschiede oder Lücken im Internetverkehr geben, während die neue Website in der Entwicklung ist?
Danke!
Tolle Erklärung, Robin. Ich wollte nur ein paar Zeilen hinzufügen, die ich verwende: Das .NET-Framework leistet sehr gute Arbeit bei den von mir erstellten Websites.
Danke!
Hallo. Frage an Sie. Ich bin kein Webentwickler, daher ist das für mich etwas Griechisch. Ich versuche herauszufinden, ob es eine Möglichkeit gibt, eine Nachricht anzuzeigen, bevor eine Website zu einer neuen Website weitergeleitet wird. Zum Beispiel gibt es eine bestehende Website, http://www.example1.com, und am Montag werden wir zu http://www.example2.com weiterleiten, aber wenn ein Benutzer http://www.example1.com eingibt, kann dann eine Nachricht erscheinen, die besagt: Vielen Dank für den Besuch von http://www.example1.com, Sie werden zu unserer neuen und verbesserten Website, http://www.example2.com? Ist das etwas, das in WordPress leicht gemacht werden kann? Haben Sie Muster gesehen, die Sie teilen könnten? Danke im Voraus.
Sehr einfach, aber nützliche Informationen für Anfänger.
Sehr umfassend.
Tolle Arbeit, Robin.
Sie könnten ein kanonisches Tag für die Umleitung aus Sicht der Suchmaschinen verwenden
Webseiten-Umleitung und Canonicalisierung sind zwei verschiedene Dinge. Umleitung ist eine Möglichkeit zu sagen: „Sie sollten woanders sein“. Canonicalisierung (in SEO-Begriffen) lässt die Suchmaschine wissen, dass derselbe Inhalt durch mehrere URLs dargestellt werden kann und eine einzelne angegebene URL anstelle der anderen verwendet werden soll.
Diese ist wirklich einfach, aber interessant und effektiv anzuwenden. Danke, dass Sie es hier teilen. Ich finde das nützlich und informativ. Ich muss nur prüfen, ob die Datei verfügbar ist oder nicht. Als ich das Web durchsuche, habe ich auch diesen Beitrag http://www.lionleaf.com/blog/how-to-redirect-using-php/ gefunden, der mir die gleiche Information gibt, aber Ihre Ideen sind klar und direkt. Können Sie mir sagen, wie ich das in einem richtigen PHP-Code machen kann?
Rafiudeen Chozhan Kumarasamy schreibt darüber, wie man es in Java macht