Code Module | کد ماژول
2.18K subscribers
366 photos
46 videos
6 files
381 links
Hello World 🌎

<> Earth is programmable if you code it </>

Group 👇🏻
@CodeModuleGap

Contact Us 👇🏻
@MrShahiin
@neoMahan
Download Telegram
متا تگ های کاربردی 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
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥8⚡4👌2
نکاتی راجب سئو برای فرانت دولوپرا 💀

سئو خودش دنیای بزرگی داره و زیاد به فرانت کارا مربوط نمیشه، اما این وسط یه سری نکته ها هست که با رعایت کردنشون هنگام کد زدن، باعث میشه سایت ما حرفه ای تر و رتبه بهتری داشته باشه.

تو مقاله زیر، نکاتی راجب استاندارد های سئو در فرانت‌اند، شرح داده شده که پیشنهاد میکنم حتما یه سر بزنید ⚡️


🔵https://radzad.com/seo-standards


#seo #frontend
@CodeModule
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8
سئوی قدرتمند در Next.js 🛠

سئو نقش بسیار مهمی در دیده شدن وب‌سایت و پروژه داره و شما به عنوان دولوپر، باید اطلاعاتی راجع به این موضوع داشته باشید. مقاله زیر نکته هایی برای سئوی بهتر در پروژه های نکستی جمع اوری کرده و یشنهاد میکنم، حتما مطالعش کنید.

🔗 Article

#seo #tips
@CodeModule
🔥10
‏WebPageTest، نجات‌دهنده پرفورمنس 🎮

مطمئنا همه ما با داده های Lighthouse یا PageSpeed سر و کله زدیم و گاها پیش اومده که دقیق، نتونستیم عیب رو شناسایی کنیم.

اینجاست که سایت WebPageTest می‌تونه خیلی مفید باشه. با استفاده از این ابزار می‌تونیم جزئیات بیشتری از فرایند لود شدن صفحه ببینیم، از جمله:

🔹 LCP, CLS, ... و Core Web Vitals

🔹 TTFB و زمان پاسخ سرور

🔹 Waterfall درخواست‌های شبکه

🔹 زمان لود شدن استایل‌ها، جاوااسکریپت‌ها، فونت‌ها، تصاویر و سایر چانک ها

🔹 تعداد و حجم ریکوست‌ها

🔹 رفتار Cache

🔹 عملکرد سایت در شرایط مختلف اینترنت و دیوایس

اما چیزی که این ابزار رو خیلی جذاب میکنه Waterfall هست. به‌جای اینکه فقط بگیم LCP بالاست، می‌تونیم مرحله‌به‌مرحله بررسی کنیم که:

آیا رسپانس سرور کند بوده؟
آیا Resource مهمی دیر کال شده؟
آیا Css یا JavaScript جلوی رندرینگ رو گرفته؟
آیا تصویر LCP دیر دانلود شده؟
آیا فونت باعث تأخیر در رندر شده؟


🔗 Site

#SEO #performance
@CodeModule
🔥3