شنبه ۰۸ مهر ۱۴۰۲

Saturday, September 30, 2023 GMT +3:30

کاربرد متاتگ refresh در صفحات وب (HTML)

html-meta-tag-refresh

همانطور که می دانیم سورس کدهای صفحات وب از استاندارد زبان HTML یا (HyperText Markup Language) پیروی می کنند، یعنی فارغ از اینکه به چه زبان سمت سروری برنامه نویسی کنیم حاصل کار در وب به صورت کدهای HTML نمایان خواهد شد، از طرفی گاهی مواقع به دلایل مختلف دسترسی به سرور محدود شده یا امکان پذیر نیست و برای اعمال دستورات و سلایق خود ناچاریم دست به دامن کدهای HTML شویم که نمود بارز این موضوع در سرویس های مدیریت وبلاگ خودنمائی می کند، به طور مثال اگر بخواهیم به صورت خودکار کاربران را از وبلاگ قدیمی به وبلاگ جدید هدایت کنیم به طور معمول باید از متاتگی به نام refresh (رفرش یا تازه سازی) استفاده کنیم که در این آموزش به تفصیل در خصوص آن صحبت خواهیم کرد.

متاتگ refresh چیست؟


متاتگ refresh (رفرش یا تازه سازی) زیرمجموعه ای از شاخه متاتگ های خانواده http-equiv است که برای تنظیم سربرگ های HTTP یا HTTP Headers در زبان HTML به کار می روند، عبارت equiv مخفف Equivalent به معنی معادل یا مشابه است که منظور مشابه سازی دستورات HTTP سرور با کدهای HTML است.
به طور ساده HTTP Header به معنی پاسخ استاندارد و تعریف شده ای است که در جواب درخواست کاربر (Client) از سرور (Server) تنظیم و به عنوان سربرگ ارسال می شود تا مرورگر بتواند به فرض وضعیت بارگذاری صفحه، خطاهای سرور، نحوه پردازش، یونیکد، ذخیره سازی و... را مدیریت کند، این پاسخ ها معمولا توسط سیستم عامل یا برنامه نویسی سرور به مرورگر ارسال می شوند اما با روشی مشابه در HTML نیز می توانیم این کار را معادل سازی کنیم.
نکته: با استفاده از قابلیت Developer در مرورگرها (معمولا با فشردن کلید F12 در دسترس است) می توانیم سربرگ های رد و بدل شده در یک درخواست تحت وب را مشاهده کنیم.
متاتگ های خانواده http-equiv کاربردهای زیادی دارند که در زیر به صورت نمونه به آنها اشاره می کنیم:
- کنترل ذخیره موقت صفحه (cache-control)
<meta http-equiv="cache-control" content="no-cache">
- تعیین زبان محتوای صفحه (content-language)
<meta http-equiv="content-language" content="fa-IR">
- تعیین نوع و یونیکد محتوای صفحه (content-type)
HTML نسخه 4:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML نسخه 5:
<meta charset="utf-8">
- تعیین تاریخ ایجاد صفحه (date)
<meta http-equiv="date" content="Wed, 21 Feb 2012 20:55:12 GMT">
- تعیین تاریخ انقضای صفحه (expires)
<meta http-equiv="expires" content="never">
- تعیین تاریخ آخرین ویرایش صفحه (last-modified)
<meta http-equiv="last-modified" content="Mon, 01 Jan 2013 18:32:44 GMT">
- تعیین موقعیت برای انتقال (location)
<meta http-equiv="location" content="URL=https://webgoo.ir">
- تعیین مدت زمان برای رفرش خودکار صفحه یا انتقال به آدرس خاص (refresh)
<meta http-equiv="refresh" content="200">

<meta http-equiv="refresh" content="30; URL=https://webgoo.ir">
- تنظیم کوکی ها (set-cookie)
<meta http-equiv="set-cookie" content="cookie_name=value;expires=Fri, 1 Dec 2013 11:30:00 GMT; path=/">
- نحوه نمایش صفحه در فریم (window-target)
<meta http-equiv="window-target" content="_top">

