أفضل ممارسات HTML <head> [مغلق]

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

  •  07-07-2019
  •  | 
  •  

سؤال

هناك <meta> العلامات والأشياء الأخرى التي يمكنك وضعها في <head> من مستند HTML الخاص بك.ماذا <meta> العلامات الخوأفضل الممارسات التي تستخدمها في مستند HTML الخاص بك لتسهيل الوصول إليه والبحث فيه وتحسينه وما إلى ذلك.

هل كانت مفيدة؟

المحلول

في حالتي:

  • العنوان (يجب أن يفعل [اسم القسم - اسم الموقع] لتحسين محركات البحث)
  • العلامة الوصفية ل Content-type, description, ، و keywords
  • رابط إلى ورقة (أوراق) الأنماط (لا تنس تحديد media="").
  • <script> العلامة التي ترتبط بملفات جافا سكريبت الخارجية.

يجب أن تتبع جميع العلامات معيار W3C.يحتوي موقع W3C على موقع أكثر تقنية وتفصيلاً قسم حول HTML <head> قسم.

نصائح أخرى

هل المستخدمون صالح وجعل التحول من محرك IE لكروم واحدة عند <وأ href = "http://blog.chromium.org/2009/09/introducing-google-chrome-frame.html" يختلط = " noreferrer "> تم تثبيت كروم الإطار :) 

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

وأنت تريد أن تضع عناصر SCRIPT في نهاية الصفحة قبل نهاية العنصر BODY. انظر http://developer.yahoo.com/performance/rules.html#js_bottom للحصول على التفاصيل.

وإلى جانب DOCTYPE المعتاد، والعنوان، وما إلى ذلك، وسأحاول وتوفر لك بعض الأشياء التي تعلمتها وتنفيذها التي قد تكون من المساعدة لك.

أولا، تذكر أن هذا العنوان، لأفضل تجربة للمستخدم يجب أن يكون القسم الفرعي الأكثر ملاءمة أولا. وذلك لأنه يتم عرض عادة في اسم شريط عنوان / القائمة التبويب / علامة. النظر في عنوان هذه الصفحة ... 

Stack Overflow - HTML head best practices

ويصبح تجاوز المكدس ... (ممضوغ لحفظ مساحة في التبويب بار / القائمة المرجعية)

والآن إذا كان لديك 5 علامات التبويب المفتوحة ستاكوفيرفلوو (كما في كثير من الأحيان القيام به: P)؟ ثم كيف يمكن للمستخدم معرفة من هو الذي

ونلاحظ أيضا مع CSS طبيعة المتتالية ... لذا فإن ترتيب هذه سوف المسألة. الشيء نفسه مع جافا سكريبت، يجب أن يسمح أي تبعيات على مواقع خارجية أخرى ل. أنا وضعت الألغام في الرأس وhavn't وحظ انخفاض الأداء. أنا وضعت لهم هناك لأنه بالنسبة لي تبدو أكثر أنيق ومنطقي. على الرغم من بعض الآخرين ويوصي بوضع الروابط <script src=""> في قبل </body> ذلك المتصفح لن المماطلة مؤقتا ... مجرد استخدام أفضل ما يعمل موقعك.

وأيضا علامة التعريف من 'تقييم' مع 'العام' دعونا البرمجيات صافي تصفية تعرف موقعك آمن للمشاهدين من جميع الأعمار (طالما هو، بالطبع!)

وأنا أيضا استخدام .. 

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

والسماح للمتصفح يعرف أين موطن موقعي هو. ولأي متصفح نظم الجلب المسبق، على الرغم من أنني أعتقد أن هذه هي لم تنفذ بعد من قبل المتصفحات دون مساعدة من الإضافات.

ضع في اعتبارك أيضا على "التالي" و "السابق" <link rel=""> إذا صفحاتك هي في تسلسل من نوع ما.

أولا، تأكد من أن 

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

وأنا لم أر هذه المذكورة: العلامة <base>، إذا تم تحديدها، وينبغي أن يكون العنصر الأول في <head>. (ويفترض أن قاعدة URI الوثيقة إلى أن . قبل / إذا لم يكن محددا.)

وIMHO، وهما علامتين أهم <head> هي <title> ونوع المحتوى العلامة الوصفية. محركات البحث ننظر بنشاط في <title>. في حين غالبا ما يتم تجاهل العلامات الفوقية الأخرى. كمستخدم الويب متعددة اللغات - ولا أستطيع أن أؤكد أكثر أهمية من إضافة نوع المحتوى هذا الكود لأنه بدون ذلك، والمتصفح يحتاج إلى كشف تلقائي مجموعة أحرف من صفحة ويب وهذه العملية غالبا ما يكون مقشر. نتيجة ينتهي به الأمر إلى أن مختلف الشخصيات لا يتم تقديمها بشكل صحيح إلى المستخدم أو أحيانا لا شيء على الإطلاق في حالة الصينية اليابانية أو.

وهنا مقتطف من بعض من قانون رأس من المشروع الحالي لي: 

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

وهناك مسألة ذات الصلة هنا التي قد تساعد على إضافة بعض الضوء حول ترتيب العلامات.

وعموما تشمل صفحاتي ما يلي: 

<!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 مهم لفرض تقديم صارم (لا وضع المراوغات) من خلال المتصفح. قد تحتاج إلى استخدام XHTML بدلا من ذلك - ما دام هناك واحد هناك. أود أن أضيف المؤلف والكاتب بحتة لأنني تصميم وإنشاء صفحات لشركات أخرى. الوصف هو لكبار المسئولين الاقتصاديين، واللغة هي لمتصفح (إذا كان يدعم ذلك).

وأنا لا أعتقد أنه يجعل للكثير من الفرق التي تأتي العلامة الوصفية لأول مرة، أو ما إذا كان يجب أن يكون عنوان أعلاه. ما يهم في معظم الحالات هو أنه موجود على الصفحة، ولديه المحتوى الصحيح.

وبقدر ما أنا على علم، فإن معظم محركات البحث تتجاهل أي "رئيسية" أو "صفا" التعريف به، وفضلت بدلا من قراءة محتوى الوثيقة.

والحصول على عنوان الصفحة الحق ومع ذلك، هو من أهمية بالغة.

وعنوان، والعلامات الفوقية للكلمات، والمحتوى من نوع (إذا لم يتم تغيير صراحة من قبل خادم الويب)، وأي CSS ليتم تطبيقها على الصفحة.

وإعلان المغلق في خط الهجوم يسمح للمتصفح لتخطيط الصفحة بشكل أكثر كفاءة (انظر http://developer.yahoo.com/performance/rules.html#css_top ).

وأود أن أضيف ملاحظة هامة: إذا كنت تستخدم <لأ href = "http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx" يختلط = "نوفولو noreferrer"> العلامة meta X-UA-Compatible IE لتبديل تقديم وسائل لأجل المصلحة إكسبلورر، يجب أن أدخله كما العنصر الأول في الرأس: 

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

وبالإضافة إلى الإجابات فوق يمكنني استخدام دبلن كور المبادرة الفوقية علامات .

فهي مفيدة جدا للمحتوى الفعلية / ورقات الخ. 

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

وغيرها.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top