تبدیل عکس به لینک در html به معنای این است که شما هدفی را برای تصویر خود مشخص کرده اید و زمانی که کاربر روی تصویر لینک شده کلیک کند او را به اطلاعات کامل تری می رساند. گوگل به وب سایتی که زیبایی و خلاقیت در آن وجود نداشته باشد و نتواند کاربر را به خود جذب کند اهمیت زیادی نمی دهد. از این رو تصاویر و رنگ بندی ها بخشی از زیبایی ساختاری وب سایت تان را تشکیل می دهند. عکس ها می توانند یک مفهوم را در یک نگاه به کابران منتقل کنند. در واقع شما با لینک کردن عکس اطلاعات بیشتری را در اختیار کاربر و گوگل قرار می دهید.
در سلسله آموزش های قبل آنلاینر به مبحث سئو برای تصاویر SEO پرداختیم.
تبدیل عکس به لینک (لینک کردن عکس)
برای لینک کردن هر عاملی از جمله عکس به طوری که اگر کاربر روی عامل کلیک کرد به صفحه مقصد منتقل شود فقط کافیست همان عامل را در تگ a قرار دهید.
برای لینک دار کردن عکس هم باید تگ img را در تگ a قرار دهید. توجه داشته باشید برای تگ a حتما از صفت title استفاده کنید. یکی از دلایل آن ایجاد tooltip در عکسهاست که کاربر پسند است و به سئو تصاویر تان بیشتر کمک می کند که گوگل متوجه شود که تصویر تان چه معنا و مفهومی را دارد.
اگر نمی دانید تبدیل عکس به کد html به چه صورت است به مثال زیر دقت کنید:
[html]
<body>
<a href=”https://onliner.co”>
<img src=”new-onliner.png”/>
</a>
</body>
[/html]
لینک کردن عکس (معرفی ویژگی های آن)
تگ img یک ویژگی خاص را با خودش به همراه دارد به نام src که داخل آن شما باید آدرس عکسی که می خواهید در وب سایت تان نمایش داده شود را قرار بدهید. ولی این آدرس دهی به دو صورت انجام می شود.
روش اول: لینک عکس را می توانید به صورت کامل قرار بدهید.
روش دوم: دومی روش به این صورت است که عکس لینک را به صورت نسبی مشخص کنید. در نوع نوشتن کدهای html خود به صورت ساختار یافته عمل کنید. از این رو یک پوشه درست کنید و عکس هایی که می خواهید لینک شوند را درون پوشه با نام مربوطه هر کدام قرار بدهید و آن ها را فراخوانی کنید.
[html]
<body>
<a href=”https://onliner.co/”>
<img src=”images/new-onliner.png” title=”onliner-logo”>
</a>
</body>
[/html]
اضافه کردن عکس در html (تعیین عرض و ارتفاع مشخص)
تا اینجا کار متوجه شدیم که چگونه روی عکس لینک بگذاریم؟ حالا می توانیم برای عکس مورد نظر خود عرض و ارتفاع مشخصی را مشخص کنیم. از این رو تعیین عرض و ارتفاع عکس بسته به نوع تصویری که می خواهید در وب سایت تان قرار بدهید دارد به صورتی که کشیده نشود.
اگر عرض و ارتفاع عکس که می خواهید در وب سایت خود آپلود کنید مشخص نکنید مرورگر به صورت پیش فرض عرض و ارتفاع عکس را مشخص می کند.
[html]
<body>
<a href=”https://onliner.co/”>
<img src=”images/new-onliner.png” alt=”onliner-logo” style=”width:42px;height:42px;”>
</a>
</body>
[/html]
نتیجه گیری
محور اصلی این مقاله حوله این محور بود که چگونه لینک عکس درست کنیم؟ در واقع تمام تلاش تیم آنلاینر این است که به شما تمامی مباحث مربوط به تگ img را معرفی کند. در آپدیت های بعدی این مقاله به خصوصیات بیشتر در مورد تگ img می پردازیم.
سوالات متداول
آدرس دهی عکس در صفحات وب به چند روش انجام می شود؟
روش اول: لینک آدرس عکس را می توانید به صورت کامل قرار بدهید – روش دوم: روش به این صورت است که عکس لینک را به صورت نسبی مشخص کنید.
تگ img باید چه خصوصیاتی داشته باشد؟
تگ img باید از ویژگی alt برخودار باشد و همچنین برخی از ویژگی width و height را می توان برای آن تعیین کرد.
