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

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