HTML Best Practices [geschlossen]

StackOverflow https://stackoverflow.com/questions/275631

  •  07-07-2019
  •  | 
  •  

Frage

Es gibt <meta> Tags und andere Dinge, die Sie in der <head> des HTML-Dokuments platzieren können. Was <meta>-Tags usw. und Best Practices machen Sie Gebrauch in Ihrem HTML-Dokument zu machen, um es zugänglich, durchsuchbar, optimiert etc.

War es hilfreich?

Lösung

In meinem Fall:

  • Titel (sollte tun [Abschnittsname - Site Name] für eine bessere SEO)
  • Meta-Tag für Content-type, description und keywords
  • Link zu Sheet (s) (nicht zu vergessen die media="" angeben).
  • <script> Tag, die mit externen Javascript-Dateien verknüpft.

Alle Tags sollten die W3C-Standard entsprechen. Die W3C-Website hat eine technische und detaillierte Abschnitt über den HTML <head> Abschnitt.

Andere Tipps

Ihre Benutzer einen Gefallen tun und ihre IE Motorschalter machen Chrome ein, wenn Chrome Frame installiert ist:) 

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Sie wollen SCRIPT Elemente am Ende der Seite vor dem Ende des BODY-Elements setzen. Siehe http://developer.yahoo.com/performance/rules.html#js_bottom für Details.

Neben den üblichen Doctype, Titel, usw., ich werde versuchen, Ihnen einige Dinge, die ich habe gelernt und umgesetzt, die Ihnen behilflich sein können.

Erstens, denken Sie daran, dass der Titel für die beste Benutzererfahrung zunächst den wichtigsten Unterabschnitt haben sollte. Dies ist, weil es in der Regel in der Titelleiste / Tab Liste / Lesezeichen Name angezeigt wird. Betrachten Sie diese Seite Titel ... 

Stack Overflow - HTML head best practices

wird Stack-Überlauf ... (kaute Zimmer in Tableiste / Favoritenliste speichern)

Wenn Sie nun 5 Stackoverflow Tabs geöffnet haben (wie ich sich oft tun: P)? Dann würde, wie der Benutzer wissen, was man ist, die

Auch mit CSS beachten Sie die Kaskadierung Natur ... Also die Reihenfolge dieser wird Materie. Das Gleiche gilt für Javascript, werden alle Abhängigkeiten von anderen externen Websites müssen erlaubt sein. Ich habe meine im Kopf und havn't einen Leistungsabfall bemerkt. Ich habe sie dort, weil es mir sieht mehr ordentlich und logisch. Obwohl einige andere Leute empfehlen in nur die <script src=""> Links setzen, bevor </body> so den Browser nicht vorübergehend wird abgewürgt ... nur verwenden, was am besten für Ihre Website funktioniert.

Auch ein Meta-Tag der Bewertung der Nutzer "mit‚allgemeiner‘Net Filtering-Software wissen lassen, Ihre Website für Zuschauer jeden Alters sicher ist (so lange, wie es ist, natürlich!)

Ich benutze auch .. 

<link rel="start" href="/" title="Home" />

Der Browser zu informieren, wo die Heimat von meiner Seite ist. Und für jeden Browser Systeme Prefetching, obwohl ich glaube, diese sind noch von Browsern ohne Unterstützung von Plugins implementiert werden.

Auch die ‚next‘ und ‚zurück‘ <link rel=""> prüfen, ob Ihre Seiten in einer Folge von Sorten sind.

