آخرین بروزرسانی در تاریخ مارس 21, 2026 توسط PersiaWebAdmin

متا تگ viewport یکی از مهم‌ترین تگ‌های HTML در طراحی ریسپانسیو (Responsive) است. این تگ به مرورگرهای موبایل و تبلت می‌گوید که صفحه را چگونه متناسب با اندازه دستگاه نمایش دهند. بدون استفاده از این تگ، سایت حتی اگر به‌صورت واکنش‌گرا طراحی شده باشد، در موبایل به‌درستی نمایش داده نمی‌شود و ظاهر آن کوچک، نامرتب و غیر قابل استفاده خواهد بود.

به زبان ساده، متا تگ viewport پل ارتباطی میان طراحی سایت و نمایش صحیح آن در دستگاه‌های کوچک است.

چرا متا تگ Viewport اهمیت دارد؟

دلایل اهمیت این تگ:

• فعال‌سازی طراحی ریسپانسیو
• جلوگیری از اسکرول افقی
• هماهنگی ظاهر سایت با اندازه صفحه‌نمایش
• بهبود تجربه کاربری در موبایل
• تاثیر مثبت در سئو موبایلی و موفقیت Core Web Vitals
• جلوگیری از بزرگ‌نمایی خودکار صفحه توسط مرورگر

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

پیشنهاد مطالعه : متا دسکریپشن چیست ؟

---

ساختار متا تگ Viewport

شکل پایه این تگ به این صورت است:

نمایش کد

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

این رایج‌ترین و استانداردترین حالت استفاده در طراحی واکنش‌گراست.

---

پارامترهای متا تگ Viewport و کاربرد هرکدام

در ادامه رایج‌ترین پارامترهای قابل استفاده در متا تگ viewport معرفی شده‌اند:

---

1. پارامتر width

این پارامتر مشخص می‌کند عرض صفحه چه اندازه باشد.

انواع مقادیر:

• device-width : برابر با عرض صفحه دستگاه (موبایل/تبلت/لپ‌تاپ)
• عدد ثابت : مثل 980 (قدیمی و غیرکاربردی)

نمونه:

نمایش کد

<meta name="viewport" content="width=device-width">

---

2. پارامتر initial-scale

میزان بزرگ‌نمایی اولیه صفحه هنگام بارگذاری.

نمایش کد

initial-scale=1.0

مقدار مناسب: 1.0

یعنی صفحه با اندازه واقعی نمایش داده شود.

---

3. پارامتر minimum-scale / maximum-scale

کمترین و بیشترین حد زوم که کاربر می‌تواند انجام دهد.

مثال:

نمایش کد

maximum-scale=1

---

4. پارامتر user-scalable

تعریف می‌کند کاربر بتواند صفحه را زوم کند یا خیر.

نمایش کد

user-scalable=no

توصیه:

برای دسترس‌پذیری بهتر از no استفاده نکنید.

پیشنهاد مطالعه : تگ noindex چیست

---

ترکیب کامل پارامترها (اما نه همیشه توصیه‌شده)

نمایش کد

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

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

---

متا تگ Viewport در طراحی ریسپانسیو چه کاربردی دارد؟

در طراحی ریسپانسیو، بخش مهمی از کار بر عهده‌ی CSS و Media Queryهاست.

اما بدون تگ viewport:

• Media Queryها درست کار نمی‌کنند
• المان‌ها بر اساس اندازه واقعی دستگاه تغییر نمی‌کنند
• سایت بسیار کوچک یا بسیار بزرگ دیده می‌شود
• کاربران مجبور به زوم کردن می‌شوند

این تگ باعث می‌شود طراحی واکنش‌گرا فعال شود.

به این شکل:

1. مرورگر موبایل عرض سایت را برابر با device-width در نظر می‌گیرد
2. CSS ریسپانسیو فعال می‌شود
3. Media Queryها مطابق انتظار عمل می‌کنند
4. سایت با اندازه مناسب دستگاه نمایش داده می‌شود

---

نحوه استفاده از متا تگ Viewport در وردپرس

اگر از قالب استاندارد استفاده می‌کنید، معمولاً این تگ از قبل در فایل header.php قالب وجود دارد.

اما اگر نبود، به یکی از روش‌های زیر اضافه کنید:

---

روش اول: افزودن به فایل header.php قالب

مسیر:

wp-content/themes/your-theme/header.php

قبل از تگ </head> کد زیر را قرار دهید:

نمایش کد

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

---

روش دوم: استفاده از افزونه Insert Headers and Footers

مناسب برای افراد غیرتوسعه‌دهنده.

مراحل:

• نصب افزونه “Insert Headers and Footers”
• رفتن به مسیرتنظیمات > Insert Headers and Footers
• قرار دادن کد در بخش “Scripts in Header”

---

روش سوم: استفاده از Child Theme

اگر قالب حرفه‌ای دارید و نمی‌خواهید با آپدیت قالب تغییرات از بین برود، بهتر است کد را در چایلد تم قرار دهید.

پیشنهاد مطالعه : چرخه عمر محتوا چیست؟

---

خطاهای رایج در استفاده از متا تگ Viewport

• استفاده از مقادیر ثابت مثل width=960
• غیرفعال کردن قابلیت زوم کاربر
• استفاده از چند متا تگ viewport (باعث تداخل می‌شود)
• تنظیم initial-scale غلط مثل 0.1 یا 5
• فراموش کردن این تگ در قالب‌های قدیمی وردپرس

تاثیر متا تگ Viewport بر سئو

اگرچه متا تگ viewport یک عامل رتبه‌بندی مستقیم نیست، اما نقشی کاملاً حیاتی در سئو موبایلی دارد. با توجه به این‌که گوگل از سیستم Mobile‑First Indexing استفاده می‌کند، نسخه موبایلی سایت مبنای اصلی ارزیابی و رتبه‌بندی است. بنابراین نحوه نمایش سایت در موبایل یک فاکتور تعیین‌کننده محسوب می‌شود و متا تگ viewport دقیقاً همین بخش را کنترل می‌کند.

۱. شرط اصلی برای Mobile-Friendly بودن

گوگل اعلام کرده است که نبودن تگ viewport باعث می‌شود سایت در تست Mobile-Friendly رد شود. این یعنی:

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

به‌دلیل Mobile‑First Indexing، این افت فقط به موبایل محدود نمی‌شود، بلکه روی کل رتبه‌های سایت تاثیر می‌گذارد.

۲. تاثیر روی Core Web Vitals

نبود متا تگ viewport باعث برهم‌ریختگی چیدمان صفحه (Layout Shift) و نمایش نادرست عناصر در موبایل می‌شود. نتیجه:

• افزایش CLS
• تجربه کاربری ضعیف
• امتیاز پایین Core Web Vitals
• افت جایگاه در نتایج جستجو

گوگل بارها تاکید کرده که Core Web Vitals بخشی از سیگنال‌های رتبه‌بندی هستند.

۳. کاهش نرخ پرش و بهبود تجربه کاربری

وقتی سایت بدون viewport در موبایل باز می‌شود:

• متن‌ها بسیار کوچک دیده می‌شوند
• کاربر مجبور به زوم و اسکرول افقی می‌شود
• ظاهر سایت حرفه‌ای نیست
• کاربر سریع صفحه را ترک می‌کند

افزایش Bounce Rate و کاهش Time on Page سیگنال‌های منفی برای گوگل محسوب می‌شوند.

۴. فعال شدن صحیح طراحی ریسپانسیو

بدون این تگ، حتی اگر تمام Media Queryها در CSS به‌درستی نوشته شده باشند، باز هم نمایش سایت خراب می‌شود. زیرا مرورگر موبایل صفحه را با عرض دسکتاپ رندر می‌کند. بنابراین viewport شرط لازم برای عملکرد درست طراحی واکنش‌گرا است و طراحی ریسپانسیو یکی از عناصر کلیدی سئو موبایل به حساب می‌آید.

۵. بهبود رندر و پردازش توسط ربات گوگل

وقتی صفحه در موبایل ساختار درست دارد:

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

---

نتیجه‌گیری

متا تگ viewport یکی از عناصر کلیدی در طراحی ریسپانسیو و تجربه کاربری موبایل است. بدون آن، سایت شما در دستگاه‌های کوچک قابل استفاده نخواهد بود و حتی می‌تواند بر رتبه سئو موبایلی تأثیر منفی بگذارد.

با قرار دادن تگ زیر، ۹۰٪ نیازهای شما در طراحی واکنش‌گرا رفع می‌شود:

نمایش کد

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

پیشنهاد میکنیم برای طراحی سایت با کیفیت بالا و رعایت تمام استانداردها با کارشناسان پرشیا وب در تماس باشید.