مرجع تخصصی بروزترین مقالات سئو

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

آموزش سئو در مشهد

آموزش سئو مشهد

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

متا تگ ویو پورت

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

به طور خلاصه، ویو پورت یک متا تگ است که در بخش تگ head تارنما قرار می‌گیرد و در‌صورتی‌که ویو پورت نادرست وارد گردد، سبب میگردد که کاربر برای مشاهده ورقه مجبور به اسکرول عرضی خواهد شد که باعث کاهش تجربه کاربری تارنما و تاثیر منفی روی سئو سایت خواهد شد.

متا تگ viewport در طراحی ریسپانسیو وبسایت چه کاربردی دارد؟
منظور از طراحی ریسپانسیو تارنما این است که طرح صفحات وب سایت و عناصر جان دار در آنان متناسب با طول، عرض و رزولوشن صفحه نمایش دستگاه استفاده کننده تغییر و تحول کند تا برای نمایش در آن دستگاه بهینه خواهد شد. این شغل سبب می‌گردد که بهترین تجربه کاربری برای کاربران مختلف با دستگاه‌های متفاوت رقم بخورد.

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

طراحی ریسپانسیو

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

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

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

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

پارامتر width: این پارامتر، مهم‌ترین پارامتر متا تگ viewport به حساب میآید و بیان می‌کند که عرض وب‌سایت چقدر می باشد. با مقدار width=device-width عرض وب‌سایت را معادل با عرض برگه نمایش دستگاه در حیث میگیرد. همچنین میتوانید یک کدام از معین مانند width=320px برای معلوم کردن عرض صفحه وارد فرمایید.
پارامتر height: این پارامتر طول وب‌وبسایت را مشخص و معلوم می‌کند؛ مانند پارامتر قبلی، میتوانید با مقدار width=device-height طول وب‌وبسایت را به اندازه طول صفحه نمایش کاربر در لحاظ بگیرید که توصیه نمیشود یک کدام از مشخص به آن بدهید.
پارامتر Initial-scale: این پارامتر اندازه زوم (غلو) اول ورقه را موقع اولی بار گذاری مشخص می‌کند. initial-scale=1 از زوم پیش فرض مرورگرها هجران می‌کند.
پارامتر Maximum-scale: این پارامتر بیشترین مقدار زومی که کاربر قادر است در وب سایت اجرا دهد معلوم می‌کند. برای مثال در‌حالتی که از maximum-scale=1 استعمال شود؛ یعنی مخاطب نمی‌تواند در وب سایت هیچ زومی انجام دهد. از آنجایی که در اکثری از مواقع در صفحه های کوچک تلفن همراه‌ها، کاربرها نیاز به زوم دارا‌هستند؛ بهتر است این پارامتر تهیه و تنظیم نشود.
پارامتر Minimum-scale: این پارامتر برعکس پارامتر قبلی هست و تعیین می‌کند که مخاطب تا چه اندازه امکان کوچک نمایی دارد.
پارامتر User-scalable: این پارامتر امکان زوم بوسیله کاربر را تعیین می‌کند و دو مقدار Yes و No را می‌پذیرد. اگر از User-scalable=No استفاده فرمایید به این معنا است که کاربر هیچ زومی نتواند انجام دهد که پیشنهاد می شود این کار را نکنید. بهتر می باشد از User-scalable=Yes به کار گیری فرمائید یا به‌طورکلی از این پارامتر استعمال نکنید تا استفاده کننده قابلیت زوم در وب سایت شمارا داشته باشد.
پارامتر interactive-widget: این پارامتر به تاثیر ویجت‌های تعاملی مانند کیبوردهای مجازی روی شیت می‌پردازد. مقادیری که این پارامتر دریافت می‌کند شامل resizes-visual، resizes-content و overlays-content است.
طریق استعمال از متا تگ ویو پورت چگونه هست؟
HTML 5 نحوه معمولی‌ای در اختیار طراحان سایت قرار داده می‌باشد تا به راحتی از متا تگ viewport در صفحه ها وب سایت خود استفاده کنند. شما می‌توانید با استعمال از دستور کلی زیر در بخش head صفحات تارنما خود متا تگ viewport را به کار بگیرید. این فرمان کلی می‌باشد و می‌توانید در صورت نیاز پارامترهای اورده شده در بخش پیشین را وارد کرده یا تغییر و تحول دهید.

در صورتی‌که سایت شما با وردپرس طراحی شده است، اکثری از قالب‌ها به صورت پیش فرض متا تگ viewport را در head سایت شما وارد می‌کنند؛ ولی برای اعتقادوباور از تهیه بودن آن از سربرگ "نمایش" مورد "ویرایشگر پرونده پوسته" را گزینش نمائید.

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

