هر توسعه دهنده وب در آنجا بوده است: شما یک پروژه جدید را شروع می کنید و به یک فایل خالی به نام خیره می شوید index.htmlبشر شما سعی می کنید به یاد داشته باشید ، کدام برچسب ها قرار است در آن قرار بگیرند again? Which are the meta tags that are best practice and which ones are deprecated?
Recently, I found myself in this exact situation. My first instinct was to copy the head section from a previous project, but as I reviewed the code, I realized some tags were outdated or simply didn’t apply to my new project. What followed was a deep dive into HTML head tags – which ones are essential, which are optional, and which are just cluttering my code.
If you’re in a hurry and just want the template: You can find my complete starter template on GitHub. The repository contains two main files:
-
index.html: یک الگوی تمیز و مینیمالیستی فقط با آنچه شما نیاز دارید و موارد اضافی غیر ضروری نیست. -
index-commented.html: همان الگوی اما با نظرات مفصل توضیح می دهد که چگونه و چرا باید از هر برچسب استفاده کنید.
این مقاله در اصل شیرجه عمیق در نظرات از index-commented.html پرونده ، ارائه زمینه و توضیحات بیشتر برای هر تصمیمی که در الگوی گرفته شده است.
این الگوی نشان دهنده رویکرد نظر من پس از تحقیق در مورد بهترین شیوه های فعلی است. این هدف این است که ضمن حفظ عملکرد خوب ، دسترسی و بهینه سازی موتور جستجو ، پایه و اساس محکمی برای اکثر پروژه های وب باشد.
بیایید به اجزای اساسی یک سر HTML خوب ساختار یافته شیرجه بزنیم.
برچسب هایی که باید در آن قرار دهید
این برچسب ها باید تقریباً در هر سند HTML که ایجاد می کنید وجود داشته باشد. آنها برای ارائه مناسب ، سئو و دسترسی مناسب هستند.
and lang="en": تنظیم نوع و زبان سند
lang="en">
همیشه سند HTML خود را با اعلامیه Doctype شروع کنید. این به مرورگرها می گوید کدام نسخه از HTML را استفاده می کنید (در این حالت HTML5) و به اطمینان از ارائه مداوم کمک می کند. در lang ویژگی در tag specifies the language of your page – this is crucial for screen readers, search engines, and browsers. If your content is in a different language, change the code accordingly (e.g., lang="es" برای اسپانیایی)
هر سند HTML باید یک برچسب عنوان داشته باشد. این متن در زبانه های مرورگر ، نشانک ها و نتایج موتور جستجو ظاهر می شود. عناوین خود را با توصیف در عین حال مختصر ، در حالت ایده آل زیر 60 کاراکتر قرار دهید. یک عنوان خوب هم کاربران را در مورد محتوای صفحه شما آگاه می کند و شامل کلمات کلیدی مربوطه برای SEO است.
: پیکربندی نمای برای طراحی پاسخگو
name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
در دنیای موبایل امروز ، این برچسب متا غیر قابل مذاکره است. این به مرورگرهای تلفن همراه می گوید که چگونه می توانند ابعاد و مقیاس بندی صفحه را کنترل کنند. بیایید آنچه را که هر پارامتر انجام می دهد تجزیه کنیم:
-
viewport-fit=cover: تضمین می کند که محتوا تا لبه صفحه نمایش گسترش یابد (مخصوصاً برای تلفن های شکاف دار) -
width=device-width: عرض صفحه را تنظیم می کند تا عرض صفحه دستگاه را دنبال کند -
initial-scale=1.0: هنگام بارگیری صفحه ، سطح بزرگنمایی اولیه را تنظیم می کند -
minimum-scale=1.0: از بزرگنمایی کاربران جلوگیری می کند -
maximum-scale=5.0: به کاربران اجازه می دهد تا حداکثر 5 برابر بزرگنمایی کنند (محدود کردن این امر به طور کامل به دسترسی آسیب می رساند)
بدون این برچسب ، دستگاه های تلفن همراه صفحات را با عرض صفحه نمایش دسک تاپ معمولی قرار می دهند و سپس آنها را پایین می آورند و در نتیجه متن کوچک و غیرقابل خواندن و وادار کردن کاربران به زوم و تابه می شوند.
با با : اطلاعات ضروری متا
name="description" content="">
name="keywords" content="">
name="author" content="">
این برچسب های متا اطلاعات مهمی در مورد صفحه شما ارائه می دهند:
-
description: خلاصه ای مختصر از محتوای صفحه شما (در حالت ایده آل 150-160 نویسه). این اغلب در نتایج موتور جستجو در زیر عنوان شما ظاهر می شود. -
keywords: کلمات کلیدی مربوطه برای محتوای صفحه شما. در حالی که این روزها برای Google از اهمیت کمتری برخوردار است ، سایر موتورهای جستجو و خزنده ها هنوز هم ممکن است از این اطلاعات استفاده کنند. -
author: نام فردی یا سازمانی که صفحه را ایجاد کرده است.
در حالی که این برچسب ها به طور مستقیم روی صفحه نمایش تأثیر نمی گذارند ، برای طبقه بندی سئو و محتوا بسیار ارزشمند هستند.
: از جلوگیری از فهرست بندی تکراری
rel="canonical" href="" />
این برچسب به موتورهای جستجو کمک می کند تا در صورت دسترسی از طریق URL های مختلف ، چندین بار از نمایه سازی محتوا خودداری کنند. به عنوان مثال ، اگر صفحه شما از طریق چندین URL قابل دسترسی باشد (مانند example.com/page وت example.com/page/index.html) ، برچسب Canonical به موتورهای جستجو می گوید که URL نسخه “رسمی” برای فهرست بندی است و از نمایه سازی تکراری که می تواند به رتبه های جستجوی شما آسیب برساند ، جلوگیری می کند.
پر کردن href ویژگی با URL اصلی که می خواهید موتورهای جستجو برای ارتباط با این محتوا باشند.
استراتژی های بارگیری CSS: CSS Inline Critical در مقابل شیوه های سبک خارجی
body {
background: #fefefe;
color: #222;
font-family: 'Roboto', sans-serif;
padding: 1rem;
line-height: 1.8;
}
rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel="stylesheet"">
این استراتژی برای بارگیری CSS عملکرد را از دو طریق بهینه می کند:
- CSS بحرانی درون خطی: با تعبیه سبک های ضروری به طور مستقیم در سند HTML ، از ایجاد یک درخواست شبکه اضافی که مانع ارائه آن می شود ، خودداری می کنید. این باعث می شود سبک های بحرانی به سرعت سریع بارگذاری شود و از فلاش محتوای بی نظیر (FOUC) جلوگیری می کند که می تواند هنگام بارگذاری سبک ها بعد از محتوا رخ دهد.
- بارگیری ناهمزمان برای CS های غیر بحرانی: تکنیک Preload با Handler Onload اجازه می دهد تا برگه اصلی بدون مسدود کردن رندر بارگیری شود. این بدان معناست که صفحه شما می تواند نمایش را شروع کند در حالی که بقیه سبک ها هنوز در حال بارگیری هستند و تجربه کاربری بهتری را ایجاد می کنند. برچسب NoScript برای کاربران دارای غیرفعال JavaScript یک عقب نشینی فراهم می کند.
از طرف دیگر ، اگر سایت شما نیازهای یک ظاهر طراحی شده قابل توجهی در بالای برابر ندارد ، می توانید از یک رویکرد ساده تر استفاده کنید:
href="main.css" rel="stylesheet" />
این ساده تر است اما می تواند ارائه اولیه را کند کند زیرا مرورگر قبل از نمایش محتوا باید CSS را بارگیری و تجزیه کند.
: بارگیری اسکریپت بهترین روشها
"module" src="app.js">
برای جاوا اسکریپت ، type="module" ویژگی چندین مزیت ارائه می دهد:
- به طور خودکار بارگیری اسکریپت را تا زمان آماده شدن DOM کاهش می دهد
- ماژول های ECMAScript را برای سازماندهی بهتر کد فعال می کند
- به طور پیش فرض در حالت سخت اجرا می شود
- مدیریت وابستگی پاک کننده را امکان پذیر می کند
برای اسکریپت هایی که به عناصر DOM وابسته نیستند و باید در اسرع وقت اجرا شوند ، اضافه کردن این موارد async ویژگی:
"module" async src="analytics.js">
علاوه بر این ، ثبت نام یک کارگر خدمات برای قابلیت های آفلاین خوب است:
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
این اسکریپت بدون قرار داده شده است defer یا async ویژگی ها بنابراین در اسرع وقت بارگیری و اجرا می شود و قابلیت های آفلاین را در مراحل بارگذاری صفحه فعال می کند. کارگر سرویس در پس زمینه ، مستقل از صفحه وب شما اجرا می شود و به آن امکان می دهد درخواست های شبکه و حافظه پنهان را حتی در صورت حرکت کاربر از سایت شما انجام دهد.
برچسب هایی که شاید شما باید شامل شود
این برچسب ها برای هر پروژه ضروری نیستند اما در موقعیت های خاص می توانند با ارزش باشند. آنها را بر اساس نیاز پروژه خود درج کنید.
: رمزگذاری شخصیت
charset="utf-8">
این برچسب متا رمزگذاری کاراکتر برای سند HTML شما را مشخص می کند. UTF-8 در حال حاضر رمزگذاری شخصیت پیش فرض در HTML5 است ، بنابراین این برچسب در بسیاری از موارد کاملاً ضروری نیست. با این حال ، از جمله آن صریحاً سازگاری را در تمام مرورگرها تضمین می کند و از مشکلات بالقوه ارائه شخصیت ، به ویژه با شخصیت های خاص یا الفبای غیر لاتین جلوگیری می کند.
برچسب پایه URL پایه را برای کلیه URL های نسبی در یک سند مشخص می کند. اگر تمام URL های سایت شما در حال حاضر نسبت به مسیر ریشه (“https://dev.to/”) نسبت به مسیر ریشه دارند ، نیازی به شامل این برچسب نیست. این در درجه اول مفید است که سایت شما در یک زیرمجموعه میزبانی شود اما می خواهید مسیرها نسبت به ریشه دامنه یا هنگام تهیه برنامه های تک صفحه ای با مسیریابی سمت مشتری باشد.
: جزئیات برنامه
name="application-name" content="">
اگر برنامه وب مترقی شما (PWA) باید نام متفاوتی نسبت به آنچه در برچسب عنوان شما مشخص شده است ، از این برچسب متا استفاده کنید. این نام را تعریف می کند که هنگام نصب برنامه وب شما بر روی یک دستگاه ظاهر می شود یا به منوی شروع کاربر یا نوار وظیفه می چسبد.
: رنگ تم UI مرورگر
name="theme-color" content="#33d">
این برچسب متا رنگی را که توسط نماینده کاربر در عناصر UI در اطراف صفحه شما استفاده می شود ، مانند نوار آدرس مرورگر در مرورگرهای تلفن همراه یا نوار عنوان در برخی از مرورگرهای دسک تاپ تعریف می کند. رنگی را انتخاب کنید که هویت برند شما را منعکس کند تا یک تجربه تصویری یکپارچه تر ایجاد شود.
: پشتیبانی از حالت نور و تاریک
name="color-scheme" content="light dark">
اگر سایت شما از حالت نور ، حالت تاریک یا هر دو پشتیبانی می کند ، این برچسب به مرورگر اطلاع می دهد. مقدار "light dark" به این معنی است که هر دو طرح پشتیبانی می شوند و نور ترجیح داده می شود. این به مرورگرها کمک می کند تا در طرح رنگی مناسب ، کنترل های فرم ، پیمایش و سایر عناصر UI را ارائه دهند و تجربه کاربری بهتری را ایجاد کنند که به ترجیحات سیستم احترام بگذارد.
: ادغام رسانه های اجتماعی با نمودار باز
property="og:title" content="" />
property="og:type" content="website" />
property="og:url" content="" />
property="og:image" content="" />
برچسب های متا نمودار را باز کنید که چگونه محتوای شما هنگام به اشتراک گذاشتن در سیستم عامل های رسانه های اجتماعی مانند Facebook ، LinkedIn و X (که قبلاً توییتر) به اشتراک گذاشته می شود ، بهینه می شود. در حالی که برای عملکردهای اساسی ضروری نیست ، اما در هنگام اشتراک ، ظاهر و تعامل محتوای شما را به میزان قابل توجهی بهبود می بخشد.
برچسب های نمودار باز کلید شامل موارد زیر است:
-
og:title: عنوان صفحه/محتوای شما (می تواند با عنوان HTML شما متفاوت باشد) -
og:type: نوع محتوا (وب سایت ، مقاله ، محصول و غیره) -
og:url: URL متعارف صفحه شما -
og:image: URL به تصویری که محتوای شما را نشان می دهد
اگر احتمالاً محتوای سایت شما در سیستم عامل های اجتماعی به اشتراک گذاشته شود ، پر کردن این برچسب ها با مقادیر مناسب می تواند نرخ کلیک و تعامل را به طرز چشمگیری بهبود بخشد.
وت : پشتیبانی و حمایت از PWA
rel="manifest" href="manifest.json">
rel="icon" href="/favicon.ico" type="image/x-icon">
برای برنامه های وب مترقی ، از پیوند مانیفست استفاده کنید تا به یک فایل JSON که شامل ابرداده برنامه شما ، از جمله نمادها است ، اشاره کنید. این مانیفست باید نمادهای برنامه شما را در اندازه های مختلف برای دستگاه ها و زمینه های مختلف شامل شود.
برای وب سایت های معمولی که PWA نیستند ، از لینک نماد برای تعریف Favicon سایت خود استفاده کنید. در حالی که از نظر فنی اختیاری است ، یک Favicon به تشخیص برند و تجربه کاربر کمک می کند ، بنابراین بیشتر سایت ها باید یکی را شامل شوند.
: انواع محتوا را برای سایت خود جایگزین کنید
rel="alternate" type="application/rss+xml" href="/feed.xml">
rel="alternate" type="text/markdown" href="/llms.txt">
این برچسب پیوند چندین هدف را ارائه می دهد:
-
این به خوانندگان RSS و سایر جمع کننده خوراک کمک می کند تا خوراک RSS سایت شما را کشف کنند. اگر سایت شما فید RSS را ارائه می دهد (مشترک برای وبلاگ ها ، سایت های خبری یا مجموعه های محتوا به طور مرتب به روز شده) آن را درج کنید.
-
همچنین می تواند برای مشخص کردن یک مورد استفاده شود
llms.txtپرونده برای سایت خود به عنوانtype="text/markdown"پیوند جایگزین این پرونده محتوای سایت شما را به صورت آسان برای هضم برای مدل های بزرگ زبان که سایت شما را اسکن می کند ، ارائه می دهد. توجه: من این ایده را از گیلز توماس دزدیدم.
اگر سایت شما این ویژگی ها را ارائه نمی دهد ، می توانید با خیال راحت این برچسب ها را حذف کنید.
با با : بهینه سازی منابع
rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" as="style" onload="this.onload=null;this.rel="stylesheet"">
rel="preconnect" href="https://fonts.gstatic.com">
rel="prefetch" href="/next-page.html">
این برچسب های لینک به بهینه سازی بارگیری منابع کمک می کنند:
-
preload: به مرورگر می گوید که در اسرع وقت یک منبع را بارگیری و ذخیره کنید. برای منابع مهم مورد نیاز در مراحل ارائه ، مانند فونت ها یا تصاویر مهم مفید است. -
preconnect: ارتباط اولیه با دامنه های خارجی ایجاد می کند که بعداً از آنها منابع را واکشی می کنید. این باعث صرفه جویی در وقت با آماده شدن اتصال در صورت لزوم می شود. -
prefetch: به مرورگر پیشنهاد می کند که یک منبع برای ناوبری آینده لازم باشد. مرورگر آن را هنگام بیکار بارگیری می کند و باعث می شود صفحه بعدی سریعتر بارهای خود را انجام دهد.
بر اساس نیازهای عملکرد خود از این موارد انتخابی استفاده کنید. استفاده بیش از حد از آنها می تواند پهنای باند را هدر دهد ، بنابراین روی منابع واقعاً مهم متمرکز شوید.
پایان
این الگوی یک نقطه شروع محکم برای هر پروژه وب به شما می دهد. البته ، این الگوی کاملاً عقیده است و بهترین تنظیم برای نیازهای شما ممکن است متفاوت باشد. اگر من برخی از برچسب های مشترک را از این الگو کنار بگذارم ، احتمالاً به این دلیل است که حداقل در بیشتر موارد به آنها احتیاج ندارند.
من از نظرات شما استقبال می کنم! اگر فکر می کنید چیز مهمی را از دست داده ام ، لطفاً یک مسئله را باز کنید یا درخواست کشش را در مخزن GitHub ارسال کنید.
همچنین ، اگر می خواهید یک الگوی استارت که فراتر از پرونده index.html است ، ممکن است بخواهید BoilerPlate HTML5 را بررسی کنید. این یک منبع عالی برای بلند شدن یک برنامه بسیار سریع هنگام ساخت یک برنامه وب مترقی است.
منابع
اگر می خواهید اطلاعات بیشتری در مورد برچسب های HTML HEAD بخوانید ، پیشنهاد می کنم از اینجا شروع کنید:
و یک بار دیگر ، می توانید الگوی index.html را در GitHub پیدا کنید.
