HTML پایه و اساس صفحات وبه. بیا با هم اتربیوتهای مهم HTML رو که واسه سئوی خوب حیاتین کشف کنیم. کاربردشون و نحوه کدنویسیشون رو هم یاد میگیریم.
HTML یه زبان نشانهگذاریه که اساس بیشتر صفحات وب رو تشکیل میده.
میشه گفت یکی از اصلیترین بخشهای سئوی تکنیکاله.
متخصصای سئو با استفاده از المانهای HTML میتونن اطلاعات صفحه رو به کاربرا و رباتهای جستجو بفهمونن.
این کار کمک میکنه اهمیت، ماهیت و ترتیب محتوای صفحه، و همینطور ارتباطش با صفحات دیگه رو شفافتر کنیم.
اتربیوتهای HTML چی هستن؟
اتربیوتها اطلاعات اضافیای هستن که به المانهای HTML اضافه میشن. اونا داخل المان قرار میگیرن، مثل:
<link rel="canonical" href="https://www.example.com" />
اینا مقادیری هستن که واسه تغییر المان استفاده میشن و بهش زمینه بیشتری میدن.
تو مثال تگ HTML بالا، اتربیوت rel=”canonical” تگ لینک رو تغییر میده تا به رباتهای جستجو بگه این URL باید به عنوان نسخه اصلی یه مجموعه در نظر گرفته بشه.
فرمت اتربیوتهای HTML
اتربیوتهای HTML از یه اسم و یه مقدار تشکیل شدن.
مثلاً وقتی داریم یه تصویر رو تعریف میکنیم، از اسم “src” استفاده میکنیم و مقدارش اسم فایل تصویره. اتربیوت “alt” هم یه متن جایگزین مشخص میکنه که اگه تصویر نشون داده نشد، نمایش داده بشه.
<img src=”ginger-cat.jpg” alt=”گربه نارنجی روی درخت”>
انواع اتربیوتهای HTML
اتربیوتها معمولاً به چهار دسته تقسیم میشن: ضروری (required)، اختیاری (optional)، استاندارد (standard) یا رویداد (event).
اتربیوتهای ضروری اونایی هستن که اگه تو یه تگ نباشن، اون تگ درست کار نمیکنه.
اتربیوتهای اختیاری، همونطور که از اسمشون پیداست، واسه کار کردن تگ لازم نیستن ولی میتونن واسه مشخص کردن اطلاعات یا رفتار اضافی اون تگ استفاده بشن.
بعضی اتربیوتها هستن که میشه با بیشتر المانهای HTML ازشون استفاده کرد، و بعضیها خیلی خاصن.
مثلاً از اتربیوت “style” میشه واسه تعریف ظاهر یه المان مثل رنگ یا اندازه فونت استفاده کرد. به این اتربیوتهای عمومی، اتربیوتهای “استاندارد” یا “جهانی (global)” میگن.
اتربیوتهای دیگهای هم هستن که فقط با المانهای خاصی میشه ازشون استفاده کرد. معمولاً اونایی که واسه سئو استفاده میشن، تگ لینک رو تغییر میدن. المانهایی مثل “rel” و “hreflang” از این دست هستن.
اتربیوتهای رویداد به یه المان اضافه میشن تا مشخص کنن اون المان در پاسخ به اعمال خاصی مثل حرکت موس روی یه دکمه چطور باید رفتار کنه. این اتربیوتها تعریف میکنن که یه تابع چطور باید اجرا بشه.
مثلاً اتربیوت “onclick” مشخص میکنه که وقتی کاربر روی یه دکمه کلیک میکنه، یه تابع جاوااسکریپت باید چیکار کنه. این اتربیوتها به توسعهدهندهها اجازه میدن صفحات تعاملیتری از تگهای HTML بسازن.
چرا اتربیوتهای HTML مهمن
اتربیوتهای HTML مهمن چون به توسعهدهندهها اجازه میدن زمینه و عملکرد بیشتری به وبسایتها اضافه کنن.
اونا مخصوصاً واسه سئو مهمن چون زمینه لازم رو به تگها میدن. تو هدایت رباتهای جستجو واسه خزیدن و سرو کردن صفحات وب خیلی مهمن.
اتربیوتها به ما اجازه میدن به راحتی از دنبال کردن بعضی لینکها جلوگیری کنیم، یا مشخص کنیم کدوم صفحات از یه مجموعه باید به کاربرایی که تو کشورهای مختلف هستن یا از زبونهای دیگه استفاده میکنن نشون داده بشن.
اونا به ما اجازه میدن به راحتی مشخص کنیم که یه صفحه نباید ایندکس بشه. خیلی از عناصر اساسی سئوی تکنیکال در واقع از طریق اتربیوتهای HTML کنترل میشن.
اتربیوتهای رایج که تو سئو استفاده میشن
1. اتربیوت Name
اتربیوت name با تگ <meta> استفاده میشه.
در اصل یه راهیه واسه مشخص کردن این که آیا اطلاعات بعدی به رباتهایی که ممکنه از صفحه بازدید کنن مربوط میشه یا نه.
مثلاً، اگه <meta name=”robots” content=”noindex” /> رو بذاریم یعنی همه رباتها باید به دستور “noindex” توجه کنن.
اغلب بهش “تگ متای robots” میگن.
اگه از <meta name=”googlebot” content=”noindex” /> استفاده بشه، فقط ربات گوگل باید به دستور “noindex” توجه کنه.
این یه راه خوبه واسه دادن دستور به بعضی رباتهای جستجو که واسه همه لازم نیست.
2. اتربیوت Noindex
اتربیوت “noindex” یکی از اتربیوتهای رایج تو سئوئه.
اغلب بهش “تگ noindex” میگن، ولی دقیقتر اینه که بگیم یه اتربیوت از تگ <meta> هست.
شکلش اینجوریه:
<meta name="robots" content="noindex" />
این تیکه کد به صاحبین وب سایت ها اجازه میده تعیین کنن چه محتوایی میتونه تو ایندکس موتور جستجو قرار بگیره.
با اضافه کردن اتربیوت “noindex”، در واقع داری به موتور جستجو میگی که نمیتونه از این صفحه تو ایندکسش استفاده کنه.
این وقتی مفیده که محتوای حساسی داری که نمیخوای از طریق جستجوی ارگانیک در دسترس باشه. مثلاً، اگه بخشهایی از سایتت داری که فقط باید واسه اعضای VIP قابل دسترسی باشه، اجازه دادن این محتوا به ایندکسهای جستجو میتونه باعث بشه بدون لاگین کردن هم بهش دسترسی پیدا کنن.
واسه اینکه دستور “noindex” دنبال بشه، باید خونده بشه. یعنی رباتهای جستجو باید بتونن به صفحه دسترسی پیدا کنن تا کد HTML که حاوی این دستوره رو بخونن.
پس مواظب باش رباتها رو از دسترسی به صفحه تو فایل robots.txt بلاک نکنی.
3. اتربیوت Description
اتربیوت description، که بیشتر به عنوان “متا description” شناخته میشه، با تگ <meta> استفاده میشه.
محتوای این تگ تو SERPها زیر محتوای تگ <title> استفاده میشه.
این به ناشرا اجازه میده محتوای صفحه رو طوری خلاصه کنن که به جستجوگرا کمک کنه تشخیص بدن آیا صفحه نیازهاشون رو برآورده میکنه یا نه.
این اتربیوت رو رتبه صفحه تأثیر نمیذاره ولی میتونه به تشویق کلیک از نتایج جستجو به صفحه کمک کنه.
مهمه که بدونی تو خیلی موارد، گوگل محتوای اتربیوت description رو نادیده میگیره و به جاش از توضیح خودش تو نتایج جستجو استفاده میکنه.
میتونی اینجا بیشتر درباره بهینهسازی اتربیوتهای description بخونی.
4. اتربیوت Href
به عنوان متخصصای سئو، ما وقت زیادی رو صرف دنبال کردن لینکها میکنیم.
ولی میدونی یه لینک چطور ساختار داره و چرا بعضی لینکها ارزش بیشتری از بقیه دارن؟
یه هایپرلینک استاندارد در اصل یه تگ <a> هست.
فرمتش اینجوریه:
<a href=”www.example.com”>انکر تکست لینک اینجا میاد</a>
تگ <a> نشون میده که این یه لینکه.
اتربیوت href= مقصد لینک رو مشخص میکنه (یعنی به کدوم صفحه لینک میده).
متنی که بین تگ باز <a> و تگ بسته </a> میاد، انکر تکسته.
این متنیه که کاربر رو صفحه میبینه و قابل کلیک به نظر میاد.
این واسه لینکهای قابل کلیکی استفاده میشه که تو <body> صفحه میان.
تگ <link> واسه لینک دادن یه منبع به یه منبع دیگه استفاده میشه و تو <head> صفحه میاد.
این لینکها هایپرلینک نیستن، قابل کلیک نیستن. اونا رابطه بین اسناد وب رو نشون میدن.
5. اتربیوتهای rel=”nofollow”، rel=”ugc” و rel=”sponsored”
اتربیوت rel=”nofollow” به رباتها میگه که URL داخل اتربیوت href رو نمیتونن دنبال کنن.
استفاده از اتربیوت rel=”nofollow” رو توانایی کاربر انسانی واسه کلیک کردن رو لینک و رفتن به یه صفحه دیگه تأثیر نمیذاره. فقط رو رباتها تأثیر داره.
این تو سئو استفاده میشه تا از بازدید موتورهای جستجو از یه صفحه جلوگیری بشه یا از نسبت دادن هر مزیتی که یه صفحه با لینک دادن به یه صفحه دیگه میده جلوگیری بشه.
میشه گفت این کار لینک رو از دیدگاه سنتی سئو در لینکسازی بیفایده میکنه، چون اعتبار لینک از طریق لینک منتقل نمیشه.
البته هنوز میتونه یه لینک مفید باشه اگه باعث بشه بازدیدکنندهها صفحه لینک شده رو ببینن!
ناشرا میتونن از اتربیوت “nofollow” استفاده کنن تا به موتورهای جستجو کمک کنن تشخیص بدن کی یه صفحه لینک شده نتیجه همکاری اسپانسرها با شماست، مثل یه تبلیغ.
این میتونه از مشکلات مربوط به جریمههای ناشی از لینک ها جلوگیری کنه، چون ناشر داره اعتراف میکنه که لینک نتیجه یه معامله مشروعه و نه تلاشی واسه دستکاری رتبهها.
اتربیوت rel=”nofollow” رو میشه به صورت تک لینکی اینجوری استفاده کرد:
<a href=www.example.com rel=”nofollow”>انکر تکست لینک اینجا میاد</a>
یا میتونه واسه تبدیل همه لینکهای یه صفحه به “nofollow” تو <head> استفاده بشه، مثل اینکه اتربیوت “noindex” استفاده میشه:
<meta name=”robots” content=”nofollow” />
میتونی اینجا بیشتر درباره اتربیوت rel=”nofollow” بخونی.
6. چطور گوگل از اتربیوت rel=”nofollow” استفاده میکنه
تو سال 2019، گوگل تغییراتی رو تو نحوه استفاده از اتربیوت “nofollow” اعلام کرد.
این شامل معرفی چندتا اتربیوت اضافی بود که میشد به جای “nofollow” استفاده کرد تا رابطه لینک با صفحه هدفش رو بهتر بیان کنه.
این اتربیوتهای جدیدتر rel=”ugc” و rel=”sponsored” هستن.
قراره ازشون استفاده بشه تا به گوگل کمک کنن بفهمه کی یه ناشر میخواد صفحه هدف واسه اهداف رتبهبندی نادیده گرفته بشه.
اتربیوت rel=”sponsored” واسه شناسایی وقتیه که یه لینک نتیجه یه معامله پولیه مثل یه تبلیغ یا اسپانسر. اتربیوت rel=”ugc” واسه شناسایی وقتیه که یه لینک از طریق محتوای تولید شده توسط کاربر (UGC) مثل یه انجمن اضافه شده.
گوگل اعلام کرد که اینها و اتربیوت “nofollow” فقط به عنوان اشاره در نظر گرفته میشن.
در حالی که قبلاً، اتربیوت “nofollow” باعث میشد Googlebot لینک مشخص شده رو نادیده بگیره، الان این اشاره رو در نظر میگیره ولی ممکنه هنوز باهاش طوری رفتار کنه که انگار “nofollow” وجود نداره.
اینجا میتونی بیشتر درباره این اعلامیه و اینکه چطور پیادهسازی اتربیوت rel=”nofollow” رو تغییر میده بخونی.
7. اتربیوت Hreflang
هدف اتربیوت hreflang اینه که به ناشرایی که سایتهاشون همون محتوا رو به چند زبون نشون میدن کمک کنه.
به موتورهای جستجو نشون میده که کدوم نسخه از صفحه باید به کاربرا نشون داده بشه تا بتونن به زبون مورد علاقشون بخوننش.
اتربیوت hreflang با تگ <link> استفاده میشه. این اتربیوت زبون محتوای URL لینک شده رو مشخص میکنه.
تو <head> صفحه استفاده میشه و فرمتش اینجوریه:
<link rel="alternate" href="https://example.com" hreflang="en-gb" />
به چند قسمت تقسیم میشه:
- rel=”alternate”، که پیشنهاد میکنه صفحه، یه صفحه جایگزین مرتبط داره.
- اتربیوت href= مشخص میکنه به کدوم URL لینک داده شده.
- کد زبون یه علامت دو حرفیه که به رباتهای جستجو میگه صفحه لینک شده به چه زبونی نوشته شده. این دو حرف از یه لیست استاندارد به نام کدهای ISO 639-1 گرفته میشن.
اتربیوت hreflang میتونه تو هدر HTTP واسه اسنادی که HTML نیستن (مثل PDF) یا تو نقشه سایت XML وبسایت هم استفاده بشه.
8. اتربیوت Canonical
اتربیوت rel=”canonical” از تگ link به متخصصای سئو اجازه میده مشخص کنن کدوم صفحه دیگه رو یه وبسایت یا یه دامنه دیگه باید به عنوان نسخه اصلی در نظر گرفته بشه.
اینکه یه صفحه نسخه اصلی باشه یعنی صفحه اصلیه، که ممکنه بقیه کپیهاش باشن.
از نظر موتور جستجو، این نشون میده که این صفحهایه که یه ناشر میخواد به عنوان صفحه اصلی رتبهبندی بشه، و کپیها نباید رتبهبندی بشن.
اتربیوت canonical اینجوری به نظر میاد:
<link rel="canonical" href="https://www.example.com/" />
این کد باید تو <head> صفحه بشینه. صفحه وبی که بعد از “href=” میاد باید صفحهای باشه که میخوای رباتهای جستجو به عنوان صفحه اصلی در نظر بگیرن.
این تگ تو موقعیتهایی مفیده که دو یا چند صفحه ممکنه محتوای یکسان یا تقریباً یکسانی داشته باشن.
9. کاربردهای اتربیوت Canonical
ممکنه وبسایت طوری راهاندازی شده باشه که این واسه کاربرا مفید باشه، مثل یه صفحه لیست محصول تو یه سایت فروشگاهی.
مثلاً، صفحه اصلی دستهبندی واسه یه سری محصول، مثل “کفشها”، ممکنه متن، هدرها و عنوان صفحهای داشته باشه که درباره “کفشها” نوشته شده.
اگه یه کاربر رو یه فیلتر کلیک کنه تا فقط کفشهای قهوهای سایز 8 رو نشون بده، URL ممکنه تغییر کنه ولی متن، هدرها و عنوان صفحه ممکنه همون صفحه “کفشها” باقی بمونه.
این باعث میشه دو تا صفحه داشته باشیم که به جز لیست محصولاتی که نشون میدن، یکسانن.
تو این حالت، صاحب وبسایت ممکنه بخواد یه تگ canonical رو صفحه “کفشهای قهوهای سایز 8” بذاره که به صفحه “کفشها” اشاره کنه.
این به موتورهای جستجو کمک میکنه بفهمن که صفحه “کفشهای قهوهای سایز 8” نیازی به رتبهبندی نداره، در حالی که صفحه “کفشها” از این دو تا مهمتره و باید رتبهبندی بشه.
مشکلات اتربیوت Canonical
مهمه که بدونی موتورهای جستجو فقط از اتربیوت canonical به عنوان یه راهنما استفاده میکنن، چیزی نیست که حتماً باید دنبالش کنن.
خیلی موارد هست که اتربیوت canonical نادیده گرفته میشه و یه صفحه دیگه به عنوان نسخه اصلی مجموعه انتخاب میشه.
اینجا میتونی بیشتر درباره استفاده درست از اتربیوت canonical بخونی.
10. اتربیوت Src
اتربیوت src= واسه اشاره به محل تصویری که قراره تو صفحه نمایش داده بشه استفاده میشه.
اگه تصویر رو همون دامنهای باشه که قراره توش نمایش داده بشه، میشه از یه URL نسبی (فقط قسمت آخر URL، نه دامنه) استفاده کرد.
اگه قراره تصویر از یه وبسایت دیگه گرفته بشه، باید از URL مطلق (کامل) استفاده بشه.
اگرچه این اتربیوت هیچ هدف سئویی نداره، ولی واسه کار کردن تگ image لازمه.
11. اتربیوت Alt
مثال تگ تصویر بالا یه اتربیوت دوم هم داره، اتربیوت alt=.
این اتربیوت واسه مشخص کردن متن جایگزینی استفاده میشه که اگه تصویر نتونه نمایش داده بشه، باید نشون داده بشه.
اتربیوت alt= یه عنصر ضروری از تگ <img> هست، باید وجود داشته باشه، ولی اگه هیچ متن جایگزینی نمیخوایم میتونه خالی باشه.
استفاده از کلمات کلیدی تو اتربیوت alt= تصویر یه سری مزایا داره. موتورهای جستجو نمیتونن با دقت تشخیص بدن یه تصویر چیه.
پیشرفتهای زیادی تو توانایی موتورهای جستجوی اصلی واسه شناسایی محتوای یه عکس شده. ولی اون تکنولوژی هنوز خیلی از کامل بودن دوره.
به همین خاطر، موتورهای جستجو از متن تو اتربیوت alt= استفاده میکنن تا بهتر بفهمن تصویر چیه.
از زبونی استفاده کن که به تقویت ارتباط تصویر با موضوع صفحه کمک کنه.
این میتونه به موتورهای جستجو کمک کنه ارتباط اون صفحه رو با عبارتهای جستجو تشخیص بدن.
خیلی مهمه که یادت باشه این دلیل اصلی اتربیوت alt= نیست.
این متن توسط صفحهخوانها و تکنولوژیهای کمکی استفاده میشه تا به کسایی که از این تکنولوژی استفاده میکنن کمک کنه محتوای تصویر رو بفهمن.
اتربیوت alt= باید اول و مهمتر از همه واسه دسترسپذیر کردن وبسایتها واسه کسایی که از این تکنولوژی استفاده میکنن در نظر گرفته بشه. این نباید واسه اهداف سئو فدا بشه.
اینجا میتونی بیشتر درباره بهینهسازی تصاویر بخونی.
هرچی بیشتر درباره ساخت صفحات وب بدونی، بهتره
این راهنما یه معرفی به اتربیوتهای اصلی تگ HTML بود که ممکنه تو دنیای سئو بشنوی.
البته اتربیوتهای خیلی بیشتری هستن که واسه ساختن یه صفحه وب کارآمد، قابل خزش و قابل ایندکس شدن به کار میرن.
همپوشانی بین مهارتهای سئو و توسعه خیلی زیاده.
به عنوان یه متخصص سئو، هرچی بیشتر درباره نحوه ساخت صفحات وب بدونی، بهتره.
اگه میخوای بیشتر درباره HTML و اتربیوتهای تگی که باهاش در دسترس هستن یاد بگیری، شاید از منبعی مثل W3Schools خوشت بیاد.