مپ تگ map tag چیست؟

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

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

image map tag

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

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

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

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

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

نمایش مپ تگ 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  را معرفی میکنیم که به صورت آنلاین میتوانید بعد از آپلود تصویر در این سایت ، لینک مدنظر را وارد کنید . بعد شکل مدنظرتان را وارد کنید.