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

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

پرسش و پاسخ

نظری یافت نشد

اطلاعات

0 رای

پرسش ها

درباره محراب

محراب حسن زاده

تیم ما در تلاش است تا مکانی برای ارائه بهترین آموزش های زبان برنامه نویسی جهت یادگیری شما دوستان عزیز ایجاد کند تا بتوانیم در این عرصه خدمتی به دنیای تکنولوژی و ترویج علم و دانش کرده باشیم