Vraag HTML best practices [gesloten]


Er zijn <meta> tags en andere dingen die u kunt plaatsen in de <head> van uw HTML-document. Wat <meta> tags etc. en best practices gebruik je in je HTML-document om het toegankelijker, doorzoekbaarder, geoptimaliseerd etc. te maken


23
2017-11-09 05:07


oorsprong


antwoorden:


In mijn geval:

  • Titel (moet doen [Sectienaam - Site naam] voor betere SEO)
  • Metatag voor Content-type, description, en keywords
  • Link naar stylesheet (s) (vergeet niet om de media="").
  • <script> tag die linken naar externe javascript-bestanden.

Alle tags moeten de standaard van de W3C volgen. De W3C-site is technischer en gedetailleerder sectie over de HTML <head> sectie.


17
2017-11-09 06:02



Doe je gebruikers een plezier en laat hun IE-engine overschakelen naar Chrome één wanneer Chrome Frame is geinstalleerd :)

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

8
2017-09-26 20:41



U wilt SCRIPT-elementen aan het einde van de pagina plaatsen vóór het einde van het BODY-element. Zien http://developer.yahoo.com/performance/rules.html#js_bottom voor details.


5
2017-11-09 06:41



Naast het gebruikelijke doctype, titel, enz., Zal ik proberen u enkele dingen te bieden die ik heb geleerd en geïmplementeerd die u mogelijk van dienst zijn.

Ten eerste, onthoud dat de titel voor de beste gebruikerservaring de meest relevante subsectie eerst moet hebben. Dit komt omdat het meestal wordt weergegeven in de titelbalk / tabbladlijst / bladwijzernaam. Overweeg deze paginatitel ...

Stack Overflow - HTML head best practices

wordt Stack Overflow ... (gemaaid om ruimte te besparen in de tabbalk / bladwijzerlijst)

Als u nu 5 Stackoverflow-tabbladen had geopend (zoals ik vaak doe: P), hoe zou de gebruiker dan weten welke welke is?

Merk ook op met CSS de trapsgewijze aard ... Dus de volgorde hiervan zal ertoe doen. Hetzelfde geldt voor Javascript. Eventuele afhankelijkheden van andere externe sites moeten worden toegestaan. Ik stopte de mijne in mijn hoofd en merkte geen prestatieafname op. Ik leg ze daar omdat het voor mij er netjes en logischer uitziet. Hoewel sommige andere mensen zullen aanbevelen om de <script src=""> links net daarvoor </body> dus de browser zal niet tijdelijk blokkeren ... Gewoon gebruiken wat het beste werkt voor uw site.

Ook een Meta-tag van 'rating' met 'general' laten we Net Filtering-software weten dat je site veilig is voor kijkers van alle leeftijden (zolang het natuurlijk is!)

Ik gebruik ook ..

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

om de browser te laten weten waar het huis van mijn site zich bevindt. En voor elke browser die systemen prefetching, hoewel ik geloof dat deze nog door browsers moeten worden geïmplementeerd zonder de hulp van plug-ins.

Overweeg ook de 'volgende' en 'vorige' <link rel=""> als uw pagina's in een reeks van soorten zijn.


5
2017-11-09 13:10



Zorg er eerst voor dat <! DOCTYPE het eerste eerste element van het document is, dat wil zeggen geen spatie, tab of beschadigde stuklijstmarkering.

<!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>

4
2018-01-06 18:32



Ik zag dit niet genoemd: de <base> tag, indien opgegeven, moet het eerste element in zijn <head>. (De basis-URI van het document wordt verondersteld te zijn . before / if not specified.)


2
2017-11-09 06:18



IMHO, de twee belangrijkste onderliggende tags van <head> zijn <title> en de metatag voor het inhoudstype. Zoekmachines kijken actief naar <title>. Terwijl de andere metatags vaak worden genegeerd. Als een meertalige webgebruiker - ik kan niet meer benadrukken hoe belangrijk het is om de tag Content Type toe te voegen, want zonder deze moet de browser de tekenset van de webpagina automatisch detecteren en deze bewerking is vaak vlokkig. Het resultaat is dat verschillende tekens niet correct worden weergegeven aan de gebruiker of soms helemaal niet in het geval van Japans of Chinees.

Hier is een fragment van een deel van de headercode van een huidig ​​project van mij:

<!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>

2
2017-11-09 10:26



Er is een gerelateerde vraag hier dat kan helpen om wat licht toe te voegen met betrekking tot de volgorde van de tags.

Over het algemeen bevatten mijn pagina's het volgende:

<!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 is belangrijk om een ​​strikte weergave (No Quirks-modus) door de browser af te dwingen. Misschien wil je XHTML gebruiken - zolang er maar een is. Ik voeg auteursrecht en auteur toe louter omdat ik de pagina's voor andere bedrijven ontwerp en maak. Beschrijving is voor SEO en Taal is voor de browser (als dit wordt ondersteund).

Ik geloof niet dat het een groot verschil maakt welke metatag het eerst komt, of dat de titel boven moet komen. Wat in de meeste gevallen van belang is, is dat het op de pagina staat en de juiste inhoud heeft.


1
2017-11-09 08:37



Voor zover ik weet, negeren de meeste zoekmachines de metatags 'keywords' of 'description', maar geven ze de voorkeur aan het lezen van de inhoud van het document.

Het is echter van het grootste belang om de paginatitel juist te krijgen.


1
2017-11-09 11:27