website launch checklist
1.0.0
Dinge, die Sie vor dem Start einer Website noch einmal überprüfen sollten
Stellen Sie vor dem Start der Website sicher, dass:
Ein Alt-Tag („Alt-Attribut“ oder „Alt-Beschreibung“) ist ein auf ein Bild angewendetes Attribut, das als unsichtbare Beschreibung des Bildes dient.
Es beschreibt den Inhalt eines Bildes und wird von Screenreadern verwendet, um blinden Benutzern vorzulesen. Es wird auch von Suchmaschinen verwendet, da sie Bilder nicht interpretieren können und sich auf die Beschreibung des Alt-Tags verlassen. Die Verwendung von Alt-Tags auf Bildern wirkt sich positiv auf das Suchmaschinenranking aus und ist somit gut für die Suchmaschinenoptimierung. Alternativtext wird auch angezeigt, wenn das Laden der Bilder fehlschlägt.
Der Alt-Tag muss den Bildinhalt beschreiben und sollte maximal 125 Zeichen lang sein.
Beispiel:
< img src =" paul_mccartney.jpg " alt =" Paul McCartney performing in the East Room of the White House " > Wenn Sie über eine „Staging“- oder „Dev“-Umgebung verfügen, blockieren Sie wahrscheinlich die Indizierung durch Staging.
Wenn Sie möchten, dass Ihre Website in den Suchergebnissen erscheint, muss diese Suchmaschine Ihre Website „indizieren“. Suchmaschinen verfügen über automatisierte „Bots“, die Webseiten besuchen, den Inhalt „crawlen“ und ihn im Index der Suchmaschine speichern. Dadurch kann die Suchmaschine später die relevantesten Suchergebnisse abrufen.
Stellen Sie vor dem Start sicher, dass die Version, die live geschaltet wird, die Indizierung Ihrer Website ermöglicht. Stellen Sie sicher, dass Ihr HTML kein solches Meta-Tag enthält:
< meta name =" robots " content =" noindex, nofollow " > <!-- make sure you remove this if you want your website to be indexed by search enginesÜberprüfen Sie außerdem Ihre robots.txt-Datei. Wenn Sie die Indexierung aller Seiten Ihrer Website zulassen möchten, muss Ihre robots.txt Folgendes enthalten:
User-agent: *
Disallow:
Ein weiterer Ort zum Überprüfen sind Apache/Nginx-Konfigurationen.
Wenn eine Website auf Facebook oder Twitter geteilt wird, werden ein Miniaturbild, ein Titel und eine Beschreibung angezeigt:
Wenn Sie möchten, dass Ihre Website mit einem korrekten Miniaturbild, Titel und einer korrekten Beschreibung angezeigt wird, müssen Sie die von Facebook und Twitter benötigten Meta-Tags hinzufügen.
< meta property =" og:title " content =" Title " >
< meta property =" og:description " content =" Description " >
< meta property =" og:image " content =" Image URL " >
< meta property =" og:url " content =" URL of the page/article/post " >
< meta name =" twitter:title " content =" Title " >
< meta name =" twitter:description " content =" Description " >
< meta name =" twitter:image " content =" Image URL " >
< meta name =" twitter:card " content =" summary_large_image " > <!-- how the card is displayed -->Mit diesen Tools können Sie testen, wie Ihre Website aussieht, wenn sie auf Facebook oder Twitter geteilt wird:
Facebook-Sharing-Debugger
Twitter-Kartenvalidator
Favicon ist das kleine Symbol neben dem Website-Titel im Browser-Tab.
Dadurch ist die Website leicht zu erkennen, wenn viele Tabs geöffnet sind, und der Browserverlauf und die Lesezeichen werden angezeigt. Einige Suchmaschinen wie DuckDuckGo zeigen das Favicon neben der URL im Suchergebnis an. Abgesehen von der Verbesserung der Benutzerfreundlichkeit kann es auch dazu beitragen, die Aufmerksamkeit des Benutzers in den Suchergebnissen zu erregen, sodass wir es als indirekte SEO-Technik bezeichnen können.
< link rel =" shortcut icon " type =" image/png " href =" /favicon.png " > Benutzer können eine Webseite auf ihrem Startbildschirm auf Mobilgeräten speichern. Dadurch wird ein Symbol für die Website erstellt, genau wie das App-Symbol. Wenn Sie auf dieses Symbol tippen, wird die Website im Browser geöffnet.
Entwickler erhalten eine gewisse Kontrolle, um das Website-Erlebnis einem nativen App-Erlebnis auf Mobilgeräten anzunähern. Beispielsweise legt iOS standardmäßig den Screenshot der Website als Symbol fest. Sie können jedoch mithilfe der Apple-Meta-Tags ein benutzerdefiniertes Symboldesign festlegen.
< link rel =" apple-touch-icon " href =" touch-icon-iphone.png " >
< link rel =" apple-touch-icon " sizes =" 152x152 " href =" touch-icon-ipad.png " >
< link rel =" apple-touch-icon " sizes =" 180x180 " href =" touch-icon-iphone-retina.png " >
< link rel =" apple-touch-icon " sizes =" 167x167 " href =" touch-icon-ipad-retina.png " >
< link rel =" apple-touch-startup-image " href =" launch.png " > <!-- Splash screen image (image that is displayed when the website is buing opened) -->
< meta name =" apple-mobile-web-app-status-bar-style " content =" default " > <!-- Status bar style -->
< meta name =" apple-mobile-web-app-title " content =" My Website " > <!-- title of the website --> Android verwendet den Wert „apple-touch-icon“ oder das Favicon (wenn das Meta-Tag nicht vorhanden ist), um ein Startbildschirmsymbol zu erstellen.
Wenn das von Ihnen verwendete Analysetool keinen Filter für die Umgebung hat, verunreinigen Sie die Analysen Ihrer Website mit Ergebnissen aus Tests in einer Nicht-Produktionsumgebung. Sie können den Filter im Analysetool hinzufügen oder den Code nur in der Produktionsumgebung bedingt einbetten.
Title-Tag gibt den Titel der Website an. Das Meta-Beschreibungs-Tag enthält eine kurze Beschreibung der Seite
< title > Page Title </ title >
< meta name =" description " content =" A short description of what this page is about " >Der Titel wird in den Suchmaschinenergebnissen, im Browser-Tab und auf den Karten des sozialen Netzwerks beim Teilen angezeigt (sofern für das soziale Netzwerk kein separater Titel angegeben ist).
Die Beschreibung wird auch in den Suchergebnissen angezeigt. Es wird nicht direkt im Ranking-Algorithmus verwendet und hat daher keinen Einfluss auf die Chancen, im Suchergebnis angezeigt zu werden. Es erhöht jedoch die Wahrscheinlichkeit, dass Benutzer in den Ergebnissen auf Ihre Website klicken. Dadurch erhöht sich die Click-Through-Rate (CTR) Ihrer Seite für Google, das heißt, Google wertet sie als gutes Ergebnis und wird in zukünftigen Suchergebnissen höher gerankt.
Wenn Sie Links zu externen Links auf Ihrer Webseite haben, insbesondere zu solchen, die in einem neuen Tab oder Fenster geöffnet werden, sollten Sie rel="noopener" verwenden.
< a href =" http://example.com " target =" _blank " rel =" noopener " > Some other site </ a > Dies bietet Sicherheits- und Leistungsvorteile. Ohne sie kann die externe Seite mit window.opener auf Ihr Fensterobjekt zugreifen. Hier erfahren Sie mehr darüber, welche Schwachstellen mit dem noopener behoben werden: Über rel=noopener
Die andere Website läuft möglicherweise auch mit demselben Prozess wie Ihre aktuelle Seite. Wenn also auf der externen Seite viel JavaScript ausgeführt wird, wirkt sich dies negativ auf die Leistung Ihrer Website aus. noopener verhindert das auch.
Lesen Sie hier mehr darüber: Die Leistungsvorteile von rel=noopener
Wenn Sie viele Änderungen an Ihrer Website vornehmen oder viele externe Bibliotheken oder CSS-Frameworks verwenden, besteht die Möglichkeit, dass Ihre CSS-Datei viele Stile enthält, die von Ihren Seiten nicht verwendet werden. Beispielsweise verwenden Sie möglicherweise ein Theme eines Plugins, aber das CSS für die anderen Themes bleibt einfach ungenutzt in Ihrer CSS-Datei und die Größe der Stylesheet-Datei wächst.
Sie können alle nicht verwendeten Stile mit einem Tool namens PurgeCSS entfernen. Sie können es mit CLI oder in Webpack, Gulp usw. verwenden. Es analysiert Ihre Seiten, gleicht die auf den Seiten verwendeten Selektoren mit denen in den CSS-Dateien ab und entfernt die nicht verwendeten Stile. Bei einem kürzlich von mir durchgeführten Projekt, das das CSS-Framework Tailwind verwendete, gab es natürlich viele Dienstprogramme, die ich nicht verwendet habe. PurgeCSS hat die Größe meiner app.css-Datei von 214 KB auf 45,6 KB verringert.
Beachten Sie jedoch, dass PurgeCSS die Stile dieses Elements nicht erkennt, wenn ein Plugin dynamisch Elemente auf der Seite erstellt. Sie können Selektoren jedoch auf die Whitelist setzen, indem Sie die Selektoren oder Selektormuster in der Konfiguration übergeben, und Sie können Selektoren auch auf die Whitelist setzen, indem Sie einen speziellen Kommentar verwenden, um bestimmte Regeln auf die Whitelist zu setzen. Lesen Sie mehr über PurgeCSS Whitelisting.
Wenn der Browser eine Ressource anfordert, kann der Server dem Browser mitteilen, wie lange er die Ressource speichern oder „cachen“ kann. Wenn die Ressource das nächste Mal benötigt wird, kann sie die lokale Kopie verwenden. Dadurch wird die Geschwindigkeit erheblich verbessert und die Belastung des Servers verringert. Sie können Ihren Server so konfigurieren, dass er einen Header zurückgibt, der angibt, wie lange das Asset zwischengespeichert werden soll:
Cache-Control: max-age=31557600 // 31557600 seconds is 356 days
Sie legen das Höchstalter basierend darauf fest, wie oft sich Ihr Vermögen ändert.
Sie können Ihren Server auch so konfigurieren, dass er eine Komprimierung verwendet, z. B. die Gzip-Komprimierung, wodurch die Ressourcen schneller übertragen werden. Das Komprimieren von CSS-Dateien mit gzip spart etwa 50–70 % der Dateigröße.
