Schema Markup چیست؟

 

Schema Markup چیست؟

Schema markup در Schema.org یافت می‌شود  و یک نوع از  microdata می‌باشد. وقتی Schema Markup به صفحات وب اضافه شود توضیحات اضافی (معمولاً به‌عنوان rich snippet شناخته می‌شود) را به نتایج جستجو اضافه می‌کند. به  طور خلاصه می توان گفت Schema markup به موتورهای جستجوگر کمک می کند تا آنها نتایح را با شکل و ظاهر بهتری نشان دهند این به معنی دستکاری در نتایج نیست تنها در شکل ظاهری تاثیر دارند مثلا اضافه کردن ستاره در زیر نتایج یا عکس کنار نتایج

موتورهای جستجو مهم مانند گوگل، یاهو، بینگ و یاندکس اولین بار در سال 2011 برای ساخت Schema.org شروع به کار کردند.

 

اکثر وب مسترها با تگ‌های HTML

اکثر وب مسترها با تگ‌های HTML در صفحات خود آشنا هستند. معمولاً برچسب‌های HTML به مرورگر می‌گویند که چگونه اطلاعات موجود در تگ نمایش داده شود. به‌عنوان‌مثال، <h1>Avatar</h> به مرورگر می‌گوید که متن “Avatar” را در فرمت هدینگ 1 نمایش دهد. با این‌ حال، تگ HTML هیچ اطلاعاتی در مورد معنای رشته متن نمی‌دهد. (آواتار می‌تواند به فیلم فوق‌العاده موفق 3D اشاره کند یا می‌تواند به یک نوع تصویر پروفایل اشاره کند)

اگر شما از داده های ساخته یافته ( Schema.org) استفاده کنید گوگل و سایر موتورهای جستجوگر بهتر می توانند محتوای قرار داده شده و اصطلاحات قرار داده شده در وب سایت را بفهمند و بهتر می توانند نسبت به سرچ ها پاسخ دهند

آیا Schema رتبه وب‌ سایت شما را بهبود می‌بخشد؟

هیچ شواهد و مدرکی وجود ندارد که microdata تأثیر مستقیمی بر رتبه‌بندی جستجوی ارگانیک داشته باشد. البته این داده ها با توجه به  تغییر ظاهری که برای وب سایت ها در نتایج می آورند باعث می شوند نرخ کلیک وب سایت ها افزایش پیدا کند و این بالارفتن نرخ کلیک می تواند به سئو وب سایت شما کمک کند . پس می توان گفت این داده ها به صورت غیر مستقیم روی سئو سایت تاثیر گذار می باشند

بر اساس مطالعه‌ای توسط acmque، کمتر از یک‌سوم نتایج جستجو گوگل شامل rich snippet هستند که با Schema.org نشانه‌گذاری شده‌اند. استفاده از این نشانه‌گذاری‌ها فرصتی مناسب برای ارتقای رتبه وب‌سایت شماست زیرا می‌تواند تأثیر زیادی بر سئوی سایت شما داشته باشد.

تاثیر Schema Markup از زبان Gary Ilyes 

Schema برای موارد زیر استفاده می‌شود؟

• کسب‌وکارها و سازمان‌ها (Businesses and organizations)
• رخدادها (Events)
• افراد (People)
• محصولات (Products)
• دستورالعمل‌ها (Recipes)
• نظرات  (Reviews)
• ویدئوها (Videos)

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

روش های اضافه کردن structured data به وب سایت

استفاده از JSON-LD

اولین روش برای اضافه کردن structured data که دارای مورد استفاده بسیار زیادی نیز می باشد JSON-LD می باشد برای اضافه کردن این داده ها به وب سایت شما نیازی به کد نویسی و یا مهارت در کدنویسی ندارید

شما می توانید با مراجعه به وب سایت Schema.org انواع مختلفی از JSON-LD  را همراه با مثال مشاهده کنید همچنین با مراجعه به وب سایت https://jsonld.com نیز می توانید چندین مثال به همراه نحوه استفاده از آنها را مشاهده نمایید

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

