این آموزش در تاریخ ۱۴۰۲/۰۶/۲۱ آپدیت شده است.
آموزش صفت Rel در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت Rel در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت Rel در HTML
صفت rel که مخفف RelationShip ( به فارسی یعنی رابطه ) می باشد، صفتی است که رابطه ی بین صفحه جاری و صفحه مقصد که بهش لینک شده، را مشخص میکند.
Free-Learn
عناصری که توسط این صفت پشتیبانی می شوند
این صفت را میتوان در عناصر/تگ های زیر بکار برد.
| <link> | <area> | <a> |
| <form> | ||
Free-Learn
مثال از صفت Rel در HTML
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
مثال شماره ۱ : استفاده در تگ a ( مثلا من رابطه اون لینک رو از نوع author مشخص کردم، یعنی دارم میگم در اون لینک اطلاعاتی درباره نویسنده می باشد )
|
1 2 3 4 5 |
<body> <a href="https://free-learn.ir/" rel="author">Sadegh Asadi</a> </body> |
مثال شماره ۲ : استفاده در تگ a – خب بصورت پیش فرض ربات های جستجوگر هر لینکی رو که ببینند میرن و بازش میکنن و در مجموع رهگیریش میکنن ( یعنی بصورت پیشفرض یک لینک فالو یا follow می باشد )
حال با استفاده از مقدار nofollow در صفت rel میتونیم بگیم که ای موتور جستجوگر جان مادرت این لینک رو دنبال نکن و کلا بیخیالش باش.
در اکثر سایت های اینترنتی وقتی شما میخوای بری تبلیغ بدی داخلشون ، اونا میگن لینک ها نوفالو یا nofollow هستن، این یعنی دارن به موتورهای جستجوگر میگن که سایت شما با سایت اونا ( که داخلش تبلیغ دادی ) هیچ رابطه ای نداره
ولی خب قطعا اگه بتونید لینک فالو در سایت های معتبر و پربازدید بگیرید خیلی میتونه برای سئوی سایتتون مفید باشه.
|
1 |
<a href="https://Test.com/" rel="nofollow">Test.com</a> |
مثال شماره ۳ : استفاده در تگ area
|
1 2 3 4 5 6 7 |
<body> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="files/sun.html" rel="alternate"> </map> </body> |
مثال شماره ۴ : استفاده در تگ link ( اتصال فایل CSS به فایل HTML )
|
1 2 3 |
<head> <link rel="stylesheet" href="files/mystyle.css"> </head> |
مثال شماره ۵ : استفاده در تگ form
|
1 2 3 4 5 6 7 |
<body> <form action="#" method="POST" rel="help"> <input type="input"> </form> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت rel در HTML پشتیبانی میکنند یا خیر.
| نام تگ | Chrome | Firefox | Opera | Safari | Edge |
| a | بله | بله | بله | بله | بله |
| area | بله | بله | بله | بله | بله |
| link | بله | بله | بله | بله | بله |
| form | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این صفت در HTML بصورت زیر می باشد.
|
1 2 3 4 |
<a rel="Value"> <area rel="Value"> <link rel="Value"> <form rel="Value"> |
Free-Learn
جدول مقادیر صفت Rel در HTML
در جدول زیر میتوانید، مقادیری را که میتوان در این صفت استفاده کرد مشاهده نمایید.
- برای تگ a
| مقدار | توضیح |
|---|---|
| alternate | مشخص کردن صفحات جایگزین ( مثلا صفحات چاپ یا صفحات ترجمه ) |
| author | مشخص کردن صفحه نویسنده |
| bookmark | مشخص کردن صفحه بوکمارک |
| external | مشخص میکنه صفحه که بهش لینک شده جزئی از صفحه فعلی نیست ( یعنی یه بخش خارجی و جدا شده می باشد ) |
| help | مشخص کردن صفحه راهنما ( مثلا راهنمای فلان چیز که به این صفحه لینک میشه ) |
| license | مشخص کردن صفحه لایسنس ( صفحه اطلاعات کپی رایت ) |
| next | مشخص کردن صفحه بعدی ( مرتبط با صفحه فعلی ) |
| prev | مشخص کردن صفحه قبلی ( مرتبط با صفحه فعلی ) |
| nofollow | نافالو کردن لینک ها ( موتورهای جستجوگر مثه گوگل دیگه این لینک هارو دنبال نمیکنن ) |
| noreferrer | از ارجاع شدن اون لینک جلوگیری میکنه ( مثلا وقتی شما از صفحه A وارد صفحه B بشید، خب صفحه A میشه صفحه ارجاع ، حال وقتی از noreferrer استفاده کنید دیگه غیرفعال میشه ) |
| noopener | جلوگیری از دسترسی لینک های خارجی به لینک و صفحه فعلی |
| search | مشخص کردن ابزارهای جستجو ( یعنی به صفحه ای که لینک میشه میگه در این صفحه چیزایی وجود داره که مربوط به جستجو می باشد ) |
| tag | مشخص کردن برچسب ها ( کلمات کلیدی ) ( یعنی به صفحه ای که لینک میشه میگه در این صفحه یسری برچسب یا کلمات کلیدی وجود داره ) |
- برای تگ area
| مقدار | توضیح |
|---|---|
| alternate | مشخص کردن صفحات جایگزین ( مثلا صفحات چاپ یا صفحات ترجمه ) |
| author | مشخص کردن صفحه نویسنده |
| bookmark | مشخص کردن صفحه بوکمارک |
| help | مشخص کردن صفحه راهنما ( مثلا راهنمای فلان چیز که به این صفحه لینک میشه ) |
| license | مشخص کردن صفحه لایسنس ( صفحه اطلاعات کپی رایت ) |
| next | مشخص کردن صفحه بعدی ( مرتبط با صفحه فعلی ) |
| prev | مشخص کردن صفحه قبلی ( مرتبط با صفحه فعلی ) |
| nofollow | نافالو کردن لینک ها ( موتورهای جستجوگر مثه گوگل دیگه این لینک هارو دنبال نمیکنن ) |
| noreferrer | از ارجاع شدن اون لینک جلوگیری میکنه ( مثلا وقتی شما از صفحه A وارد صفحه B بشید، خب صفحه A میشه صفحه ارجاع ، حال وقتی از noreferrer استفاده کنید دیگه غیرفعال میشه ) |
| prefetch | مشخص میکند که صفحه هدف ( که بهش لینک شده ) باید کش شده باشه |
| search | مشخص کردن ابزارهای جستجو ( یعنی به صفحه ای که لینک میشه میگه در این صفحه چیزایی وجود داره که مربوط به جستجو می باشد ) |
| tag | مشخص کردن برچسب ها ( کلمات کلیدی ) ( یعنی به صفحه ای که لینک میشه میگه در این صفحه یسری برچسب یا کلمات کلیدی وجود داره ) |
- برای تگ link
| مقدار | توضیح |
|---|---|
| alternate | مشخص کردن صفحات جایگزین ( مثلا صفحات چاپ یا صفحات ترجمه ) |
| author | مشخص کردن صفحه نویسنده |
| icon | برای مشخص کردن فاوآیکون صفحه ( مشاهده کنید ) |
| pingback | مشخص کردن صفحه پینگ بک ( PingBack ) |
| preconnect | مرورگر باید از پیش به منبع لینک شده متصل شود |
| prefetch | مرورگر باید از پیش منبع لینک شده را بارگیری و ذخیره کند |
| preload | مرورگر باید منبع لینک شده را در زمینه بارگیری و ذخیره کند ( باعث سرعت لود بالاتر میشه ) |
| stylesheet | برای مشخص کردن یا وارد کردن فایل CSS |
| help | مشخص کردن صفحه راهنما ( مثلا راهنمای فلان چیز که به این صفحه لینک میشه ) |
| license | مشخص کردن صفحه لایسنس ( صفحه اطلاعات کپی رایت ) |
| next | مشخص کردن صفحه بعدی ( مرتبط با صفحه فعلی ) |
| prev | مشخص کردن صفحه قبلی ( مرتبط با صفحه فعلی ) |
| search | مشخص کردن ابزارهای جستجو ( یعنی به صفحه ای که لینک میشه میگه در این صفحه چیزایی وجود داره که مربوط به جستجو می باشد ) |
- برای تگ form
| مقدار | توضیح |
|---|---|
| external | مشخص میکنه صفحه که بهش لینک شده جزئی از صفحه فعلی نیست ( یعنی یه بخش خارجی و جدا شده می باشد ) |
| help | مشخص کردن صفحه راهنما ( مثلا راهنمای فلان چیز که به این صفحه لینک میشه ) |
| license | مشخص کردن صفحه لایسنس ( صفحه اطلاعات کپی رایت ) |
| next | مشخص کردن صفحه بعدی ( مرتبط با صفحه فعلی ) |
| prev | مشخص کردن صفحه قبلی ( مرتبط با صفحه فعلی ) |
| noreferrer | از ارجاع شدن اون لینک جلوگیری میکنه ( مثلا وقتی شما از صفحه A وارد صفحه B بشید، خب صفحه A میشه صفحه ارجاع ، حال وقتی از noreferrer استفاده کنید دیگه غیرفعال میشه ) |
| nofollow | نافالو کردن لینک ها ( موتورهای جستجوگر مثه گوگل دیگه این لینک هارو دنبال نمیکنن ) |
| opener | اجازه دسترسی لینک های خارجی به لینک و صفحه فعلی |
| noopener | جلوگیری از دسترسی لینک های خارجی به لینک و صفحه فعلی |
| search | مشخص کردن ابزارهای جستجو ( یعنی به صفحه ای که لینک میشه میگه در این صفحه چیزایی وجود داره که مربوط به جستجو می باشد ) |
Free-Learn
نکات و توضیحات
- صفت rel در HTML هیچ ظاهر خاصی نداره ، یعنی چیزی که در مرورگر قابل مشاهده باشه وجود نداره، کاربردش فقط برای مرورگرها و موتورهای جستجوگر می باشد.
- این صفت فقط در صورتی عمل خواهد کرد که در تگ مورد نظر صفت href وجود داشته باشد.
- یک لینک خودش بطور پیشفرض follow ( قابل دنبال شدن توسط موتورهای جستجوگر ) می باشد، ولی خب اگه بخوایم اونو nofollow کنیم دیگه باید rel رو مشخص کنیم.