در چه مواردی از متاتگ refresh استفاده کنیم؟


واقعیت این است که استفاده از متاتگ رفرش (refresh) برای صفحاتی که اهمیت زیادی دارند توصیه نمی شود و ممکن است این کار باعث بروز مشکلاتی با موتورهای جستجو شود که در نهایت به سئوی سایت یا وبلاگمان صدمه می زند، اما این گفته بدین معنی نیست که به کل نتوانیم از این متاتگ استفاده کنیم، اگر به فرض وبلاگی قدیمی داشته باشیم و بخواهیم به هر دلیل مطالب و فعالیتمان را به وبلاگی جدید منتقل کنیم، می توانیم از این متاتگ استفاده کرده و کاربران را به طور خودکار به آدرس جدید هدایت کنیم که به این کار در اصطلاح ریدایرکت (Redirect) می گویند، یا فرض کنیم در صفحات موسوم به 404 (کد HTTP خطای صفحه مورد نظر پیدا نشد!) می توانیم کاربر را پس از چند ثانیه به صورت خودکار به صفحه اصلی سایت یا وبلاگمان منتقل کنیم، نمونه دیگر می تواند استفاده از متاتگ refresh در هنگام ورود و خروج کاربران به سیستم و پنل مدیریت باشد و یا در موقعیت های مشابه که نیاز به انتقال خودکار از آدرس های URL مختلف است، پس یادمان باشد که استفاده از این متاتگ در همه جا توصیه نمی شود و فقط در موارد خاصی که مخصوصا صحبت از موتورهای جستجو در میان نیست می توانیم از آن استفاده کنیم.
نکته: برای صفحاتی که نیاز به رفرش اطلاعات در فواصل زمانی خاص دارند و از طرفی کسب رتبه مناسب در موتورهای جستجو نیز برایشان دارای اهمیت است استفاده از شیوه های جایگزین نظیر کدهای جاوا اسکریپت توصیه می شود، مثال:
setTimeout(function(){
   window.location.reload(true);
}, 5000);
که عدد 5000 به معنی 5 ثانیه (5000 میلی ثانیه) است و صفحه هر 5 ثانیه به صورت خودکار رفرش خواهد شد.

چگونه از متاتگ refresh استفاده کنیم؟


استفاده از این متاتگ ساده و سریع است، کافی است درون تگ های head ترجیحا در ابتدای صفحه نمونه کد زیر را قرار داده مدت زمان به ثانیه و آدرس URL صفحه مقصد را در قسمت content تنظیم نمائیم:
<meta http-equiv="refresh" content="30; URL=https://webgoo.ir">
توضیح:
- مقادیر عددی موجود در قسمت content میزان زمان به ثانیه است که کاربر پس از گذشت این مدت به صفحه مقصد منتقل خواهد شد.
- قسمت مربوط به URL با آدرس کامل صفحه مقصد تکمیل می شود.
از متاتگ refresh برای بارگذاری مجدد و به اصطلاح رفرش همان صفحه نیز می توانیم استفاده کنیم و اجباری برای انتقال کاربر به صفحه ای دیگر وجود ندارد، در این صورت نیاز به درج پارامتر مربوط به قسمت URL نیست و صرف درج مدت زمان به ثانیه کافی خواهد بود:
<meta http-equiv="refresh" content="200">

آشنایی با سایر روش های انتقال (Redirect)