ما به عنوان مثال برای مقاله می خواهیم JSON-LD  را اضافه کنیم کافی است به آدرس https://jsonld.com/article/ مراجعه کنید و کد مربوطه را کپی و در قسمت head برنامه خود قرار دهید و سپس تغییرات لازم را انجام دهید(در ویدئو بالا کاملا توضیح داده شده است)

استفاده از  Microdata

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

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

برای مثال محتوای وب‌سایت شما مربوط به کدام‌ یک از موارد غذا یا موزیک یا آموزش می‌باشد؟

بعد از اینکه شما نوع محتوا را مشخص کردید باید تعیین کنید چگونه آنها را به آن تگ اضافه می‌کنید.

به‌عنوان‌مثال، شما دارای یک فروشگاه هستید که روترهای باکیفیت بالا را به فروش می‌رساند اگر شما به کد اصلی صفحه اصلی خود نگاه کنید، احتمالاً چیزی شبیه به این خواهید یافت:

<div>

<h1>TechHaven</h1>

<h2>The best routers you’ll find online!</h2>

<p>Address:</p>

<p>459 Humpback Road</p>

<p>Rialto, Ca</p>

<p>Tel: 909 574 3903</p>

<p>Mon-Sat 8am – 10:30pm</p>

<p>Sun: 2pm – 8pm</p>

</div>

1-برای تغییر کد وب سایت بالا به Microdata  ابتدا <div> را به صورت زیر تغییر می دهیم

<div itemscope>

با اضافه کردن این تگ، ما بیان می‌کنیم که کد HTML بین بلوک‌های <div> برای معرفی یک مورد خاص می‌باشد.

سپس، با توجه به نوع مقاله ای که داریم یک دسته برای itemtype  استفاده می کنیم ما از دسته tech استفاده کرده ایم (مانند کد زیر).

<“div itemscope itemtype=”http://schema.org/tech>

