جمعه ۱۱ آبان ۱۴۰۳
Tut24 آموزش برنامه نویسی و مجله تخصصی فناوری ورود/عضویت

داده های ساختار یافته Structured data در صفحات وب

Structured data in web pages

داده های ساختار یافته ( Structured data ) در صفحه وب چیست ؟

داده های ساختاریافته یک قالب استاندارد شده برای ارائه اطلاعات در مورد یک صفحه وب و محتوای آن است.داده های ساختار یافته از واژگان خاصی شامل برچسب‌ها (tags) یا ریزداده‌ها (microdata) برای علامت‌گذاری عناصر یک صفحه وب مانند سرفصل‌ها، تصاویر، ویدئوها و غیره استفاده می‌کند تا اطلاعات دقیق‌تری در مورد آنها ارائه دهد.

کاربرد Structured data

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

انواع مختلفی از قالب‌های داده ساختاریافته وجود دارد، از جمله Schema.org ، RDFa و میکروفرمت‌ها.

Schema.org پر استفاده ترین فرمت است و توسط موتورهای جستجوی اصلی مانند گوگل، بینگ و یاهو پشتیبانی می شود.

Schema.org واژگان جامعی از برچسب ها را ارائه می دهد که می تواند برای علامت گذاری انواع مختلف محتوا، از محصولات و مشاغل گرفته تا رویدادها (events) و دستور العمل ها (recipes) استفاده شود.

برای پیاده سازی داده های ساختاریافته در یک صفحه وب، مدیران وب سایت می توانند تگ های مناسب را به کد HTML صفحه اضافه کنند. برای این کار ابزارهای متعددی در دسترس هستند، ابزارهایی مانند راهنمای نشانه گذاری داده های ساخت یافته گوگل ( Google's Structured Data Markup Helper ) ، که می تواند به تولید کد لازم کمک کند.

مزایای استفاده از داده های ساختار یافته structured data

  1. بهبود دید موتورهای جستجو: با ارائه داده های ساختاریافته، مدیران وب سایت می توانند به موتورهای جستجو کمک کنند تا موتور جستجو محتوای یک صفحه وب را بهتر درک کند، این کار می تواند باعث دیده شدن بیشتر و بهتر در نتایج جستجو شود.

  2. ریچ اسنیپت ها (Rich snippets) : داده های ساختاریافته را می توان برای نمایش قطعه های غنی در نتایج جستجو نیز مورد استفاده قرار داد، که می تواند اطلاعات دقیق تری در مورد محتوای یک صفحه وب مانند رتبه بندی ستاره ها، قیمت ها و تاریخ رویداد به کاربران ارائه دهد.

  3. تجربه کاربری پیشرفته: با ارائه اطلاعات دقیق تر در مورد محتوای یک صفحه وب، داده های ساختاریافته می توانند به کاربران کمک کنند تا اطلاعات مورد نظر خود را راحت تر و سریع تر پیدا کنند.

  4. بهینه سازی جستجوی صوتی: داده های ساختاریافته نیز می توانند به بهینه سازی جستجوی صوتی کمک کنند. با ظهور دستیارهای صوتی مانند سیری، الکسا و دستیار گوگل، پرس و جوهای جستجو بیشتر محاوره ای می شوند. داده های ساختاریافته می توانند به موتورهای جستجو کمک کنند تا زمینه محتوا را درک کنند و نتایج مرتبط تری را برای جست و جوی صوتی ارائه دهند.

  5. اشتراک‌گذاری رسانه‌های اجتماعی: برخی از پلتفرم‌های رسانه‌های اجتماعی از داده‌های ساختاریافته نیز پشتیبانی می‌کنند، که می‌توان از آنها برای بهبود ظاهر اشتراک گذاری لینک استفاده کرد. برای مثال، افزودن متا تگ‌های Open Graph به یک صفحه وب می‌تواند به پیش‌نمایش‌های بهتر از پیوندهای اشتراک گذاری شده در پلتفرم‌هایی مانند فیس‌بوک و لینکدین کمک کند.

  6. بهینه‌سازی تجارت الکترونیک: برای وب‌سایت‌های تجارت الکترونیک، داده‌های ساختاریافته می‌توانند به ویژه برای نمایش اطلاعات محصول مانند قیمت، در دسترس بودن و بررسی‌ها در نتایج جستجو مفید باشند. این موضوع می تواند به جذب مشتریان بالقوه بیشتر کمک کند.

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

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

Schema.org چیست؟

Schema.org یک پروژه مشترک بین موتورهای جستجوی اصلی، از جمله گوگل، بینگ، یاهو، و یاندکس، برای ایجاد واژگان استاندارد شده با استفاده از تگ ها برای علامت گذاری داده های ساخت یافته در صفحات وب است. هدف Schema.org ارائه یک واژگان مشترک است که می تواند توسط وب مسترها و توسعه دهندگان برای نشانه گذاری ( markup ) صفحات وب به گونه ای استفاده شود که درک محتوا را برای موتورهای جستجو آسان تر کند و نتایج مرتبط تری را برای کاربران نمایش دهد.

Schema.org مجموعه ای جامع از برچسب ها (tags) یا طرحواره ها (schema) را ارائه می دهد که می تواند برای توصیف انواع مختلف محتوا در یک صفحه وب استفاده شود. این طرح شامل ویژگی‌ها یا ویژگی‌هایی است که اطلاعات بیشتری درباره محتوا، مانند نام، توضیحات، تصویر، قیمت و غیره ارائه می‌دهند.

در اینجا برخی از رایج ترین انواع طرحواره (schema) های مورد استفاده در صفحات وب آورده شده است:

  1. آثار خلاقانه (Creative works) : این طرحواره برای نشانه گذاری محتوایی مانند مقالات، کتاب ها، فیلم ها و موسیقی استفاده می شود.

  2. رویدادها (Events) : این طرح برای نشانه گذاری رویدادهایی مانند کنسرت ها، بازی های ورزشی و کنفرانس ها استفاده می شود.

  3. کسب‌وکارهای محلی (Local businesses) : این طرح برای نشانه‌گذاری اطلاعات کسب‌وکارهای محلی، از جمله نام، آدرس، شماره تلفن و ساعات کار آنها استفاده می‌شود.

  4. سازمان ها (Organizations) : این طرح برای نشانه گذاری اطلاعات سازمان ها مانند نام، توضیحات و لوگوی آنها استفاده می شود.

  5. محصولات (Products) : این طرح برای نشانه گذاری اطلاعات مربوط به محصولات از جمله نام، توضیحات، قیمت و در دسترس بودن آنها استفاده می شود.

آموزش پیاده سازی Schema.org در صفحه وب

برای پیاده سازی نشانه گذاری Schema.org در یک صفحه وب، مدیران وب می توانند تگ های مناسب را به کد HTML صفحه اضافه کنند. این طرح را می توان با استفاده از فرمت های JSON-LD، RDFa یا microdata اضافه کرد. ابزارهای متعددی در دسترس هستند، مانند راهنمای نشانه گذاری داده های ساخت یافته گوگل ، که می تواند به تولید کد لازم کمک کند.

کد نمونه برای پیاده سازی نشانه گذاری Schema.org برای یک مقاله

<html>
  <head>
    <title>صفحه نمونه مقاله</title>
    <!-- اسکریپت زیر را برای بارگیری کد JSON-LD اضافه کنید -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org/",
        "@type": "Article",
        "headline": "عنوان مثال مقاله",
        "image": "https://example.com/images/article.jpg",
        "datePublished": "2023-03-25T10:00:00+08:00",
        "dateModified": "2023-03-25T10:30:00+08:00",
        "author": {
          "@type": "Person",
          "name": "محمد فاتح"
        },
        "publisher": {
          "@type": "Organization",
          "name": "ناشر نمونه",
          "logo": {
            "@type": "ImageObject",
            "url": "https://example.com/logo.png"
          }
        },
        "description": "این یک مقاله نمونه است."
      }
    </script>
  </head>
  <body>
    <!-- محتوای مقاله را در صفحه قرار دهید -->
    <h1>عنوان مثال مقاله</h1>
    <img src="https://example.com/images/article.jpg" alt="Example Article Image">
    <p>توسط محمد فاتح</p>
    <p>تاریخ انتشار: 25 مارس 2023</p>
    <p>آخرین اصلاح: 25 مارس 2023</p>
    <p>این یک مقاله نمونه است.</p>
  </body>
</html>

در این مثال، ما از فرمت JSON-LD برای گنجاندن نشانه گذاری Schema.org برای مقاله استفاده می کنیم. ویژگی @context، زمینه طرحواره را مشخص می کند که در واژگان Schema.org تعبیه شده است. ویژگی @type نوع محتوایی را که ما علامت گذاری می کنیم مشخص می کند که در این مورد یک مقاله است.

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

با قرار دادن این نشانه گذاری Schema.org در صفحه، موتورهای جستجو می توانند محتوا را بهتر درک کنند و اطلاعات مرتبط مانند عنوان مقاله و نویسنده را در نتایج جستجو نمایش دهند.

مزایای پیاده سازی نشانه گذاری Schema.org 

  1. بهبود نمایش در موتورهای جستجو: با ارائه داده های ساختاریافته با استفاده از نشانه گذاری Schema.org، وب مسترها می توانند به موتورهای جستجو کمک کنند تا محتوای یک صفحه وب را بهتر درک کنند، که می تواند منجر به دیده شدن بیشتر در نتایج جستجو شود.

  2. Rich snippets: نشانه گذاری Schema.org همچنین می تواند برای نمایش قطعه های غنی در نتایج جستجو استفاده شود، که می تواند اطلاعات دقیق تری در مورد محتوای یک صفحه وب مانند رتبه بندی ستاره ها، قیمت ها و تاریخ رویداد به کاربران ارائه دهد.

  3. تجربه کاربری پیشرفته: با ارائه اطلاعات دقیق تر در مورد محتوای یک صفحه وب، نشانه گذاری Schema.org می تواند به کاربران کمک کند تا اطلاعات مورد نظر خود را راحت تر و سریع تر پیدا کنند.

به طور خلاصه، Schema.org یک واژگان استاندارد شده از برچسب ها برای علامت گذاری داده های ساختار یافته در صفحات وب است که می تواند به موتورهای جستجو برای درک بهتر و نمایش محتوا در نتایج جستجو کمک کند. با استفاده از نشانه گذاری Schema.org، وب مسترها می توانند نمایش در موتور جستجوی وب سایت خود را بهبود بخشند، تجربه بهتری را در اختیار کاربران قرار دهند و به طور بالقوه نرخ کلیک را افزایش دهند.

با توجه به استفاده از JSON-LD در کد بالا در ادامه به بررسی JSON-LD می پردازیم و سپس دو نوع دیگر از داده های ساختار یافته را بررسی خواهیم کرد .

JSON-LD چیست؟

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

JSON-LD به گونه ای طراحی شده است که استفاده از آن ساده و آسان باشد، با تمرکز بر سهولت اجرا برای توسعه دهندگان وب. از یک نحوه نگارش ساده JSON برای نمایش داده ها استفاده می کند و به توسعه دهندگان این امکان را می دهد تا با استفاده از ترکیبی از اشیا، آرایه ها و خصوصیات، ساختارهای داده پیچیده ایجاد کنند.

یکی از ویژگی های کلیدی JSON-LD توانایی آن در پشتیبانی از نشانه گذاری معنایی با استفاده از داده های پیوندی است. این بدان معناست که داده‌های JSON-LD می‌توانند برای ایجاد روابط بین انواع مختلف محتوا مورد استفاده قرار گیرند و به موتورهای جستجو و سایر برنامه‌ها اجازه می‌دهد تا مفهوم آن محتوا را بهتر درک کنند.

یکی دیگر از مزیت های JSON-LD این است که می توان آن را مستقیماً در صفحات وب جاسازی کرد و به توسعه دهندگان این امکان را می دهد که داده های ساختار یافته را بدون نیاز به پلاگین یا نرم افزار اضافی به سایت های خود اضافه کنند. این می‌تواند به بهبود نمایش و رتبه‌بندی صفحات وب در نتایج موتورهای جستجو کمک کند و همچنین می‌تواند انواع جدیدی از برنامه‌ها و سرویس‌های وب را فعال کند که بر داده‌های ساختاریافته متکی هستند.

در اینجا مثالی از استفاده از JSON-LD برای نمایش اطلاعات یک شخص آورده شده است:

{
  "@context": "https://schema.org/",
  "@type": "Person",
  "name": "Mohammad Fateh",
  "jobTitle": "Software Engineer",
  "telephone": "+98-0555-555-1234",
  "email": "info@tut24.ir"
}

در این مثال، ما از ویژگی @context برای تعیین واژگان schema.org استفاده می کنیم که برای توصیف داده ها استفاده می کنیم. ما همچنین از خاصیت @type برای نشان دادن اینکه این یک شی Person را نشان می‌دهد استفاده می‌کنیم و سپس ویژگی‌های مختلف آن شی مانند نام شخص، عنوان شغل، شماره تلفن و آدرس ایمیل را مشخص می‌کنیم.

به طور کلی، JSON-LD یک روش قدرتمند و انعطاف‌پذیر برای نمایش داده‌های ساختاریافته در وب است و می‌تواند به بهبود قابلیت کشف و استفاده محتوای وب در طیف گسترده‌ای از برنامه‌ها و خدمات کمک کند.

RDFa چیست؟

RDFa (Resource Description Framework in Attributes) یک زبان نشانه گذاری است که برای جاسازی ابرداده های قابل خواندن ماشین در مورد محتوای وب در اسناد HTML، XHTML و XML استفاده می شود. این به عنوان راهی برای ایجاد آسان‌تر محتوای وب توسط موتورهای جستجو و سایر برنامه‌های پردازش داده طراحی شده است.

RDFa با افزودن متاداده RDF (Resource Description Framework) به تگ های HTML با استفاده از ویژگی های خاص کار می کند. RDF استانداردی برای توصیف منابع و روابط آنها با سایر منابع در قالب قابل خواندن ماشین است. با تعبیه ابرداده RDF در اسناد HTML، RDFa موتورهای جستجو و سایر برنامه ها را قادر می سازد تا محتوای صفحات وب را بهتر درک کنند.

RDFa از برخی جهات شبیه به microdata و JSON-LD است که سایر زبان‌های نشانه‌گذاری هستند که برای جاسازی ابرداده در اسناد HTML استفاده می‌شوند. با این حال، RDFa نسبت به این زبان‌ها انعطاف‌پذیرتر و رساتر است، زیرا ساختارها و روابط فراداده پیچیده‌تری را ممکن می‌سازد.

یکی از مزایای کلیدی استفاده از RDFa این است که می تواند به بهبود بهینه سازی موتور جستجو (SEO) محتوای وب کمک کند. با ارائه ابرداده ساختاریافته در مورد محتوای وب، موتورهای جستجو می توانند مفهوم و مفهوم محتوا را بهتر درک کنند و آن را با پرس و جوهای جستجوی مرتبط با دقت بیشتری مطابقت دهند.

RDFa همچنین می تواند برای اهداف دیگری فراتر از SEO، مانند تسهیل یکپارچگی و قابلیت همکاری داده ها در برنامه ها و پلتفرم های مختلف استفاده شود. به عنوان مثال، RDFa می تواند برای فعال کردن تبادل داده ها بین برنامه های کاربردی مختلف وب یا برای ارائه زمینه و اطلاعات اضافی برای فایل های رسانه دیجیتال استفاده شود.

برای استفاده از RDFa در یک سند HTML، می‌توانید ویژگی‌های خاصی را به برچسب‌های HTML اضافه کنید تا متادیتای RDF مرتبط با محتوا را نشان دهید. در اینجا نمونه ای از نشانه گذاری RDFa برای نام و آدرس ایمیل یک شخص آورده شده است:

<p typeof="schema:Person">
  My name is <span property="schema:name">Mohammad Fateh</span>
  and my email is <a property="schema:email" href="mailto:info@tut24.ir">info@tut24.ir</a>.
</p>

در این مثال، ما از ویژگی typeofبرای نشان دادن اینکه محتوای تگ p نشان دهنده یک شی Person در واژگان Schema.org استفاده می کنیم. ما همچنین از ویژگی property برای تعیین نام و خصوصیات ایمیل شی Person با مقادیر مربوطه در span و یک برچسب استفاده می کنیم.

به طور کلی، RDFa یک ابزار قدرتمند برای افزودن ابرداده ساختاریافته به محتوای وب و بهبود قابلیت کشف و قابلیت همکاری آن است. در حالی که به برخی از نشانه گذاری ها و تخصص فنی اضافی نیاز دارد، می تواند مزایای قابل توجهی برای SEO و سایر برنامه ها ارائه دهد.

میکروفرمت ها (microformats) در داده های ساخت یافته چیست؟

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

میکروفرمت‌ها از تگ‌ها و ویژگی‌های استاندارد HTML برای علامت‌گذاری محتوا به‌گونه‌ای استفاده می‌کنند که هم برای انسان قابل خواندن باشد و هم توسط ماشین خوانده شود. به عنوان مثال، میکروفرمت hCard برای نمایش اطلاعات یک شخص یا سازمان استفاده می شود و از تگ های استاندارد HTML مانند div، p و a برای نشان دادن ویژگی های مختلف آن موجودیت استفاده می کند.

یکی از مزایای کلیدی میکروفرمت ها این است که پیاده سازی آنها ساده و آسان است. توسعه دهندگان وب می توانند به سادگی چند ویژگی اضافی به تگ های HTML موجود اضافه کنند تا متادیتای میکروفرمت را نشان دهند، بدون اینکه نیازی به یادگیری زبان نشانه گذاری یا نحو جدید داشته باشند.

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

میکروفرمت ها از جهاتی شبیه سایر فرمت داده های ساخت یافته مانند RDFa و JSON-LD هستند. با این حال، میکروفرمت‌ها در قابلیت‌های خود محدودتر هستند و عموماً برای ساختارهای فراداده ساده‌تر استفاده می‌شوند.

در اینجا مثالی از استفاده از میکروفرمت hCard برای نشان دادن اطلاعات یک شخص آورده شده است:

<div class="vcard">
  <p class="fn">Mohammad Fateh</p>
  <a class="email" href="mailto:info@tut24.ir">info@tut24.ir</a>
  <p class="org">Tut24 Inc.</p>
</div>

در این مثال، ما از ویژگی class استفاده می‌کنیم تا نشان دهیم که عنصر div یک شی hCard را نشان می‌دهد. ما همچنین از ویژگی class برای نشان دادن ویژگی‌های مختلف شی، مانند نام شخص (fn)، آدرس ایمیل (email) و سازمان (org) استفاده می‌کنیم.

به طور کلی، میکروفرمت‌ها روشی ساده و مؤثر برای افزودن ابرداده ساختاریافته به محتوای وب هستند و می‌توانند به بهبود قابلیت کشف و استفاده از آن محتوا در طیف گسترده‌ای از برنامه‌ها و خدمات کمک کنند.

در این مقاله سعی کردیم  داده های ساختار یافته Structured data در صفحه وب را با برخی مثال ها و توضیحات مفاهیم آن ها بررسی نماییم. برای یادگیری و مطالعه بیشتر و همچنین آموختن جزئیات ، روش استفاده ، مثال ها و ... می توانید از لینک های زیر نیز استفاده نمایید :
رفرنس سایت Schema.org

رفرنس RDFa

رفرنس میکروفرمتس

رفرنس JSON-LD

داده های ساخت یافته که Google از آن ها پشتیبانی می کند