در انتهای این مطلب بد نیست به سایر روش هایی که برخلاف متاتگ refresh مورد قبول موتورهای جستجو هستند اشاره ای داشته باشیم.
- استفاده از فایل htaccess و کد HTTP ریدایرکت 301
از نظر سئو (SEO) بهترین گزینه برای ایجاد انتقال از آدرس URL قدیمی به آدرس URL جدید استفاده از کد HTTP خطای 301 یا "HTTP/1.1 301 Moved Permanently" است، در این روش آدرس URL قدیمی با هدف انتقال همیگشی به آدرس URL جدید منتقل شده و علاوه بر این ارزش (Pagerank) آدرس قبلی حفظ و به آدرس جدید منتقل خواهد شد، برای ایجاد ریدایرکت 301 در فایل htaccess معمولا در سرورهای Apache می توانیم تنظیمات را انجام دهیم، مثال:
RewriteEngine on
RewriteCond /old/page/%{REQUEST_URI} !-f
RewriteRule ^(.+) /new/page/$1 [R=301]
- استفاده از HTTP Header در PHP
علاوه بر روش htaccess در کدهای PHP نیز می توانیم این کار را با ارسال دستورات HTTP Header انجام دهیم، خوشبختانه با برنامه نویسی PHP به راحتی قادریم مقادیر ارسالی به عنوان Header صفحات را مدیریت کنیم، مثال:
<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: https://webgoo.ir");
?>
برای دیدن سایر متاتگ های HTML و آشنایی با کاربرد آنها می توانیم به آموزش زیر مراجعه کنیم:
متاتگ ها (Meta tags) و کاربرد آنها در صفحات وب (HTML)
دسته بندی: آموزش کاربردی » HTML
related مطالب بیشتر:
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
پخش فایل صوتی (آهنگ، موسیقی پس زمینه) در سایت و وبلاگ
نحوه درج علامت های خاص در HTML
نحوه نمایش فیلم و کلیپ ویدئویی در سایت و وبلاگ
چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟
دیدگاه
more ۴۷ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
m.b
۲۱:۵۹ ۱۴۰۰/۰۸/۱۹
با سلام مجدد
فرموده بودین کدهای قسمت فرم را هم برایتان اینجا ارسال می کنم
<div class="col-6 col-s-12"Style="background: withe;color:red;height:auto;display:block;border:2px solid blue;border-radius:15px">
<form action="newcontact.php" method="post">
<label class="formcontact" style="padding-right:2px;margin-top: 5px;text-align: right;margin-right:3%;font-weight: bolder;color:blue">نام و نام خانوادگی*</label>
<input class="formcontact" name="firstname" type="text"style="height:30px;margin-left:0px;margin-top: 3%;width:95%;border:2px solid #9fcdff;border-radius:5px"required><br>
<label class="formcontact" style="padding-right:0px;margin-top: 5px;margin-right:3%;color:blue">ایمیل*</label>
<input class="formcontact" name="email" type="email" style="height:30px;margin-left:0px;margin-top: 3%;width: 95%;border:2px solid #9fcdff;border-radius:5px"required><br>
<label class="formcontact" style="padding-right:0px;margin-top: 15px;margin-right:3%;margin-top: 3%;color:blue">موضوع*</label>
<input class="formcontact" name="subject"type="text" style="height:30px;margin-left:0px;margin-top: 3%;width:95%;border:2px solid #9fcdff;border-radius:5px"required><br>
<label class="formcontact" style="padding-right:0px;margin-top: 5px;margin-right: 8%;margin-top: 3%;color:blue">شرح*</label>
<textarea class="formcontact" id="id" name="comment" rows="5" cols="10" style="width: 95%;height:110px;margin-top: 5px;border:2px solid #9fcdff;border-radius:5px"required></textarea>
<button type="submit" name="send" style="background:blue;color: white;height:50px;border-radius:10px;margin-top: 5px">ارسال پیام</button>
</form>
</div>
من بعد از پر کردن فرم میخوام مجدد به صفحه فرم بروم این نمونه کدهای من هست مشکل دارد امکانش هست ببینین مشکلش چی هست. سوال دومم اینکه بعد از برگشت به صفحه فرم میخوام اطلاعات فرم قبلی پاک شوند ممنون میشم با این کدها اصلاحات لازم رو انجام بدین. سوال بعدی من با توجه به کد های ارسالی اگر بخواهم همانند شما پیغامی مبنی بر اطلاعات شما با موفقیت ثبت شد در همون صفحه و بالای فرم نمایش بدهم به چه صورت اقدام کنم با توجه به کد های ارسالی.
خیلی ممنون از جواب های عالیتون.
با توجه به پاسخ قبلی فایل ها را ایمیل نکرده اید، در هر صورت برای انجام تغییرات مد نظرتان ساختار کل فرم تماس باید تغییر کند و راه حل ساده ای برای این مشکل وجود ندارد، بر اساس قسمت action این فرم اطلاعات به فایل newcontact.php ارسال می شود و برای نمایش پیام ها در یک صفحه، اطلاعات فایل newcontact.php باید با فایل نمایش فرم HTML ترکیب شوند، بحث حذف اطلاعات قبلی از فرم تماس هم به ساختار فرم برمی گردد که با ترکیب دو فایل بالا می شود این حالت را به نحو دلخواه تغییر داد، در کل یا باید کدها به صورت آنلاین و در سایتتان ویرایش و آزمایش و خطا شوند (روش ترجیحی) یا اینکه فایل های فرم تماس را به صورت کامل و قابل تست با فرمت ZIP فشرده کرده و به ایمیل ما ارسال کنید تا بررسی شوند.
پژمان
۱۰:۰۸ ۱۴۰۱/۱۱/۰۱
با سلام من یک سوال دارم می خواستم ببینم چطور میشه وقتی صفحات سایت عوض می شن هدر و فوتر ثابت بمونه و فقط محتویات صفحه ریلود بشه.
برای طراحی این نوع رابط کاربری باید از قابلیت Ajax یا WebSocket استفاده کنید.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
6 × 1
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
javascript
سلام 🙌 توی جاوا اسکریپت چطور تگ آپشن رو پیش فرض بزاریم مثلا : تگ آپشن _استان محل صدور : همدان -...
۱۴۰۲/۰۷/۰۶

Fateme
سلام مطالب عالی و استفاده می کنم دستتان درد نکنه . سوال من این هست چطور میتونم تاریخ تولد را وارد کنم سن شخص رو...
۱۴۰۲/۰۷/۰۵

مجتهدزاده
سلام من در لاراول سعی دارم تا با یک لینک رو اجرا کنم تا یک اس ام اس به شماره ای که در...
۱۴۰۲/۰۷/۰۳

پـــرتو
سلام جناب خسته نباشید شرمنده مزاحم میشم عه جناب ببخشید من دو سه تا وبلاگ دارم که یکیش یا دوتاشون هک میشن یعنی...
۱۴۰۲/۰۷/۰۳

فاطمه سیداحمدی
با سلام و خسته نباشید من میخوام با استفاده از جاوااسکریپت یه کدی داشته باشم که وقتی کاربر چیزی رو از توی سایت من...
۱۴۰۲/۰۷/۰۲

رضا جهانیان
درود برشما من تو گوگل که اسم سایت حراجستون را سرچ می کنم اسم دامنه نوشته شده به انگلیسی کدهای زیادی هم استفاده کردم...
۱۴۰۲/۰۶/۳۱

سعید
نمای ظاهری من مثل قبل که در اوت لوک میفرستادم در نیو ایمیل نیست یعنی تغییر کرده چطور میتونم برگردم به همون حالت اول خودش...
۱۴۰۲/۰۶/۲۷

سینا
با سلام و خسته نباشید من برای ترجمه متن از گوگل ترانسلیت استفاده می کنم یه مشکلی که دارم اینکه وقتی متنی رو برام...
۱۴۰۲/۰۶/۲۵

امین رحیمی
عالی بود ممنون
۱۴۰۲/۰۶/۲۴