نوع آیتم به‌صورت یک URL می‌باشد (مانند http://schema.org/tech)قرار میگیرد

به‌عنوان‌مثال، اگر موضوع سایت شما محصولات زیبایی باشد. URL نوع موردنظر شما مانند زیر مشود:

http://schema.org/beauty

برای مشاهده لیست کامل آیتم به لینک http://schema.org/docs/full.html مراجعه نمایید

2- در مرحله بعد شما باید کد h1  که نام خدمات می باشد را به صورت زیر تغییر دهید

<h1 itemprop=”name”>Tech Haven</h1>

3- در مرحله بعد شما باید h2 که برای Tech Haven به عنوان توضیح می باشد را به صورت زیر تغییر دهید

<h2 itemprop=”description”>The best routers you’ll find online!</h2>

4- برای مشخص کردن آدرس بعد از تگ <p>Address:</p> کد زیر را قرار دهید

<span itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>

5- در این مرحله <p>459 Humpback Road</p> را که خیابان را مشخص می کند را به صورت زیر تغییر می دهیم

<p itemprop=”streetAddress”>459 Humpback Road </p>

6- سپس خصوصیت addressLocality که مرتبط با شهر و منطقه می باشد را با <p itemprop=”addressLocality”>Rialto, Ca</p></span> اضافه می کنیم

<p itemprop=”addressLocality”>Rialto, Ca</p></span>

7-سپس خصوصیت itemprop=telephone که مربوط با تلفن می باشد را اضافه می کنیم

<p>Tel: <span itemprop=”telephone”>909 574 3903</span></p>

8- در مرحله آخر نیز ساعات باز و بسته بود را با اضافه کردن خصوصیت ها openingHours و openingHours به صفحه اضافه می کنیم

<div itemscope>

<h1 itemprop=”name”>Tech Haven</h1>

<h2 itemprop=”description”>The best routers you’ll find online!</h2>
<p>Address:</p>
<span itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>
<p itemprop=”streetAddress”>459 Humpback Road </p>
<p itemprop=”addressLocality”>Rialto, Ca</p></span>
<p>Tel: <span itemprop=”telephone”>909 574 3903</span></p>
<p itemprop=”openingHours”>Mon-Sat 8am – 10:30pm</p>
<p itemprop=”openingHours”>Sun: 2pm – 8pm</p>

</div>

اگر این کد برای شما پیچیده می باشد شما می توانید به وب سایت schema.org مراجعه کنید و نمونه های مختلفی از این مثال را در آنجا مشاهده کنید و اگر دوباره به مشکل برخوردید و نتوانستید از این کد ها استفاده کنید  می توانید از ابزار  Google’s Structured Data Markup Helper که از آن گوگل می باشد برای ساخت این کد ها استفاده نمایید

استفاده از RDFa

RDFa مخفف عبارت Resource Description Framework in Attributes می‌باشد. اساساً RDFa  برای 5 HTML می‌باشد. آنها برای کمک به کاربران در نشانه‌گذاری داده‌های ساخت‌یافته می باشند

RDFa خیلی متفاوت از Microdata نیست. تگ‌های RDFa مشابه با microdata یا کمی تفاوت هستند . به خاطر آشنایی با RDFa   باز به مثال tech برمیگیردیم

کد HTML برای سایت تکنولوژی tech شما قبل از ویرایش مانند زیر می‌باشد:

<div>
<h1>Tech Haven</h1>
<h2>The best routers online!</h2>
<p>Address:</p>
<p>459 Humpback Road </p>
<p>Rialto, Ca</p>
<p>Tel: 909 574 3903</p>
<p><a href=”http://www.techhaven.com/menu”>Click here to view our best routers!</a></p>
<p>We’re open:</p>
<p>Mon-Sat 8:00am – 10:30pm</p>
<p>Sun: 2pm – 8pm</p>
</div>

1-در ابتدا  typeof=technology را به div  مانند کد زیر اضافه کنید

<“div vocab=”http://schema.org/” typeof=”technology>

2-در مرحله بعد div زیر را برای نشانه کذاری آدرس اضافه نمایید

<“div property=”address” typeof=”PostalAddress>

3- برای مشخص کردن خیابان نیز از خصوصیت استفاده streetAddress کنید

<p property=”streetAddress”>459 Humpback Road</p>

4-برای مشخص کردن محل و منطقه نیز از addressLocality  استفاده نمایید

<p property=”addressLocality”>Rialto, Ca</p>

5- برای مشخص کردن و نشان گذاری تلفن نیز از  خصوصیت telephone استفاده کنید

<p>Tel: <span property=”telephone”>909 574 3903</span></p>

6- در انتها برای مشخص کردن باز و بسته بود و ساعات کاری نیز از خصوصیات openingHours استفاده نمایید

7- کل کد بعد از تغییر به RDFa  به صورت زیر می باشد

<h2 property=”description”>The best routers on the internet!</h2>
<p>Address:</p>
<div property=”address” typeof=”PostalAddress”>
<p property=”streetAddress”>459 Humpback Road</p>
<p property=”addressLocality”>Rialto, Ca</p>
</div>
<p>Tel: <span property=”telephone”>909 574 3903</span></p>
<p property=”openingHours”>Mon-Sat 8am – 10:30pm</p>
<p property=”openingHours”>Sun: 2pm – 8pm</p>
</div>

تست داده های ساخته یافته

بعد از اینکه شما داده های ساخته یافته را به وب سایت خود اضافه کردید حتما تست نمایید که کد ها به صورت صحیح قرار گرفته اند یا نه ، برای این منظور می توانید از ابزار شما Structured Data Testing که از آن شرکت گوگل می باشد استفاده کنید

7 افزونه schema وردپرس

1.  Schema Pro
2. WP Review Pro
3. WP Product Review
4. All In One Schema.org Rich Snippets
5. Rich Snippets WordPress Plugin
6. Rich Reviews
7. Schema App Structured Data