متا تگ چیست؟ کجا و چرا استفاده می‌شود؟

متا تگ چیست؟

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

کدهای HTML

مطلب نسبتا سختی را به ساده ترین روش ممکن برای شما توضیح خواهم داد. چون اعتقادم بر این است که اگر هر مبحث سختی را به چندین مبحث ساده بشکنیم و یاد بگیریم ، رفته رفته به یک فرد متخصص در آن حوزه تبدیل خواهیم شد.

اگر برروی سایت میهن وردپرس یا هر وبسایت دیگری کلیک راست کنید و View Page Source را بزنید ، تگ های html را مشاهده خواهید کرد . ما این آموزش را ابتدا بروی سایت آمازون انجام می دهیم و سپس نکته ای را در سایت میهن وردپرس به شما خواهیم گفت.

به راحتی می توانید تمام کدها را انتخاب و در Visual Studio Code وارد کنید.

تگ Head

با بخش های دیگر کدها کاری نداریم ، در این مقاله قصد داریم تنها درباره ی متاتگ ها صحبت کنیم. و برای اینکه متاتگ ها را برای شما توضیح دهیم ، نیاز است که تگ Head را توضیح دهیم. پس تگ Head را انتخاب کرده و کپی می کنیم و در یک جای دیگر paste می کنیم .

اجازه دهید تگ head را با یک مثال برروی خودم توضیح دهم ، تصور کنید که کل بدن من یک کد Html است ، پس از دو بخش سر(مغز) و بدن تشکیل شده است . بخش بدن که قابل مشاهده است مانند چشم ، گوش و … اما قطعا شما درون ذهن من را مشاهده نمی کنید و اصلا نیازی هم نیست که ببینید.

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

دقیقا کدهای Html نیز یک بدن و یک سر دارند . حال اگر شمایی که با من صحبت می کنید را مرورگر در نظر بگیریم ، مرورگرها نیز مانند شما در ابتدا فقط body (بدن) کدهای Html را می بینند. اما پس از آن باید با سایت صحبتی داشته باشند که باید به سراغ تگ Head بروند.

تگ Script

همانگونه که در تصویر زیر مشاهده می کنید ، تعدادی کد جاوا اسکریپت را مشاهده می کنید که دستوراتی را به مرورگر می دهند و بسته به هر رفتار کاربر یک سری دستوراتی نوشته شده است. این کد ها در بین <script></script> دو اسکریپت که به این صورت قرار گرفته اند ، قرار می گیرند.

اما اگر script ها را پاک کنیم تعدادی متا تگ برای ما باقی می ماند که قوانینی را برای سایت ما وضع می کنند.

متاتگ چیست؟

متاتگ‌ ها (Meta Tags) بخش‌هایی از کد HTML هستند که اطلاعاتی درباره محتوای صفحه وب را ارائه می‌دهند. این اطلاعات برای موتورهای جستجو و مرورگرها استفاده می‌شود تا به درک بهتر و نمایش مناسب‌تر صفحات وب کمک کند. به هریک از این خط کدها یک متاتگ گفته می شود.

در هر یک از این متاتگ ها درواقع Name یا Rel آنها مشخص می کنند که دقیقا چه تگی هستند و چه کاری را انجام می دهند.

در ادامه به بررسی انواع متاتگ‌ها و کاربردهای آن‌ها می‌پردازیم:

متاتگ عنوان (Title Tag)

متاتگ title همانگونه که از نام آن پیداست ، برای تعریف عنوان صفحه وب استفاده می‌ شود. این عنوان در نتایج موتورهای جستجو و در بالای مرورگر نمایش داده می‌شود.

در وردپرس به دلیل اینکه ما بدون کد نویسی سایت طراحی می کنیم ، این عنوان را با پلاگین هایی مانند RankMath یا Yoast SEO مشخص می کنیم.

متاتگ توضیحات (Meta Description)

متاتگ توضیحات برای ارائه خلاصه‌ای کوتاه از محتوای صفحه وب استفاده می‌شود. این توضیحات در نتایج جستجو نمایش داده می‌شوند و می‌توانند بر کلیک‌پذیری (CTR) تأثیرگذار باشند. درواقع این تگ به مرورگر می گوید که زمانی که سایت در گوگل جستجو شد این توضیحات را نمایش بده مانند تصویر زیر :

متاتگ کلمات کلیدی (Meta Keywords)

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

متاتگ Google-Site-Verification

این تگ برای وریفای کردن سایت در گوگل استفاده می شود.

متاتگ canonical

این تگ مشخص می کند که سایت با www نیز در دسترس باشد یا خیر .

متاتگ‌های Open Graph (OG)

این متاتگ‌ها برای بهبود نمایش محتوای صفحات وب در شبکه‌های اجتماعی استفاده می‌شوند.

اگر کدهای سایت میهن وردپرس را باز کنیم ، متاتگ های مختلفی را در آن خواهید دید. اما یک سوال ! وقتی سایت میهن وردپرس را در گوگل جستجو می کنیم ، چرا مانند مابقی سایت ها به جای اسم سایت ، آدرس سایت را نمی آورد؟

این نکته دقیقا به این خط کدی که در تصویر زیر می بینید بر میگردد .

متاتگ‌های توییتر (Twitter Card)

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

یا مثلا app_id من در توییتر 20793816 است .

این‌ها مهمترین متاتگ‌هایی هستند که در صفحات وب استفاده می‌شوند. استفاده صحیح از این متاتگ‌ها می‌تواند به بهبود سئو (SEO) و تجربه کاربری کمک کند.

آنچه آموخته ایم

توضیح تک تک متاتگ ها نیاز به حداقل ده ساعت زمان دارد ، اما سعی کردیم در این مقاله به اختصار توضیحاتی را درباره ی متاتگ ها به شما بدهیم . ما در این مقاله شما را با مفهوم کدهای Html ، تگ Head و تعدادی از متا تگ ها آشنا کردیم . امیدواریم که این مقاله برای شما مفید بوده باشد.

پیروز و موفق باشید. 🙂

رضا راد

میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره...