اسکیما یا استراکچر دیتا (schema markup)

اسکیما (schema) با معنی لغتی طرح، شکل، الگو و نشانه گذاری، استانداردی بین موتورهای جستجو برای نمایش دیتای دقیق تر از نتایج جستجو می باشد این استاندارد ثابت می باشد و تغییری آنچنانی نخواهد داشت تمام موتورهای جستجو مخصوصا گوگل از این استاندارد پیروی می کنند و ابزارهای مناسبی برای استفاده و تست این نوع کدها در اختیار طراحان سایت قرار می دهند. در کل عملیات نشانه گذاری صفحات سایت با هدف خاص برای موتورهای جستجو را نشانه گذاری اسکیما (schema markup) گفته می شود

بهزاد میرزازاده بهزاد میرزازاده

زمان مطالعه

3 دقیقه

بازدید

628

پرسش و پاسخ

8
اسکیما یا استراکچردیتا (schema markup) و تاثیر آن در سئو

فایده اسکیما در نتایج جستجو سئو

امروزه کاربران به دنبال استفاده راحتتر از نتایج جستجو هستند مثل نمایش مستقیم شماره تماس برای خرید یک محصول یا جستجو براساس قیمت محصولات، تاریخ موجودیت و انقضا ، رای های دیگر کاربران برای محصول و ... 

این اطلاعات باید توسط هر موتور جستجویی پشتیبانی می شود و سعی در نمایش دقیق این اطلاعات دارند و از لحاظ بسری نیز کاربر را متقاعد به ورود به سایت شما می کند و دقیقا یکی از نکته های افزایش بازدید سایت می تواند باشد.

با یک مثال بهتر با اسکیما آشنا شوید اگر در گوگل و با گوشی موبایل سرچ کنید "شکایت از فروشگاه اینترنتی" سایت جاب تیم در نتایج صفحه اول به صورت پرسش و پاسخ در مورد شکایت از یک فروشگاه اینترنتی برای شما نمایش داده می شود تصویر زیر:

نمونه اسکیما (schema) برای نمایش پرسش و پاسخ در نتایج گوگل

استاندارد اسکیما (schema) چیست؟

یک استاندارد کلی برای اسکیما تعریف شده است که به صورت کامل در سایت schema.org همراه با توضیحات کامل و مثال های مختلف موجود می باشد که هرکدام این مثال های برای نشانه گذاری قسمتی از سایت شما می باشد مثلا برای نشانه گذاری مسیردهی سایت یا بردکرامب (breadcrumb).

شما کدهای خود را می توانید به صورت RDFa یا Microdata یا Json ld در صفحات سایتتون قرار بدید که باز تاکید می کنم در سایت schema مثال برای هر سه نوع مختلف وجود دارد. ما در این مطلب مثال های Json ld و Microdata را با هم به صورت عملی نمایش خواهیم داد. دقت کنید در داکیومنت گوگل فقط برای دو نوع Json ld و Microdata مثال های مختلف اراده شده است.

انواع اسکیما قابل نمایش در نتایج گوگل

  1. مقاله
  2. کتاب
  3. بردکرامب
  4. کروسل (carousel)
  5. ویدئو
  6. کووید 19 (کرونا)
  7. dataset
  8. پرسش و پاسخ آموزشی (مربوط به دروس)
  9. Employer Aggregate Rating
  10. Estimated salary
  11. ایونت (رویداد)
  12. بررسی واقعیت (fact check)
  13. faq (سوالات متداول)
  14. فعالیت های خانه (home activities)
  15. how to
  16. لایسنس تصاویر
  17. استخدام نیرو (job posting)
  18. فیلم آموزشی
  19. local business
  20. logo
  21. پاسخ مسائل ریاضی
  22. movie
  23. Practice problems
  24. محصول
  25. پرسش و پاسخ
  26. Recipe
  27. review snippet
  28. کادر جستجو سایت در نتایج گوگل
  29. Software App
  30. Speakable
  31. Subscription and paywalled content
  32. video

آموزش استفاده از اسکیما در یک صفحه

برای استفاده از اسکیما در حالت کلی 3 نوع داشتیم طبق استاندارد و مثال های فعلی گوگل این سه نوع به صورت ذیل هستند

json-ld RDFa Microdata

روش اول: میکرودیتا

میکرودیتا اطلاعات کوچکیه در تکه‌‌های مختلف یک صفحه از سایت که مشخص می‌کنه تکه مورد نظر چه هدفی داره و قراره چه کاری انجام بده. هر میکرودیتا شامل سه تگ است. با این سه تگ می‌توانیم یک تکه کد اسکیما بنویسیم، برای همین هم هست که کدهای میکرودیتا در سئو و بهینه‌سازی وب‌سایت‌ها نقش مهمی دارند.

مثال اسکیما از نوع میکرودیتا

در این نوع سه بخش داریم که عبارتند از:

  1. itemtype

  2. itemprop

  3. itemscope

مثال ما در مورد لایسنس تصاویر با میکرودیتا

<html>
  <head>
    <title>Black labrador puppy</title>
  </head>
  <body>
    <div itemscope itemtype="https://schema.org/ImageObject">
    <img alt="Black labrador puppy" itemprop="contentUrl" src="https://example.com/photos/1x1/black-labrador-puppy.jpg" /><br />
    <span itemprop="license"> https://example.com/license</span><br />
    <span itemprop="acquireLicensePage">https://example.com/how-to-use-my-images</span>
    </div>
  </body>
</html>

در مثال بالا itemtype نشان دهنده موضوع تگ هست و itemscope نشان دهنده حوزه آن که ImageObject میشه حوزه فعلی در لایسنس تصاویر و itemprop نقش راهنمایی بیشتر یا کمک‌کننده برای درک بهتر موضوع را دارد و کد را تکمیل می‌کند

یک نمونه از اسکیمای تصاویر جاب تیم با سرچ "مالیات فروشگاه اینترنتی" در بخش نتایج تصاویر به شکل ذیل برای شما ظاهر خواهد شد

روش دوم: استفاده از json-ld

json-ld دقیقا چیه؟ JSON-LD مخفف Javascript Object Notation For Linked Data به معنای نشانه گذاری داده‌های مرتبط به هم با استفاده از جاوا اسکریپت است.

مثال ما باهمین بحث لایسنس تصاویر برای json-ld هستش

<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"
    }
    </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>
  </body>
</html>

@contex در ابتدای همۀ اسکریپت‌ها ثابت بوده و مقدار آن همیشه Schema.org است. در واقع @contex دارد به مرورگر شما این پیغام را می‌دهد که: "از الفبای موجود در سایت schema.org برای نشانه‌گذاری استفاده می‌کنید".

آیتم @type نوع داده را مشخص می‌کند که در مثال ما برابر با ImageObject است

آیتم contentUrl مشخص کننده آدرس تصویر است

آیتم license اشاره به یک صفحه از سایت دارد که در مورد لایسنس توضیحات داده اید

اگر اجازه استفاده از تصاویر رو به افراد دیگه میدید آیتم acquireLicensePage آدرس شرایط استفاده از تصاویر شما خواهد بود

روش سوم: استفاده از RDFa

از این روش خیلی کم استفاده میشه مثال ما برای اسکیما RDFa هم برای لایسنس تصاویر به شکل ذیل هست

<html>
  <head>
    <title>Black labrador puppy</title>
  </head>
  <body>
  <div vocab="https://schema.org/" typeof="ImageObject">
    <img alt="Black labrador puppy" property="contentUrl" src="https://example.com/photos/1x1/black-labrador-puppy.jpg" /><br />
    <span property="license"> https://example.com/license</span><br />
    <span property="acquireLicensePage">https://example.com/how-to-use-my-images</span>
  </div>
  </body>
</html>

در مثال بالا vocab همیشه ثابت و برابر با https://schema.org خواهد بود مقدار typeof مشخص کننده نوع اسکیمای فعلی یعنی تصویر است و برابر با ImageObject خواهد بود بقیه موارد با property مشخص شده است مثل آدرس تصویر، صفحه قوانین لایسنس و صفحه نحوه استفاده از لایسنس برای دیگران.

 

مثال استفاده از microdata برای مسیر دهی (breadcrumb) یک سایت

<nav aria-label="breadcrumb">
                    <ol class="breadcrumb" vocab="https://schema.org/" typeof="BreadcrumbList">
                        <li class="breadcrumb-item" property="itemListElement" typeof="ListItem">
                            <a property="item" typeof="WebPage" href="https://jobteam.ir" title="جاب تیم">
                                <span property="name">جاب تیم</span>
                            </a>
                            <meta property="position" content="1">
                        </li>
                        <li class="breadcrumb-item active" aria-current="page" property="itemListElement" typeof="ListItem">
                            <a property="item" typeof="WebPage" title="فریم ورک لاراول"
                               href="https://jobteam.ir/category/Laravel">
                                <span class="text-secondary" property="name">فریم ورک لاراول</span>
                            </a>
                            <meta property="position" content="2">
                        </li>
                    </ol>
                </nav>

ما در این مثال فقط دو مسیر از سایت اصلی رو نشانه گذاری کردیم صفحه اصلی و دسته فریم ورک لاراول و اگر ادامه دار باشد با position مشخص خواهد شد

مثال json ld (تمامی json ld  ها باید در تگ head قرار گیرند)

<script type="application/ld+json">
     {
          "@context": "http://schema.org",
          "@type": "Organization",
          "url": "https://jobteam.ir",
          "logo": "https://jobteam.ir/img/logo.png",
          "contactPoint": [{
            "@type": "ContactPoint",
            "telephone": "+989357669329",
            "contactType": "customer service"
          }]
     }
    </script>

یک مثال دیگر از محصولات با json ld

<script type="application/ld+json">
     {
          "@context": "https://schema.org/",
          "@type": "Product",
          "name": "Laravel Validation national code",
                      "image": [
                "https://jobteam.ir/upload/img/2019/09/origin/9283518441567698138.jpg"
            ],
                    "description": "اعتبارسنجی کد ملی در لاراول در برخی از پروژه های مورد نیاز می باشد و باید صحت کد ملی سنجیده شود در این مقاله به سادگی نحوه ساخت یک Rule برای سنجیدن کد ملی را آموزش داده ایم",
          "sku": "44",
          "mpn": "44",
          "brand": {
            "@type": "product",
            "name": "jobteam"
          },
          "review": {
            "@type": "Review",
            "reviewRating": {
              "@type": "Rating",
              "ratingValue": "5",
              "bestRating": "5"
            },
            "author": {
              "@type": "Person",
              "name": "بهزاد میرزازاده"
            }
          },
          "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "5",
            "reviewCount": "100"
          },
          "offers": {
            "@type": "Offer",
            "url": "https://jobteam.ir/ProductUser/44-Laravel-Validation-national-code",
            "priceCurrency": "Rial",
            "price": "0",
            "priceValidUntil": "05 September 2020",
            "itemCondition": "https://schema.org/UsedCondition",
            "availability": "https://schema.org/InStock",
            "seller": {
              "@type": "Organization",
              "name": "jobteam"
            }
          }
    }
    </script>

تست و آزمایش صحت داده های ساختار یافته یا اسکیما

برای اینکه مطمئن شوید schema به هر تعداد در صفحه فعلی صحیح هستند یا نه بهتره از لینک ذیل برای تست استفاده کنید

https://developers.google.com/search/docs/advanced/structured-data

افزونه های schema برای وردپرس

اگر از cms وردپرس استفاده می کنید می توانید یکی از پلاگین های schema برای این cms که معرفی شده است را به رایگان دانلود و نصب کنید.

سایت های تولید و تست کدهای json ld 

  • structured data google
  • google searche console test
  • json-ld.org

نکات schema :

  • نشانه گذاری سازمانی فقط در صفحه اول باشد
  • نوع نشانه گذاری را براساس نوع مطلب انتخاب کنید (محصول، مقاله و .... )
  • سعی کنید کد خود را اول تست کنید سپس به سایت قرار دهید
  • معیار اصلی تست schema خود گوگل می باشد
  • سعی کنید تمام موارد ممکن قابل نشانه گذاری را حتما با استفاده استاندارد دلخواه خود نشانه گذاری کنید
  • کد schema تکراری در یک صفحه وجود نداشته باشد