راهنمای کامل تگ‌های <img> و <a> در HTML: تصاویر و لینک‌ها

تصاویر و لینک‌ها دو عنصر جدایی‌ناپذیر از هر صفحه وب هستند. تصاویر محتوا را جذاب و بصری می‌کنند و لینک‌ها کاربران را به اطلاعات بیشتری هدایت می‌کنند. در این مقاله، با نحوه استفاده صحیح از تگ‌های <img> و <a> و همچنین نکات بهینه‌سازی آن‌ها برای موتورهای جستجو آشنا خواهید شد.

تگ <img>: نمایش تصاویر در وب

برای نمایش یک تصویر در صفحه، از تگ <img> استفاده می‌شود. این تگ نیازی به بسته شدن ندارد و تنها از ویژگی‌ها استفاده می‌کند. دو ویژگی مهم آن src و alt هستند.

• src: آدرس تصویر را مشخص می‌کند.
• alt: یک متن جایگزین برای تصویر است که برای سئو و دسترسی‌پذیری بسیار مهم است. این متن در صورت عدم بارگذاری تصویر یا توسط صفحه‌خوان‌ها نمایش داده می‌شود.

برای بهبود سرعت سایت، بهتر است از ویژگی loading="lazy" استفاده کنید تا تصاویر تنها زمانی که کاربر به آن‌ها نزدیک می‌شود، بارگذاری شوند.

<img src="images/example.jpg" alt="تصویر یک منظره طبیعی زیبا" loading="lazy">

تگ <a>: ایجاد لینک و پیوند

تگ <a> برای ایجاد لینک‌هایی به صفحات دیگر، فایل‌ها یا بخش‌هایی از همان صفحه استفاده می‌شود. مهم‌ترین ویژگی این تگ، href است که آدرس مقصد را مشخص می‌کند.

• href: آدرس لینک را مشخص می‌کند.
• target="_blank": لینک را در یک تب جدید باز می‌کند.
• rel: رابطه لینک را با صفحه فعلی مشخص می‌کند. برای لینک‌های خارجی، rel="noopener noreferrer" توصیه می‌شود.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">مشاهده سایت ما</a>

لینک کردن تصاویر

با قرار دادن تگ <img> داخل تگ <a> می‌توانید یک تصویر را به یک لینک تبدیل کنید. با این کار، وقتی کاربر روی تصویر کلیک کند، به صفحه‌ای دیگر منتقل می‌شود.

<a href="https://example.com/products">
<img src="images/product.jpg" alt="تصویر محصول جدید" width="300">
</a>

نکات کلیدی برای سئو بهتر

• تصاویر:
  • همیشه از ویژگی alt استفاده کنید و توضیحی مرتبط و دقیق بنویسید.
  • حجم تصاویر را به حداقل برسانید تا سرعت سایت افزایش یابد.
  • از فرمت‌های مدرن تصویر مانند WebP استفاده کنید.
• لینک‌ها:
  • از متن لینک (Anchor Text) معنادار و مرتبط با صفحه مقصد استفاده کنید.
  • لینک‌های داخلی را به درستی به کار بگیرید تا ساختار سایت شما برای موتورهای جستجو بهینه شود.