مپ تگ map tag چیست؟

مسیریابی تصاویر با map tag

map tag چیست و بررسی مزایای تگ map

مپ تگ یا تگ مپ در سئو، نقشه ای است که میزان تگ ها و میزان پخش شدن آنها را نمایش میدهد مانند یک نقشه، همچنین map tag را برای موارد دیگری هم استفاده میکنند که در ادامه به تشریح آن میپردازیم.

در جالت کلی تر، تگ map یا مَپ تگ، تگی است که با استفاده از آن میتوان یک نقشه ی تصویری یا Image-Map را در یک صفحه وب ایجاد کرد.
نقشه تصویری : بطور کلی به یک عکس یا تصویر که دارای چندین نقطه قابل کلیک ( یعنی کاربر بتونه رو اون نقاط کلیک کنه ) باشد، نقشه تصویری گفته می شود.

image map tag

در واقع مسیردهی به بخش هایی از تصاویر است که میتوانیم بخش انتخاب شده از تصویر را هدایت کنیم به لینک یا جایی که مدنظرمان است. درواقع به تصویر نقشه ای داده میشود که map tag چندین المان دارد از جمله name و id که بتوان تصویر و نقشه را متصل کرد.

برای توصیف بهتر تصاویر و بهتر رساندن مفاهیم میتوانیم این تصاویر را به صورتی قابل شناسایی به کاربران و موتورهای جستجو باشد،و بتوانید جذب ترافیک داشته باشید ،درواقع شاید اینگونه باشد که map tag جایگزین تگ area باشد ولی کاربردهای مپ تگ بسیار بیشتر از area است ویک تگ استاندارد است که تمامی مرورگرها از آن پشتیبانی میکنند.

میتوان گفت که برای مشخص کردن بخشهای یک تصویر است، برای مثال فکر کنید در تصویر زیر که لوگوی وردپرس و پلاگین یواست سئو وجود دارد، و کاربر میخواد با کلیک روی هرکدام به صفحه مربوط به هرکدام برود، میتوانیم با map tag این تقسیم بندی را روی یک تصویر انجام دهیم، به نحوی که با کلیک روی لگوی وردپرس به آموزش سئو وردپرس برود و یا با کلیک روی لوگوی yoast به استفاده صحیح از افزونه یواست سئو  هدایت شود، شما میتوانید  با مشخص کردن این دو بخش و قابل کلیک کردن این بخشها ، هدایت کاربر به آن سمت را انجام دهید.

نحوه ایجاد map tag برای تصویر

ابتدا بعد از درج تصویر، تگ map را نیز اضافه میکنیم و نقاط مد نظرمان را با مختصات و طول و عرض جغرافیایی مشخص میکنیم، عنصر name در تگ map باید با id تصویر یکسان باشد تا قابل شناسایی باشد

 

Workplace

seoiran
مشخص کردن map tag در تصویر

نمایش مپ تگ map tag روی تصویر به صورت مربع

تکه کد مربوط به درج تصویر و استفاده از map tag 

<img usemap="#seoiran" src="image.jpg">

<map name="seoiran">
<area shape="square" coords="0,0,60,60" href="https://www.seoiran.com/">
<area shape="square" coords="80,80,200,150" href="">
</map>

در گذشته به جای map tag  از area  استفاده میکردیم که به دلیل استاندارد بودن map tag و پشتیبانی شدن در تمام مروگر ها جای area را گرفت

تفاوت map tag در Html4 و Html5  چیست و چه خصوصیاتی دارد؟

در html5 در تگ مپ از Id یا همان شناسه منحصر به فرد استفاده میشود که در سمت دیگر باید ID تگ مپ برابر باشد با خصیصه name در مپ تگ

در map tag خاصیت name  وجود دارد که به صورت زیر است

نام خصوصیت : name
مقدار خصوصیت : نام map

نکته : این دو خصوصیت هردو اجباری میباشند.

همچنین در Xhtml تفاوت هایی نسبت به Html وجود دارد ، مورد اول حذف خصوصیت name و جایگزین کردن id و مورد دوم نیز پشتیبانی از Event ها میباشد.

تگ area داخل map tag

تگ area با تمام خصوصیات خود زیرمجموعه ای مپ تگ است ، برخص از خصوصیات این تگ شامل alt ،coords ،download،href،hreflang،media،،rel ،shape ،target، Type میباشد که با تمامی آنها آشنا هستیم، مثلا خصوصیت Shape شکل ناحیه انتخابی را مشخص میکند مثلا دایره یا مربفع و.. باشد، که پس از آن coords  مختصات را مشخص میکند

نکته در صورتی که مقادیر تمامی خصوصیات تگ area را تکمیل نکنیم از مقادیر پیش فرض استفاده میکند

خلاصه

برای قابل کلیک کردن بخشی از تصویر و هدایت کردن آن به بخش دلخواه خودمان است ، پس از درج تصویر به ترتیب زیر میتوانید برای مسیردهی تصویر عمل کنید

  • از عنصرmap برای تعریف نقشه تصویر استفاده کنید
  • از عنصرarea برای تعریف مناطق قابل کلیک در نقشه استفاده کنید و مختصات محل قابل کلیک را به آن بدهید
  • برای مشخص کردن نقشه از ویژگی name عناصر  img کنید.

ایا map tag برای سئو مزیتی دارد؟ بله زمانی که کاربر طبق تصویر در گوگل جستجو میکند ، با کلیک روی map tag مشخص شده توسط ما به مقصدی که ما مشخص کرده ایم هدایت شده است ، مزیت دیگر نیز crawl کردن خزنده ها وموتورهای جستجو میباشد.

چگونه میتوانم map tag برای تصویر آپلود شده را ایجاد کنیم؟

با کمک مختصات طول و عرضی میشود این کار را انجام داد ولی ممکن است برای عده ای از کاربران کمی سخت باشد، برای راحتی شما کاربران گرامی ما سایت https://www.image-map.net  را معرفی میکنیم که به صورت آنلاین میتوانید بعد از آپلود تصویر در این سایت ، لینک مدنظر را وارد کنید . بعد شکل مدنظرتان را وارد کنید.

افزونه یواستوردپرس سئو

 

4.7/5 - (11 امتیاز)
79 / 100

10 Comments

  1. مهدی یراحی گفت:

    بهترین مقاله ی فارسی در مورد map tag بود
    در حد ایران نبود
    ممنون از تیم سئو ایران

  2. mr-nima گفت:

    مپ تگ چجوری روی سئو تاثیر میذاره؟ یعنی منطقش چیه رو چه حسابی این کار را انجام می دهد؟

  3. نازنین گفت:

    مپ تگ چه فرقی با سایت مپ داره؟ انگاه دوتاشون یه کار میکنن

  4. پانته آ رستگار گفت:

    مپ تگ برای عکس استفاده میشه فقط؟

  5. انصاری فرد گفت:

    مپ تگ منظور ایجاد لوکیشن هست؟

  6. طاها گفت:

    این تگ هایی که نوشتیدُ خودمون باید اضافه کنیم؟ یا افزونه باید داشته باشیم؟

  7. محمدرضا گفت:

    منظور از مسیر دهی به عکس چیست؟

  8. ساحل گفت:

    از سایت image-map کد دریافت کنیم؟ کجا باید قرارش بدیم؟

  9. گلی خلیفه گفت:

    سلام
    سوال های بالا سوالات منم هست
    ولی متاسفانه جواب نمی دین
    حداقل یا جواب بدین یا در مقاله بیارینشون.
    ممنون منتظرم

  10. سامان گفت:

    خیلی عالی بود ممنون

دیدگاهتان را بنویسید

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

هجده − 3 =

آموزش های سئو

پربازدیدترین مقالات سئو سایت

ui چیست؟

رتبه سایت

آنالیز سئو سایت

اصطلاحات سئو

سئو گوگل

پروژه های سئو