Während für die Zwecke der Suchmaschinenoptimierung die Reihenfolge möglicherweise nicht von Bedeutung ist, trifft dies nicht zu, wenn andere Aspekte wie die Sicherheit, die Anzeige von Inhalten (Zeichen) oder die Ladegeschwindigkeit berücksichtigt werden. Es ist eine gute Idee, den Kopf Ihrer Seite ungefähr so zu ordnen (vorausgesetzt HTML5 für die Syntax):
<head>
Bisher sollten Sie in dem Dokument keine Nicht-ASCII-Zeichen verwenden, sodass die Zeichenkodierung noch kein Problem darstellt. Die Wahrscheinlichkeit, Nicht-ASCII-Zeichen zu verwenden, steigt jedoch deutlich an, sobald Sie dieses Head-Tag öffnen. Dementsprechend (und unter der Annahme, dass Sie Ihre Zeichenkodierung nicht programmgesteuert oder auf Serverebene deklarieren) sollten Sie die nächste Anweisung als Zeichenkodierungsdeklaration festlegen. Dies erfüllt auch Parser / Browser / Agenten, die nach Zeichencodierungsanweisungen suchen würden:
<meta charset="utf-8">
Die folgenden zwei ( X-UA-Compatibleund viewport) werden von den Leuten bei Bootstrap empfohlen (erst kürzlich als v3.3.4). Ich bin mir fast sicher, dass diese Empfehlungen auf Leistung basieren, aber das meiste, was ich sagen würde, wäre spekulativ:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Wenn Sie an ein geräteunabhängiges Design / Entwicklung denken (einschließlich kleinerer Benutzeragenten, die keine Desktop-Benutzeragenten sind), sollten Sie Folgendes einbeziehen:
<meta name="viewport" content="width=device-width, initial-scale=1">
Zum Schluss der Titel:
<title>Ingenious Page Title</title>
Als nächstes bieten Sie das CSS so bald wie möglich nach dem Titel an (kein "Tageslicht" dazwischen):
<link rel="stylesheet" href="stylesheet-1.css">
<link rel="stylesheet" href="stylesheet-2.css">
Wenn Sie Stile auf Seitenebene verwenden, werden diese hier angezeigt. Dies liegt hauptsächlich an der Kaskadierung von CSS: der letzten Deklaration von identischen Spezifitätsebenen (z. B. zwei Anweisungen, die auf einen Absatz abzielen p). Um das Überschreiben externer Stile zu vereinfachen (dh ohne größere Spezifität zu verwenden oder !important), sollten Sie Stile auf Seitenebene hinter externe Stile setzen <link>. Es ist im Allgemeinen auch nicht ratsam, die @ import-Direktive in Stilen auf Seitenebene zu verwenden, da dies das gleichzeitige Herunterladen anderer Stilelemente behindert:
<style>body{color:black;}</style>
Dies ist der Punkt, an dem es am besten erscheint, Meta-Tags, Favicons und andere Cruft zu platzieren. Es ist zu vermuten, dass Favoriten oder ähnliche Elemente (z. B. iOS-App-Bilder) vor den meisten Metatags geladen werden, da das Herunterladen dieser Elemente geringfügig früher gestartet wird.
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-icon.png">
<meta name="description" content="Some information that is descriptive of the content">
<meta name="generator" content="Microsoft FrontPage 2002">
Da das Rendern blockiert / verzögert wird, sollten Sie Skripte, die Sie benötigen, so spät wie möglich laden. Wenn sie sich in der befinden müssen head, können Sie sie vor dem Schließen der head( </head>) laden . Wenn Sie sie später laden können, setzen Sie sie vor das Ende des bodyTags ( </body>).
<script src="script-1.js"></script>
<script src="script-2.js"></script>
</head>
In den meisten Fällen scheint es unwichtig, der Reihenfolge der Meta-Tags für SEO-Zwecke viel Aufmerksamkeit zu schenken, da Indizierungs-Bots (dh Suchmaschinen-Spinnen) die gesamte Seite verbrauchen werden. Wie würden sie andernfalls den Inhalt einer Seite indizieren oder diesen Index später aktualisieren?
Es fällt mir auf, dass Websites wie Amazon, Google und andere Personen, die sich eindeutig dafür interessieren, bei allem, was wir zu wissen glauben und bei allen Empfehlungen, die wir im Web finden (auch von Orten wie Google und Bing Webmaster Tools usw.) Über solche winzigen Leistungssteigerungen halten Sie sich nicht an diese Regeln.