Stellen Sie zunächst sicher, dass der 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- declare all page rendering and programmatic related tags -->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- Care about IE ? -->
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <!-- globalise scripting and styling content language  -->
    <meta name="Content-Type-Script" content="text/javascript" />
    <meta name="Content-Type-Style" content="text/css" />
    <!-- title tag is MANDATORY -->
    <title>Short and relevant, about 64 characters/spaces</title>
    <!-- declare all CACHE controll -->
    <meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
    <meta name="revisit-after" content="7 days" />

    <!-- declare all content description tags -->
    <meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.gcf.org/v2.5" labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html" ratings (suds 0.5 density 0 color/hue 1))'>
    <!-- language specific keywords -->
    <meta name="keywords" lang="en-us" content="vacation, Greece, sunshine" />
    <!-- For french example -->
    <meta name="keywords" lang="fr" content="vacances, Grèce, soleil" />
    <meta name="description" content="about 255 characters/spaces WORDS relevant to the content of the actual page" />
    <meta name="Abstract" content="about 96 characters/spaces PARAGRAPH describing the actual page content within your site" />

    <!-- declare all situationnal and external relativity related tags -->
    <link rel="DC.identifier" type="text/plain" href="http://www.ietf.org/rfc/rfc1866.txt" />
    <link rel="start" href="/" title="Home" />
    <link rel="prev" href="../" title="Parent section" />

    <!-- declare all page rendering cascading style sheets in order of incidence -->
    <link rel="stylesheet" type="text/css" href="globaly-used.css" />
    <link rel="stylesheet" type="text/css" href="specificly-used.css" />
    <!-- declare all page rendering specific cascading style i.e. IE only, hacks etc -->
    <link rel="stylesheet" type="text/css" href="more-specificly-used.css" />
    <link rel="stylesheet" type="text/css" href="i-love-ie.css" />

    <!-- not relevent to subject, declare all javascripts AFTER css linking -->

</head>
<body>
</body>
</html>

Ich habe nicht erwähnt: der <base> Tag, falls angegeben, sollte das erste Element in <head> sein. (Die Basis-URI des Dokuments wird davon ausgegangen, bevor . werden / wenn nicht anders angegeben.)

IMHO, die beiden wichtigsten Kind Tags von <head> sind <title> und die Content Type-Meta-Tag. Suchmaschinen suchen aktiv bei <title>. Die anderen sind Meta-Tags häufig ignoriert. Als mehrsprachiger Web-Benutzer - ich kann nicht mehr betonen, wie wichtig den Content Type-Tag hinzuzufügen, weil ohne sie der Browser den Zeichensatz der Webseite und dieser Vorgang ist oft schuppigen automatisch zu erkennen muss. Das Ergebnis endet als dass verschiedene Zeichen nicht korrekt an den Benutzer oder manchmal gar keinen im Fall der japanischen oder chinesischen gemacht werden.

Hier ist ein Ausschnitt aus einigen der Header-Code aus einem aktuellen Projekt von mir: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Reports Blah Blah</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
...
</head>

Es gibt eine ähnliche Frage hier , die helfen, etwas Licht kostenlos in Bezug auf die Reihenfolge der Tags.

Generell meine Seiten gehören die folgenden: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>...</title>
    <meta name="Description" ...>
    <meta name="Keywords" ...>
    <meta name="Copyright" ...>
    <meta name="Author" ...>
    <meta name="Language" ...>
    <style type="text/css" ...>

DocType ist wichtig, strengen Rendering (No Quirks-Modus) durch den Browser zu erzwingen. Sie können stattdessen XHTML verwenden wollen - solange es einen gibt. Ich füge Urheberrecht und Autor rein, weil ich die Seiten für andere Unternehmen entwerfen und erstellen. Beschreibung ist für SEO, und Sprache ist für den Browser (wenn es verfügbar ist).

Ich glaube nicht, dass es zu viel Unterschied macht, die Meta-Tag zuerst kommt, oder ob der Titel oben sein sollte. Was zählt, in den meisten Fällen ist, dass es auf der Seite vorhanden ist, und hat den richtigen Inhalt.

Soweit ich bin bewusst, dass die meisten Suchmaschinen keine „keywords“ oder „description“ Meta-Tags lieber ignorieren, anstatt den Inhalt des Dokuments zu lesen.

den Seitentitel Recht jedoch bekommt, ist von äußerster Wichtigkeit.

Titel, Meta-Tags für Keywords, Content-Typ (wenn nicht explizit durch den Web-Server) und jede CSS auf der Seite angewandt werden.

vorne die CSS-Deklaration ermöglicht der Browser effizient die Seite mehr zu legen (siehe http://developer.yahoo.com/performance/rules.html#css_top ).

Ich würde eine wichtige Anmerkung hinzu: wenn Sie mit IE meta X-UA-Compatible Tag wechseln Modi Rendering für Interet Explorer, können Sie es als erstes Element in HEAD einfügen müssen: 

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>Page title</title>
  ...etc
</head>

Zusätzlich zu den Antworten oben Ich benutze die Dublin Core Initiative Meta-Tags .

Sie sind sehr nützlich für die eigentlichen Inhalt / Papiere etc. 

<meta name="DC.abstract" content="Document abstract" />
<meta name="DC.audience" content="Target audience" />

etc.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top