افزایش سئو با استفاده از area role در html5

دستورات html این امکان رو به برنامه نویسان و توسعه دهندگان نمیده که بتونن بخش های مختلفی رو که ایجاد میکنند توصیف کنند و یا روابط بین بخش های مختلف رو مشخص کنند , ممکنه این روابط و توصیف ها بدرد کسانی که میان و محتوای سایت ما رو مطالعه میکنند نخوره یا اصلا متوجه چنین قابلیتی توی صفحات ما نشن اما موتورهای جستجوگر از قبیل گوگل و یاهو و بینگ و … علاقه خواصی به این توصیفات و روابط دارند!

روابط بین بخش های مختلف صفحه یا المان های  (elements) مختلف رو با استفاده از دستوراتی به نام ARIA میتوان مشخص کرد. دستورات ARIA خودشون باز به چند بخش مختلف تقسیم میشن که مهمترین دستوراتش شامل role و aria-labelledby هستند اما دستورات دیگه ای هم دارند که در پست های اینده به شما ارائه خواهیم داد. فعلا دو دستور role و aria-labelledby رو در اینجا بررسی میکنیم:

کاربرد role چیه و چجوری باید ازش استفاده کرد؟

در هنگام ایجاد یک صفحه بخش هایی رو برای صفحه خودمون در نظر میگیریم که این بخش ها به صورت کلی جزو یکی از دسته بندی های زیر خواهند بود:

هدر (header) : هدر صفحه متعلق به کل صفحات است و هرچیزی که درون اون درج میشه به طریقی به کل سایت مربوط خواهد شد (تنها به یک صفحه خاص تعلق نداره بلکه به کل سایت تعلق داره و در همه یا بیشتر صفحات وجود داره).

محتوا (content) : محتوای صفحه جایی از صفحه است که پست های روزانه ما درون اون قرار میگیره و بیشتر از یکبار در صفحه تکرار نمیشه (مثلا ما یک تگ div برای محتوای خودمون در نظر میگیرم و همه محتوا رو درون اون درج میکنیم).

مکانیابی (navigation) : مکانیابی در اینجا منظور قسمتی است که شامل لیستی از لینک ها به صفحات مختلف یا موضوعات مختلف سایت است.

موارد تکمیلی یا ابزارهای اظافی (complementry) : قسمت های تکمیلی یا ابزارهای اظافی شامل بخش هایی میشه که یک سری موارد اظافی توش قرار دادیم تا کار برای کاربر ساده تر بشه ,به عنوان مثال یکی از این ابزار های اظافی میتونه قسمت جستجو (search) سایت باشه.

توضیحات سایت (contentinfo) : همه ی ما توی سایت خودمون و بیشتر در پایین سایت یه بخشی داریم که در مورد سایت توضیحاتی داریم و قوانین کپی کردن و تاریخ تاسیس سایت رو توش درج میکنیم , به این قسمت توضیحات سایت گفته می شود.

فرم ها (forms) : شامل فرم ها یا قسمت هایی می شود که منتظریم تا توسط کاربر کامل شود یا یک داده (data) رو از کاربر دریافت کنیم.

جستجو (search) : شامل قسمت جستجو درون سایت می شود.

برنامه (application) : قسمتی از صفحه است که کاربران میتونن ازش به عنوان یک نرم افزار انلاین یا چیزی شبیه به یک نرم افزار استفاده کنند. (ممکنه توی سایت شما وجود نداشته باشه یا اصلا چنین قسمتی رو برای سایتتون در نظر نگرفته باشید)

خب حالا مواردی که در بالا توضیح داده شد رو به صورت تصویری درون عکس زیر مشاهده کنید:

landmark-roles-example

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

مقدار role در هر بخش برابر با واژه ی لاتینی است که درون اون درج شده. به مثال زیر دقت کنید:

در مثال بالا براتون یه صفحه html ساختم و بخش های مختلفش رو با استفاده از role توصیف کردم. دقت کنید که یک بخش ممکنه براتون سردرگمی به وجود بیاره مثلا قسمت فرم جستجو رو میتونید form یا search نامگذاری کنید . باید اون چیزی رو استفاده کنید که مفهوم رو بهتر میرسونه.

اگه بخواید یک متن رو به عنوان توصیفی برای یک بخش استفاده کنید باید از دستور aria-labelledby کمک بگیرید , این دستور ساده تر از role است , به مثال زیر دقت کنید:

در مثال بالا ابتدا یک تگ h1 ساختیم و یک id براش در نظر گرفتیم و در مرحله بعد اومدیم با استفاده از این  id متن درون h1 رو به عنوان توصیفی برای محتوای درون تگ div در نظر گرفتیم.

دوستان عزیز امیدوارم از این پست لذت برده باشید و اون رو توی پروژه های بعدی خودتون استفاده کنید تا شاهد درصد بیشتری در SEO سایتتون باشید 😀

کسانی که سوال دارند از بخش نظرات مطرح کنند.

به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK
  1. پیمان

    مثل همیشه عالی.
    از مطالب سئو هم بزارید تو وب سایتتون دمت گرم

  2. مهرداد

    سلام و ممنون برای مطلب خوبتون
    ی سوال داشتم. توی بعضی از جاها مثل تلگرام و فیسبوک وقتی لینک بعضی سایت ها رو پیست میکنیم بطور خودکار تصویر لوگوی سایت نمایش داده میشه. منم میخوام وقتی آدرس سایتم رو توی مثلا تلگرام سند میکنم، تصویر لوگوی سایت یا آیکون سایت نمایش داده بشه. باید از چه کدی استفاده کنم؟

    • سلام. شما باید توی سایت خودتون از تگ meta استفاده کنید و یه عکس بهش معرفی کنید. نحوه ی کار به صورت زیر خواهد بود:

می‌خواهید دیدگاهتان را بیان کنید؟