آموزش سئو در مشهد

آموزش سئو مشهد

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

متا تگ ویو پورت

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

به طور خلاصه، ویو پورت یک متا تگ است که در بخش تگ head تارنما قرار می‌گیرد و در‌صورتی‌که ویو پورت نادرست وارد گردد، سبب میگردد که کاربر برای مشاهده ورقه مجبور به اسکرول عرضی خواهد شد که باعث کاهش تجربه کاربری تارنما و تاثیر منفی روی سئو سایت خواهد شد.

متا تگ viewport در طراحی ریسپانسیو وبسایت چه کاربردی دارد؟
منظور از طراحی ریسپانسیو تارنما این است که طرح صفحات وب سایت و عناصر جان دار در آنان متناسب با طول، عرض و رزولوشن صفحه نمایش دستگاه استفاده کننده تغییر و تحول کند تا برای نمایش در آن دستگاه بهینه خواهد شد. این شغل سبب می‌گردد که بهترین تجربه کاربری برای کاربران مختلف با دستگاه‌های متفاوت رقم بخورد.

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

طراحی ریسپانسیو

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

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

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

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

پارامتر width: این پارامتر، مهم‌ترین پارامتر متا تگ viewport به حساب میآید و بیان می‌کند که عرض وب‌سایت چقدر می باشد. با مقدار width=device-width عرض وب‌سایت را معادل با عرض برگه نمایش دستگاه در حیث میگیرد. همچنین میتوانید یک کدام از معین مانند width=320px برای معلوم کردن عرض صفحه وارد فرمایید.
پارامتر height: این پارامتر طول وب‌وبسایت را مشخص و معلوم می‌کند؛ مانند پارامتر قبلی، میتوانید با مقدار width=device-height طول وب‌وبسایت را به اندازه طول صفحه نمایش کاربر در لحاظ بگیرید که توصیه نمیشود یک کدام از مشخص به آن بدهید.
پارامتر Initial-scale: این پارامتر اندازه زوم (غلو) اول ورقه را موقع اولی بار گذاری مشخص می‌کند. initial-scale=1 از زوم پیش فرض مرورگرها هجران می‌کند.
پارامتر Maximum-scale: این پارامتر بیشترین مقدار زومی که کاربر قادر است در وب سایت اجرا دهد معلوم می‌کند. برای مثال در‌حالتی که از maximum-scale=1 استعمال شود؛ یعنی مخاطب نمی‌تواند در وب سایت هیچ زومی انجام دهد. از آنجایی که در اکثری از مواقع در صفحه های کوچک تلفن همراه‌ها، کاربرها نیاز به زوم دارا‌هستند؛ بهتر است این پارامتر تهیه و تنظیم نشود.
پارامتر Minimum-scale: این پارامتر برعکس پارامتر قبلی هست و تعیین می‌کند که مخاطب تا چه اندازه امکان کوچک نمایی دارد.
پارامتر User-scalable: این پارامتر امکان زوم بوسیله کاربر را تعیین می‌کند و دو مقدار Yes و No را می‌پذیرد. اگر از User-scalable=No استفاده فرمایید به این معنا است که کاربر هیچ زومی نتواند انجام دهد که پیشنهاد می شود این کار را نکنید. بهتر می باشد از User-scalable=Yes به کار گیری فرمائید یا به‌طورکلی از این پارامتر استعمال نکنید تا استفاده کننده قابلیت زوم در وب سایت شمارا داشته باشد.
پارامتر interactive-widget: این پارامتر به تاثیر ویجت‌های تعاملی مانند کیبوردهای مجازی روی شیت می‌پردازد. مقادیری که این پارامتر دریافت می‌کند شامل resizes-visual، resizes-content و overlays-content است.
طریق استعمال از متا تگ ویو پورت چگونه هست؟
HTML 5 نحوه معمولی‌ای در اختیار طراحان سایت قرار داده می‌باشد تا به راحتی از متا تگ viewport در صفحه ها وب سایت خود استفاده کنند. شما می‌توانید با استعمال از دستور کلی زیر در بخش head صفحات تارنما خود متا تگ viewport را به کار بگیرید. این فرمان کلی می‌باشد و می‌توانید در صورت نیاز پارامترهای اورده شده در بخش پیشین را وارد کرده یا تغییر و تحول دهید.

در صورتی‌که سایت شما با وردپرس طراحی شده است، اکثری از قالب‌ها به صورت پیش فرض متا تگ viewport را در head سایت شما وارد می‌کنند؛ ولی برای اعتقادوباور از تهیه بودن آن از سربرگ "نمایش" مورد "ویرایشگر پرونده پوسته" را گزینش نمائید.