کوروش
سلام خسته نباشید توضیح : سایتی که تگ های select option ها و همه div ها و label ها ( کلاس های...
۱۴۰۲/۰۶/۲۴

عدم اجرای فونت فیس در تب منو
سلام برای تب منو فونت فیس برای تب اول کار میکند اما تب های بعدی اعمال نمیشود چکار باید کرد
۱۴۰۲/۰۶/۲۲

محبوبه قاسم پور
سلام وقتتون بخیر برای منوهای کشویی سایت، اگر خاصیت overflow:hidden باشد، زیرمنوها نمایش داده نمی شود، از طرفی اگر این خاصیت فعال نباشد...
۱۴۰۲/۰۶/۱۸

mehdi
سلام من امتحان کردم نشد
۱۴۰۲/۰۶/۱۵

پـــرتو
سلام فکنم در یادداشت ها ارسال شده بود و تاریخشم یادم نیست ولی من واقعا نمی دونم کامنتش کجاست که برم برش دارم ...
۱۴۰۲/۰۶/۱۴

پـــرتو
سلام خسته نباشید ببخشید مزاحم شدم می خواستم بگم که یه کدی داده بودین قبلا برای بلاگفا که آی پی کسایی که بهمون توهین می...
۱۴۰۲/۰۶/۱۱

امیرحسین رستمی
سلام مجدد وقت بخیر لطفا لینک زیر را ببینید میخوام تمام متن های فارسی که اینجا انتخاب کردم رو با عبارت با قائده انتخاب...
۱۴۰۲/۰۶/۱۱

امیرحسین رستمی
سلام وقت بخیر من این متنو دارم: میخوام فقط متن های فارسی رو انتخاب کنم با preg_match و متن جایگزین براش بزارم قبلا...
۱۴۰۲/۰۶/۱۱

امیرحسین رستمی
در رابطه با دوتا سوال قبلی من این کد رو نوشتم شما بررسی کنید ببینید اگه مشکل دیگه ای نداره ، درست داره کار میکنه...
۱۴۰۲/۰۶/۰۹

امیرحسین رستمی
سلام وقت بخیر من یک عبارات با قائده ای میخوام که این متن رو : من همچین عبارتی در نظرم هست ولی ...
۱۴۰۲/۰۶/۰۹

hossein
سلام مجدد، ممنون از پاسخگویی شما از وردپرس استفاده میکنم و قالب وودمارت، هدر هم با هدر ساز قالب ساخته شده با اینکه...
۱۴۰۲/۰۶/۰۹

امیرحسین
سلام وقت بخیر من یک برنامه نوشتم که از ایپی ای گوگل کمک میگیره و متن میدم بهش و ترجمه میکنه : شما فرض...
۱۴۰۲/۰۶/۰۹

hossein
سلام وقت شما بخیر باشه ابتدا جا داره از شما تشکر کنم میخوام یک آیکن لینک دار توی هدر سایتم را از دید...
۱۴۰۲/۰۶/۰۹

علی
سلام و با تشکر از راهنمایی شما بنده یک وب سرویس ارسال پیامک دارم که از طریق آن برای کابرانم پیامک ارسال می کنم....
۱۴۰۲/۰۶/۰۷

مهدی
سلا چطوری میتونم کدام تو مرورگر دقیق نمایش بدم حتی >< تگ هام نمایش داده بشه در html تگ کد را هم معرف نکنید چون...
۱۴۰۲/۰۶/۰۴

محمدرضا
سلام و خدا قوت حضور شما بزرگوار. اول یه تشکر و قدردانی از شما دارم که زمان میزارید و جواب همه دوستان رو میدید....
۱۴۰۲/۰۶/۰۳

محمدرضا
سلام وقت شما بخیر لطف بفرمائید با switch و default کدی رو بنویسید که: اگه متغیر a یک باشد متغیر b دو...
۱۴۰۲/۰۶/۰۱

پـــرتو
سلام بابت جواب به سوالم در مورد بلاگفا ممنون من خودم با پشتیبانی بلاگفا تماس گرفتم گفنن نمیشه اینکار ولی یه سوال دیگه ازتون داشتم...
۱۴۰۲/۰۵/۲۸

fatima
سلام. خسته نباشید. ما با responsive هم میتوانیم اسکرول افقی را حذف کنیم؟
۱۴۰۲/۰۵/۲۸

عاطفه
ممنون از پاسخگوییتون. اگر ممکنه این سوال رو هم جواب بدید ممنون میشم. معنی این ارور ها و راه حل رفع اونها رو میخواستم بدونم....
۱۴۰۲/۰۵/۲۶

عاطفه
سلام، وقت بخیر. من چندتا مشکل سایتم داره که نمیدونم چطور باید برطرفشون کنم. یکی اینکه وقت لینکای شکسته رو چک میکنم برای لینکدین و...
۱۴۰۲/۰۵/۲۵
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.