راهنمای کامل تگ‌های < 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) معنادار و مرتبط با صفحه مقصد استفاده کنید.
  • لینک‌های داخلی را به درستی به کار بگیرید تا ساختار سایت شما برای موتورهای جستجو بهینه شود.