اسکیما تصاویر چیست؟
اسکیما تصاویر یکی از پر کاربردترین اسکیما ها می باشد که به کمک آن میتوان توضیحاتی در مورد عکس ها در بخش تصاویر ارئه داد که این اطلاعات میتواند شامل نام سازنده، وب سایت، مجوزات و ... باشد و این ویژگی کمک بسیاری زیادی در دیده شدن و سئو سایت می کند و همین امر بهبود رتبه سایت را به همراه دارد که معمولا در نتایج گوگل به صورت زیر نمایش داده میشود:
بیشتر بدانیم : اسکیما یا استراکچر دیتا (schema markup) چیست؟
توضیحات دستورات کد اسکیما تصاویر image metadata
contentUrl: در این قسمت URL ثبت می شود تا متا دیتا روی عکس مورد نظر فعال شود و باید یکی از ویژگی های زیر را داشته باشد:
- creator ( نام سازمان یا شخص ایحاد کننده تصویر ذکر شود)
- creditText (نام شخص یا سازمانی که به این تصویر اعتبار داده برده شود)
- copyrightNotice (ادعای مالیکیت بر تصویر)
- license (قرار دادن URL که توضیح داده شده که در چه صورت میتوان از تصویر کپی کرد)
license: آدرس صفحه مجوزاتی که برای استفاده از تصاویر لازم است
acquireLicensePage: آدرسی که در مورد اخذ مجوزات اطلاعات داده است.
کد اسکیما تصاویر (image metadata)
کد اسکیما تصاویر برای یک عکس
از کد زیر میتوان برای صفحه ای که حاوی یک تصویر می باشد، استفاده نمود.
<html>
<head>
<title>Black labrador puppy</title>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "ImageObject",
"contentUrl": "https://example.com/photos/1x1/black-labrador-puppy.jpg",
"license": "https://example.com/license",
"acquireLicensePage": "https://example.com/how-to-use-my-images",
"creditText": "Labrador PhotoLab",
"creator": {
"@type": "Person",
"name": "Brixton Brownstone"
},
"copyrightNotice": "Clara Kent"
}
</script>
</head>
<body>
<img alt="Black labrador puppy" src="https://example.com/photos/1x1/black-labrador-puppy.jpg">
<p><a href="https://example.com/license">License</a></p>
<p><a href="https://example.com/how-to-use-my-images">How to use my images</a></p>
<p><b>Photographer</b>: Brixton Brownstone</p>
<p><b>Copyright</b>: Clara Kent</p>
<p><b>Credit</b>: Labrador PhotoLab</p>
</body>
</html>
کد اسکیما تصاویر برای یک عکس همراه با تگ srcset
کد زیر یک صفحه ای را نشان می دهد که حاوی یک تصویر بوده و در تگ srcset قرار گرفته است.
<html>
<head>
<title>Black labrador puppy</title>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "ImageObject",
"contentUrl": "https://example.com/photos/320/black-labrador-puppy-800w.jpg",
"license": "https://example.com/license",
"acquireLicensePage": "https://example.com/how-to-use-my-images",
"creditText": "Labrador PhotoLab",
"creator": {
"@type": "Person",
"name": "Brixton Brownstone"
},
"copyrightNotice": "Clara Kent"
}
</script>
</head>
<body>
<img srcset="https://example.com/photos/320/black-labrador-puppy-320w.jpg 320w,
https://example.com/photos/480/black-labrador-puppy-480w.jpg 480w,
https://example.com/photos/800/black-labrador-puppy-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="https://example.com/photos/320/black-labrador-puppy-800w.jpg"
alt="Black labrador puppy"><br />
<p><a href="https://example.com/license">License</a></p>
<p><a href="https://example.com/how-to-use-my-images">How to use my images</a></p>
<p><b>Photographer</b>: Brixton Brownstone</p>
<p><b>Copyright</b>: Clara Kent</p>
<p><b>Credit</b>: Labrador PhotoLab</p>
</body>
</html>
کد اسکیما تصاویر برای چندین عکس بر روی یک صفحه
اگر در یک صفحه چندین تصویر وجود داشته باشد برای فعالسازی اسکیما تصاویر میتوان از کد زیر استفاده کرد.
<html>
<head>
<title>Photos of black labradors</title>
<script type="application/ld+json">
[{
"@context": "https://schema.org/",
"@type": "ImageObject",
"contentUrl": "https://example.com/photos/1x1/black-labrador-puppy.jpg",
"license": "https://example.com/license",
"acquireLicensePage": "https://example.com/how-to-use-my-images",
"creditText": "Labrador PhotoLab",
"creator": {
"@type": "Person",
"name": "Brixton Brownstone"
},
"copyrightNotice": "Clara Kent"
},
{
"@context": "https://schema.org/",
"@type": "ImageObject",
"contentUrl": "https://example.com/photos/1x1/adult-black-labrador.jpg",
"license": "https://example.com/license",
"acquireLicensePage": "https://example.com/how-to-use-my-images",
"creditText": "Labrador PhotoLab",
"creator": {
"@type": "Person",
"name": "Brixton Brownstone"
},
"copyrightNotice": "Clara Kent"
}]
</script>
</head>
<body>
<h2>Black labrador puppy</h2>
<img alt="Black labrador puppy" src="https://example.com/photos/1x1/black-labrador-puppy.jpg">
<p><a href="https://example.com/license">License</a></p>
<p><a href="https://example.com/how-to-use-my-images">How to use my images</a></p>
<p><b>Photographer</b>: Brixton Brownstone</p>
<p><b>Copyright</b>: Clara Kent</p>
<p><b>Credit</b>: Labrador PhotoLab</p>
<h2>Adult black labrador</h2>
<img alt="Adult black labrador" src="https://example.com/photos/1x1/adult-black-labrador.jpg">
<p><a href="https://example.com/license">License</a></p>
<p><a href="https://example.com/how-to-use-my-images">How to use my images</a></p>
<p><b>Photographer</b>: Brixton Brownstone</p>
<p><b>Copyright</b>: Clara Kent</p>
<p><b>Credit</b>: Labrador PhotoLab</p>
</body>
</html>
نکته ای که باید به آن توجه داشت این است که میتوان تمامی کد ها را با استفاده از سایت Rich result test مورد بررسی قرار داد و از درست بودن کد ها اطمینان حاصل کرد.
اسکیما عکس در وردپرس
برای فعالسازی اسکیما تصاویر میتوان از کدهای بالا استفاده کرد اما وردپرس این امکان را فراهم کرده است که میتوان با استفاده از افزونه هایی مانند schema pro، Rankmath، یواست و ... تمامی اسکیما ها به راحتی فعال نمود.
