در تاپیک Structured Data با این قابلیت از گوگل آشنا شدید و می دانید که ما می توانیم حالت های مختلفی در نتایج جستجوی گوگل به صفحاتمان بدهیم. در این تاپیک درباره کاروسل ها یا همان اسلایدرها صحبت می کنیم. شاید شما هم با این قابلیت در حین جستجوی روزمره ی خودتان برخورد کرده باشید که چندین اطلاعات از سایت در نتایج جستجو به صورت یک اسلایدر افقی نمایش داده می شود. در این تاپیک از انجمن بی تاک به این موضوع می پردازیم.
حالت دستور پخت غذاها
در این حالت از کاروسل، مانند تصویر زیر، اطلاعاتی شامل یک تصویر، یک عنوان، زمان پخت آن غذا، امتیازهای ستاره ای و میزان کالری آن غذا را می توانیم تعیین کنیم. نمونه را مشاهده کنید:
برای این حالت، شما باید این کد را در صفحه ادامه مطلب دستور پخت غذایتان قرار دهید. این کد علاوه بر کد JSON باید کد HTML هم داشته باشد. یعنی:
<html>
<head>
<title>آموزش آشپزی بی تاک</title>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Recipe",
"name": "قرمه سبزی",
"image": [
"https://chishi.ir/wp-content/uploads/2022/04/nan-sir-hendi.jpg"
],
"author": {
"@type": "Person",
"name": "بی تاک"
},
"datePublished": "2022-03-10",
"description": "دستور پخت قرمه سبزی به سبک بی تاک",
"prepTime": "PT10M",
"cookTime": "PT25M",
"totalTime": "PT35M",
"recipeCuisine": "ایرانی",
"recipeCategory": "خورشت",
"keywords": "خورشت، قرمه سبزی",
"recipeYield": "24",
"nutrition": {
"@type": "NutritionInformation",
"calories": "600 کالری"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5",
"ratingCount": "18"
},
"recipeIngredient": [
"نیم کیلو سبزی",
"یخورده گوشت",
"نمک و ادویه و...",
"یه مشت نخود"
],
"recipeInstructions": [
{
"@type": "HowToStep",
"text": "سبزی را خوب سرخ کنید"
},
{
"@type": "HowToStep",
"text": "ادویه و اینا رو اضافه کنید"
},
{
"@type": "HowToStep",
"text": "نخود و مابقی مواد رو اضافه کنید"
},
{
"@type": "HowToStep",
"text": "یکم آب بریزید و بذارید پخته بشه"
},
{
"@type": "HowToStep",
"text": "قاعدتا باید قرمه سبزی شما آماده باشه ولی طبیعتا نمیشه خوردش. موفق باشید"
}
]
}
</script>
</head>
<body>
<p>
چگونه قرمه سبزی درست کنیم؟
</p>
<ol>
<li>سبزی را خوب سرخ کنید</li>
<li>ادویه و اینا رو اضافه کنید</li>
<li>نخود و مابقی مواد رو اضافه کنید</li>
<li>یکم آب بریزید و بذارید پخته بشه</li>
<li>قاعدتا باید قرمه سبزی شما آماده باشه ولی طبیعتا نمیشه خوردش. موفق باشید</li>
</ol>
</body>
</html>
در کد بالا مشاهده می کنید که با تگ <script type="application/ld+json"> کدهای مربوط به آیتم دستور پخت را وارد کرده ایم اما باید توجه داشته باشید که دستور پخت را با تگ <ol> در بخشی از محتوای سایتتان قرار داده باشید در غیراینصورت گوگل این کد را در نتایج جستجو اعمال نخواهد کرد. در نهایت چنین خروجی خواهیم داشت:
این سه تصویر، مربوط به سه حالت نمایش سایت در نتایج جستجو است.
حالت نمایش فیلم و سریال
در این حالت ما این کاروسل را برای فیلم و سریال استفاده می کنیم. کد نمونه:
<html>
<head>
<title>بخش فیلم و سریال بی تاک</title>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ItemList",
"itemListElement": [
{
"@type": "ListItem",
"position": "1",
"item": {
"@type": "Movie",
"url": "https://example.com/2019-best-picture-noms#a-star-is-born",
"name": "شهربانو",
"image": "https://dlroozane.net/wp-content/uploads/2022/04/Shahrbanoo.jpg",
"dateCreated": "2019-10-05",
"director": {
"@type": "Person",
"name": "مریم بحرالعلومی"
},
"review": {
"@type": "Review",
"reviewRating": {
"@type": "Rating",
"ratingValue": "5"
},
"author": {
"@type": "Person",
"name": "بی تاک"
},
"reviewBody": "شهربانو مادر سه فرزند است که بنا بر اتفاقاتی به جرم انتقال مواد مخدر به حبس ابد محکوم می شود. او پس از 11 سال از زندان مرخصی می گیرد تا در عروسی پسرش شرکت کند و حقانیتش را به فرزندانش ثابت کند."
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "90",
"bestRating": "100",
"ratingCount": "19141"
}
}
},
{
"@type": "ListItem",
"position": "2",
"item": {
"@type": "Movie",
"name": "غیر مجاز",
"url": "https://example.com/2019-best-picture-noms#bohemian-rhapsody",
"image": "https://dlroozane.net/wp-content/uploads/2017/10/gheyremojaz-2.jpg",
"dateCreated": "2018-11-02",
"director": {
"@type": "Person",
"name": "حسن یکتاپناه"
},
"review": {
"@type": "Review",
"reviewRating": {
"@type": "Rating",
"ratingValue": "3"
},
"author": {
"@type": "Person",
"name": "بی تاک"
},
"reviewBody": "دختری جوان به نام توکا است که برای پیدا کردن نامزدش به تهران می آید ولی متوجه اتفاقاتی در مورد نامزدش در تهران میشود که توقع آن را ندارد…."
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "61",
"bestRating": "100",
"ratingCount": "21985"
}
}
},
{
"@type": "ListItem",
"position": "3",
"item": {
"@type": "Movie",
"name": "برادران لیلا",
"url": "https://example.com/2019-best-picture-noms#black-panther",
"image": "https://dlroozane.net/wp-content/uploads/2022/04/Baradaran-Leyla.jpg",
"dateCreated": "2018-02-16",
"director": {
"@type": "Person",
"name": "سعید روستایی"
},
"review": {
"@type": "Review",
"reviewRating": {
"@type": "Rating",
"ratingValue": "2"
},
"author": {
"@type": "Person",
"name": "بی تاک"
},
"reviewBody": "فیلمی جذاب و دیدنی به کارگردانی سعید روستایی"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "96",
"bestRating": "100",
"ratingCount": "88211"
}
}
}
]
}
</script>
</head>
<body>
</body>
</html>
این کد را می توانید در اینجا آزمایش کنید:
https://search.google.com/test/rich-results/result?id=jruMm3hgyjTGreGdMxTxKw
