آموزش طراحی سایتآموزش HTML

تگ iframe در HTML

تگ iframe چیست؟ برای ایجاد یک فریم در HTML5 باید از چه تگی استفاده کنیم؟ برای اشتراک گذاری صفحات خارجی در وب سایتمان می‌بایست از چه تگی استفاده کنیم؟ آیا استفاده از iframe در سئو جدید تاثیر منفی دارد؟ چگونه ویدیو های آپارات و یوتیوب را در صفحات وب سایتمان نمایش دهیم؟

تگ iframe

در مقاله قبلی با تگ frame و frameset آشنا شدیم‌ و گفتیم که در HTML5 نمی‌توانیم از این تگ‌ها استفاده کنیم. حالا برای ساخت فریم در HTML5 می‌بایست از تگ iframe استفاده کنیم که در این مقاله با این تگ و خصوصیاتش آشنا می‌شویم.

از iframe برای تقسیم صفحه وب به چندین بخش جدا استفاده می‌شود. هر بخش می تواند یک سند html جداگانه را نمایش دهد. یک مجموعه iframe در یک صفحه به عنوان فریم ست(frameset) شناخته می‌شود. در این حالت معمولا صفحه به چندین فریم تقسیم شده است که مانند یک جدول براساس ردیف ها و ستون ها سازماندهی شده‌اند.

همچنین شما می‌توانید با استفاده از تگ iframe از سایت های اشتراک فیلم و ویدیو نیز استفاده و فیلم ها و ویدیو ها را در وب سایت خود به اشتراک بزارید. اصطلاحا به این کار Embed نیز می‌گویند.

معایب استفاده از فریم ها

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

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

خواص تگ Iframe

خاصیتمقدارتوضیح
alignleft
right
top
middle
bottom
این خاصیت در HTML5 پشتیبانی نمی‌شود.

این خاصیت برای تعیین موقعیت مکانی تگ <iframe> در صفحه می‌باشد.

frameborder1

0

این خاصیت در HTML5 پشتیبانی نمی‌شود.

مشخص می‌کند حاشیه دور فریم ایجاد شده قرار گیرد یا خیر.

heightپیکسلاین خاصیت ارتفاع فریم را مشخص می‌کند.
longdescURL – لینکاین خاصیت در HTML5 پشتیبانی نمی‌شود.

یک صفحه که توضیحات کاملی در رابطه با فریم ایجاد می‌کند.

marginheightپیکسلاین خاصیت در HTML5 پشتیبانی نمی‌شود.

این خاصیت مشخص می‌کند که از بالا و پایین چه فاصله ای برای فریم باید ایجاد کنیم.

marginwidthپیکسلاین خاصیت در HTML5 پشتیبانی نمی‌شود.

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

nameمتننامی برای فریم مشخص می‌کند.
sandboxallow-forms
allow-pointer-lock
allow-popups
allow-same-origin
allow-scripts
allow-top-navigation
این خاصیت محدودیت‌های اضافه‌ای را برای فریم ما مشخص می‌کند.
scrollingyes
no
auto
این خاصیت در HTML5 پشتیبانی نمی‌شود.

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

srcURL – لینکاین خاصیت می‌تونیم بگیم مهمترین خاصیت تگ iframe هست چون در این خاصیت لینک صفحه مربوط به فریم را قرار می‌دهیم.
srcdocکد‌های HTMLکد‌های HTML که در فریم ما می‌توانند اجرا شوند.
widthپیکسلاین خاصیت عرض فریم را مشخص می‌کند.

همانطور که مشاهده می‌کنید بیشتر خاصیت‌هایی که مربوط به استایل‌دهی می‌باشد از خاصیت های پشتیبانی شده HTML5 تگ <iframe> حذف شده‌اند؛ این خاصیت ها به عنوان ویژگی در CSS موجود است که با آن‌ها در آموزش CSS آشنا می‌شوید.

تاثیرات تگ <iframe> در سئو

تاثیر iframe در SEO
تاثیر iframe در SEO

تا همین چند سال پیش استفاده از iframe در صفحات برای نمایش ویدیو های سایت های اشتراک ویدیو و صفحات خارجی به عنوان امتیاز منفی در سئو شناخته می‌شد و استفاده از آن توصیه نمی‌شد.

با تغییر الگوریتم ها و متد های گوگل از این پس دیگر iframe هیچ تاثیری در سئو صفحات شما ندارد. به این صورت که در پیمایش ربات های گوگل از خواندن تگ iframe چشم پوشی می‌شود و ملاک ارزش گذاری وب سایت شما نخواهد بود.

نمونه کد iframe

نمونه ای از کد iframe که یک صفحه را نمایش می‌دهد و همچنین از خاصیت‌های فعال نیز سعی شده استفاده شود. اگر توجه کنید عرض این iframe به صورت 100% تنظیم شده که این باعث می‌شود که در صفحه نمایش های مختلف به صورت خودکار عرض فریم تنظیم شود.

<!DOCTYPE html>
<html>
<body>

<h2>Iframe - Target for a Link</h2>

<iframe height="300px" width="100%" src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">Mizfa.com - Ali Esmaeili HTML Tutorial</a></p>

</body>
</html>
خروجی نمونه iframe
خروجی نمونه iframe

نتیجه گیری

  • این تگ دارای معایبیست که عدم تسلط به css می‌تواند باعث باگ‌های mobile friendly شود.
  • خاصیت های خاص خودش را دارد.
  • تاثیری در سئو وب سایت ندارد.

امیدوارم از این مقاله استفاده کافی را برده باشید. اگر سوالی داشتید حتما بپرسید همیشه آماده پاسخگویی به شما هستیم. این فصل هم تموم شد – تا فصل بعدی…

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

نوشته های مشابه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر