چهارشنبه ۱۲ بهمن ۱۴۰۱

Wednesday, February 1, 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 مطالب بیشتر:
نحوه متحرک ساختن متن با تگ marquee در 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
1 × 1
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
علی رستگار
سلام خسته نباشید با تشکر از سایت خوبتون. من میخوام منوی سایت رو به صورت کامل از دید گوگل مخفی کنم، در حال حاضر...
۱۴۰۱/۱۱/۱۱

m.b
با سلام و خسته نباشید من یک سوال دارم . تو فرم لاگین بعد از لاگین کردن کاربر میخوام تاریخ و ساعت آخرین زمان...
۱۴۰۱/۱۱/۰۶

سینا
با سلام و درود من چهار تا داده به شیوه زیر دارم میخوام با php کوچکترین تاریخ هر دو کاربر ۲ و ۳...
۱۴۰۱/۱۱/۰۶

امیرحسین رستمی
سلام وقت بخیر یه همچین ارایه ای داریم میخوام همه حالت های حروفو بدست بیارم مثل بازی کلماتیک که هر حرف دوبار تکرار نشه...
۱۴۰۱/۱۱/۰۵

Ⲥⲅⲇⲍⲩ ⲃⲟⲩ
اینم لینک مستقیمش حتی لطفا خودتون با این لینک یا هر لینک آهنگ درست کنید بزارین ببینم
۱۴۰۱/۱۱/۰۵

Ⲥⲅⲇⲍⲩ ⲃⲟⲩ
هر چی میزارم رو پخش خودکار ولی تا وقتی روش کلیک نکنی پخش نمیشه چرا؟؟ رو اتو پلیِ ! هزارتا راهو روش رو رفتم جواب...
۱۴۰۱/۱۱/۰۵

نور
سلام این کد ابتدای وبلاگه منه چطور میتونم به آدرس لینکی که توش میشه تغییرات کد رنگ ها رو انجام داد دسترسی پیدا...
۱۴۰۱/۱۱/۰۴

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

پــــرتو
سلام جناب خسته نباشید شاید این سوالم تکراری باشه ولی خب راستش نمیدونم سوالمو کجا ثبت کردم واسه همین دوباره می پرسم ببخشید...
۱۴۰۱/۱۱/۰۳

پژمان
با سلام من یک سوال دارم می خواستم ببینم چطور میشه وقتی صفحات سایت عوض می شن هدر و فوتر ثابت بمونه و فقط محتویات...
۱۴۰۱/۱۱/۰۱

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

سینا
با سلام و درود من یه کد نوشتم که برای id های پشت سر هم جواب میده و زمان رو برام تغییر میده وقتی...
۱۴۰۱/۱۰/۲۹

سینا
باسلام مجدد و درود برشما واسه مطالب جدید راحته آخرین مطلب رو با کوئری زدن توی دیتابیس پیدا کنم و برای مطلب بعدش آپدیت...
۱۴۰۱/۱۰/۲۸

سینا
با تشکر از شما استاد بزرگوارم اینو شب تست می کنم من واسه آپدیت کردن تایم لازم دارم توضیح کامل به اینصورت: واسه...
۱۴۰۱/۱۰/۲۷

سینا
با سلام و درود بر شما راهی هست توی mysql من داده های یک جدول رو که عددی هستند به صورت زیر آپدیت کنم!...
۱۴۰۱/۱۰/۲۶

علی داوری
سلام. چطور از فایل های داخلی کامپیوتر برای آیکون سایت استفاده کنیم؟ مسیر عکسو تو href کپی میکنم اتفاقی نمیفته
۱۴۰۱/۱۰/۲۴

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

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

سینا
با سلام و خسته نباشید من یه صفحه دارم مثلا اول یه متنی رو echo می کنم رو وارد کنه با...
۱۴۰۱/۱۰/۲۱

ali
میخواستم حالت تصویر بدم بدون استفاده از list_style_image روشی هست بشه طراحی کرد
۱۴۰۱/۱۰/۲۰

محمد جواد
با سلام ... من میخوام اطلاعات محصولی که داخل دیتابیس mysql هست رو بجای ستونی ، ردیفی نمایش بدم برای نمایشش چطوری باید کد...
۱۴۰۱/۰۹/۲۷

کاربر
سلام هر کاری کردم جواب نداد
۱۴۰۱/۰۹/۲۳

پارسا
ببخشید چطور سایز هاشون و اندازه هاشون رو بزرگ تر کنیم ؟
۱۴۰۱/۰۹/۲۱

ابراهیم جهانگیری
حدود سه روز بود دنبال این مطلب بودم . ممنون از شما
۱۴۰۱/۰۹/۱۶

پــــرتو
سلام خسته نباشید ببخشید اگر بخایم همین منو رو بصورت عمودی بخایم انجامش بدیم باید از چه کدی استفاده کنیم و اگر بخایم برای قالبمون...
۱۴۰۱/۰۹/۱۵

میثم
بسیار سپاسگزار و ممنونم. واقعا عالی بود.
۱۴۰۱/۰۹/۱۵

میثم
ممنونم خیلی عالی بود. کلی محاسبات ریاضی انجام دادم :) اخرش یه شرط دیگه میخواست! حالا یه سوال: در حال حاضر بعد از...
۱۴۰۱/۰۹/۱۳
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.