متا تگ های کاربردی HTML که هر فرانت کاری باید بدونه! 🖐

متا تگ ها تو بحث سئو بسیار مهم و کاربردین، چرا که راهنمایی برای موتورهای جستجو مثل گوگل هستن تا بتونن درک درستی از صفحات سایت ما داشته باشن.


تو این پست چند تا از این متا تگ هارو با هم بررسی میکنیم⬇️


🔵 متا تگ description

این متا تگ برای وارد کردن توضیحات برای نتایج جستجو مورد استفاده قرار میگیره. این متاتگ نهایتا باید 150 کلمه باشه.

<meta name="description" content="150 words"/>

🔵متا تگ keywords

ارائه کلمات کلیدی مربوط به محتوای صفحه به موتورهای جستجو با استفاده از این متا تگ انجام میشه.

<meta name="keywords" content="your, keywords"/>

🔵متا تگ author

این متا تگ شامل اطلاعات مختلفی مثل اسم ، شماره تماس، آدرس، ایمیل و… از نویسنده سایت هست.

<meta name="author" content="name, email@hotmail.com" />

🔵متا تگ copyright

این متا تگ برای مشخص کردن حق تالیف سند مورد استفاده قرار میگیره.
متاتگ کپی رایت باید به اسم صاحب اثر (شخص یا شرکت) باشه.

<meta name="copyright" content="company_name" />

🔵متا تگ robots

متا تگ robots ایندکس شدن یا نشدن صفحه توسط ربات های گوگل و دنبال کردن لینک ها رو توسط آنها مشخص میکنه.

<meta name="robots" content="index, follow" />

🔵متا تگ viewport

متا تگ viewport این قابلیت و ایجاد می‌کنه که اندازه صفحه سایت با اندازه صفحه نمایشگر دستگاه کاربر متناسب بشه و دیگخ خبری از به هم ریختگی و بی‌نظمی نباشه و پارامتر های مختلفی میگیره.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

🔵متا تگ Charset

این متا تگ نوع کدگذاری مورد استفاده در این صفحه رو مشخص می‌کنه. این تگ به موتورهای جستجو و مرورگرها اطلاع میده که صفحه از چه استاندارد کدگذاری استفاده می‌کنه تا متون به درستی نمایش داده بشه.

<meta charset="UTF-8">

البته متا تگ های دیگه ای هم وجود داره که یادگیریشون خالی از لطف نیست.
این مقاله تقریبا اکثر متا تگ هارو معرفی کرده و پیشنهاد میکنم حتما یه سر بهش بزنید.


#html #seo
@CodeModule

5 صفت یا attribute برای html که کسی اونا رو بهت نمیگه🔥⬇️


1⃣ صفت Accept

این صفت مشخص میکنه که کاربر اجازه آپلود چه نوع فایل هایی رو داره، از این صفت فقط در Input با تایپ فایل میشه استفاده کرد.

<input type="file" name="CodeModule" accept=".jpg,.png,.doc">

🔢 صفت Loading

شما میتونین از صفت loading در تگ <img> برای کنترل نحوه بارگذاری تصویر توسط مرورگر استفاده کنید که شامل دو مقادیره:

مقدار eager: مقدار پیش فرض تگ img هست که همزمان با load صفحه وب، تصویر هم load میشه.

مقدار lazy: زمانی که صفحه وب load شد، تصویر هم با اسکرول شما load میشه.

<img loading="lazy" src="image.jpg" alt="CodeModule" />

🔢 صفت Multiple

شما میتونین از صفت multiple برای تگ های <input> و <select> استفاده کنین تا به کاربران اجازه بدید چند مقدار را همزمان انتخاب کنن.

<input type="file" id="CodeModule" name="attribute" multiple>
<select name="attribute" id="CodeModule" multiple></select>

🔢 صفت Title

شما میتونین از صفت title برای ارائه اطلاعات اضافی درباره یک تگ استفاده کنید. این اطلاعات معمولا زمانی که کاربر ماوس رو روی یه تگ نگه داره یا اصطلاحا عمل hover کردن و انجام بده، نمایش داده میشه.
این صفت یک global attribute هست.

<p title="Free Web tutorials">CodeModule</p>

🔢 صفت Contenteditable

با استفاده از این این اتربیوت میتونیم مشخص کنیم که محتوای یک تگ قابل ویرایش باشه.


مثلا اگر یک پاراگراف و قابل ویرایش کنیم کاربر میتونه محتوای اون پاراگراف و به سلیقه خودش تغییر بده.
این صفت یک global attribute هست.

<p contenteditable="true">منو ویرایش کن</p>

#html #attribute
@CodeModule

هر برنامه نویس حرفه ای، موظفه یکسری استاندارد هارو رو توی کد هاش رعایت کنه تا بتونه پروژه خوانا تر و بهینه تری و تحویل بده.

ریپازیتوری زیر نکاتی راجب این استاندارد ها توی HTML 5 🖐 شرح داده که پیشنهاد میکنم حتما یه نگاه بهش بندازید.


🐱 Repository

#html #bestpractice
@CodeModule

5 تا از بهترین سایت‌های ارائه دهنده قالب‌های Html/Css 💀

🔵html5up

🔵freehtml5

🔵styleshout

🔵free-css

🔵tooplate

#template #html #css
@CodeModule