Rich Snippet (سرویس جدیدی از گوگل) ریچ اسنیپتReviewed by میلاد غیب‌دوست on Aug 3Rating: 4.0Rich Snippet (سرویس جدیدی از گوگل) ریچ اسنیپت

Rich Snippet (ریچ اسنیپت )

google-rich-snippets

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

آیا تا بحال در هنگام مشاهده نتیجه جستجو، به این فکر کرده اید که برخی نتایج بیشتر در چشم شما جلوه می کنند؟ اگر شما جمله ی “ارزیابی موبایل سونی xperia z” را جستجو کنید، نتایج زیر را خواهید دید:

 

مطمئنا نتیجه ی شماره ۲ جلوه ی بیشتری در چشم شما ایجاد خواهد کرد. این سایت ها چه کارهایی را انجام می دهند تا گوگل را وادار کنند که این اطلاعات اضافی را در نتایج نمایش دهد؟ این وب سایت ها از تکنولوژی Rich Snippets در نمایش نتایج استفاده می کنند.

ریچ اسنیپت ها کدهای نشانه گذاری شدۀ کوچکی برای صفحات شما هستند که به عنوان متن در زیر عنوان لینک در نتایج موتورهای جستجوگر ظاهر می شوند. آنها دقیقا ظاهری شبیه زیر خواهند داشت:

افزایش ترافیک سایت بدون لینک سازی

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

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

  • نقد و بررسی ها
  • موسیقی
  • دستور العمل ها
  • محصولات
  • افراد
  • کسب وکارها و سازمانها

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

 

Rich Snippet(ریچ اسنیپت) ها چی هستند؟

ریچ اسنیپت های گوگل اطلاعات موجود در سایت شما علاوه بر اطلاعات معمولی همانند لینک صفحه، Title، Descriptionو متاتگ ها  را برای نمایش در نتایج جستجو بررسی و آماده می کنند. این اطلاعات اضافی می توانند شامل عکس، رتبه بندی، اطلاعات نویسنده و … باشد.

ریچ اسنیپت ها معمولا در مبحث SEO شرکت ها بخش مهمی را ایفا می کنند، چرا که بکارگیری آن ها نسبت به سئو (ٍSEO) سنتی دارای پیچیدگی های بیشتری می باشد.

 

Rich Snippet(ریچ اسنیپت)ها را چگونه میتوانیم نصب کنیم؟

در اینجا بحث فنی پیاده سازی Rich Snippetها بررسی می شود. راه های مختلفی برای نصب ریچ اسنیپت ها در صفحه وجود دارد. اما در این پست ما قصد معرفی آسان ترین راه را به شما داریم: روش microdata. چون ما نمی خواهیم شما را گیج کنیم، روش آسان نصب را به شما می آموزیم.

 

۱) یاد بگیریم microdata چیست

Microdata روشی است که به کمک آن محتوای صفحات Label گذاری شده و توضیح داده می شود که این اطلاعات درباره چه موضوعی هستند. برای مثال رویدادی قرار است انجام شود و تمامی اطلاعات این رویداد در صفحه وجود دارد. زمان شروع، نام رویداد و دسته بندی. شما نیاز به یک سری از کد ها دارید تا به گوگل بگویید: خب، رویداد من اینجاست و همه ی اطلاعاتی که باید درباره ی آن بدانی نیز موجود است.

این کدها بوسیله HTML نوشته می شوند. نگران نباشید. نیاز نیست شما HTML را یاد بگیرید. Microdata کدهای HTML بسیار ساده هستند. مانند تگ های <span> و <div> که توضیحات تکمیلی را ارائه می کند.

در زیر، برای مثال، کدهای HTML وجود دارد که اطلاعاتی را درباره من ارائه می کند:

<div>نام من میلاد است و در تهران زندگی می کنم.
من کارشناس سئو در اوکس تیم هستم و آدرس سایت ما
<a href="http://oxteam.ir">www.oxteam.ir</a>
می باشد.</div>

کد HTML microdata به شرح زیر می باشد:

<div>نام من میلاد<span itemprop="name"> است و در تهران زندگی می کنم.
من </span>کارشناس سئو<span itemprop="title"> تیم در</span> اوکس<span itemprop="affiliation"> هستم و آدرس سایت ما
<a itemprop="url" href="http://oxteam.ir">www.oxteam.ir</a>
می باشد. </span></div>

۲) شروع به ساخت محتوای خود کنید

ریچ اسنیپت های مختلف را در زیر بخوانید و ساخت محتوای خود را شروع کنید.

۳) ریچ اسنیپت های خود با وب مستر تولز تست کنید

گوگل وبمستر تولز ابزاری کارآمد دارد که به شما اجازه می دهد اسنیپت هایی که تهیه کرده اید را تست کنید و نحوه ی نمایش آنها را در نتایج جستجو از قبل ببینید. ابزار گوگل را در اینجا ببینید.

۴) صبر داشته باشید

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

 

 انواع Rich Snippets (ریچ اسنیپت)

حال به مهمترین بخش این  مقاله می رسیم. ریچ اسنیپت ها چه انواعی دارند؟ چه اطلاعاتی را در نتایج نشان می دهند و چگونه به SEO سایت کمک می کنند؟

 

اسنیپت نویسنده

اسنیپت نویسنده که مشخصات نویسنده متن را در نتایج نشان میدهد دارای المان های زیر است:

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

 

 

 

اسنیپت Business و Organization

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

 

 

نمونه کد:

<div itemscope="" itemtype="http://schema.org/Organization"><span itemprop="name">L'Amourita Pizza</span>
Located at
<div itemprop="address" itemscope="" itemtype="http://oxteam.ir/About-us"><span itemprop="streetAddress">123 Valiasr St</span>,
<span itemprop="addressLocality">Iran Tehran</span>,
<span itemprop="addressRegion">oxteam location</span>.</div>
<img itemprop="logo" alt="" src="http://www.seo.oxteam.ir/logo.png" />
Phone: <span itemprop="telephone">206-555-1234</span>
<a itemprop="url" href="http://seo.oxteam.ir/">http://seo.oxteam.ir</a>

</div>

اسنیپت رخدادها

این اسنیپت شامل اطلاعات مربوط به رخدادهاست. شامل: تاریخ، مکان و زمان رخداد. اگر رخدادها از یک بیشتر باشد، تا سه عدد از آنها نمایش داده می شود.

 

نمونه کد:

<div itemscope="" itemtype="http://oxteam.ir/Event"><a itemprop="url" href="http://www.oxteam.ir/events/spinaltap">
<span itemprop="summary">Spinal Tap</span>
</a>
<img itemprop="photo" alt="" src="spinal_tap.jpg" /><span itemprop="description">OXTEAM A culture of loyalty to the customer, accompany the first point to get to earn more. .</span>When:
<time itemprop="startDate" datetime="2015-10-15T19:00-08:00">Oct 15, 7:00PM</time>—
<time itemprop="endDate" datetime="2015-10-15T19:00-08:00">Oct 15, 9:00PM</time>Where:
<span itemprop="location" itemscope="" itemtype="http://data-vocabulary.org/Organization">
<span itemprop="name">Oxteam Seo</span>
<span itemprop="address" itemscope="" itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">982 Market St</span>,
<span itemprop="locality">Tehran</span>,
<span itemprop="region">IR</span>
</span>
<span itemprop="geo" itemscope="" itemtype="http://data-vocabulary.org/Geo">
<meta itemprop="latitude" content="37.774929" />
<meta itemprop="longitude" content="-122.419416" />
</span>
</span>Category: <span itemprop="eventType">Concert</span>
<span itemprop="ticketAggregate" itemscope="" itemtype="http://data-vocabulary.org/Offer-aggregate">
Tickets from $<span itemprop="lowPrice">10.00</span>-$<span itemprop="highPrice">11.00</span></span><span itemprop="offerCount">2,000</span> tickets available
<a itemprop="offerurl" href="http://www.example.com/events/spinaltap/alltickets">
http://google.com/ticket</a>See all available tickets

<span itemprop="tickets" itemscope="" itemtype="http://data-vocabulary.org/Offer">
<a itemprop="offerurl" href="http://www.example.com/events/spinaltap/presale">Presale tickets</a>
<span itemprop="price">$10</span>
till <time itemprop="priceValidUntil" datetime="2015-11-10">10 November 2016</time>
(<span itemprop="quantity">1000</span> available)
</span>
<span itemprop="tickets" itemscope="" itemtype="http://data-vocabulary.org/Offer">
<a itemprop="offerurl" href="http://www.example.com/events/spinaltap/tickets">Full-price tickets</a>
<span itemprop="price">ریال۱۱</span>
</span>

</div>

اسنیپت آلبوم های موسیقی

این اسنیپت، لینک به هرکدام از آهنگ های آلبوم و حتی متن آهنگ را در صورت موجود بودن نمایش می دهد.

 

نمونه کد:

<div itemscope="" itemtype="http://schema.org/MusicGroup">
<h1 itemprop="name">The Parrot Family</h1>
<h2>Songs</h2>
<div itemprop="tracks" itemscope="" itemtype="http://schema.org/MusicRecording"><span itemprop="name">Hello, World!</span>
Length:<meta itemprop="duration" content="PT4M5S" />4:05 -
۱۴۳۰۰ plays
<meta itemprop="interactionCount" content="UserPlays:14300" />
<a itemprop="audio" href="parrot-family-helloworld-play.html">Play</a>
<a itemprop="offers" href="parrot-family-helloworld-buy.html">Buy</a>
From album: <a itemprop="inAlbum" href="parrot-family-yellow-album.html">The Yellow Album</a></div>
<a itemprop="url" href="parrot-family-helloworld-link.html">Link</a>
<div itemscope="" itemtype="http://schema.org/MusicRecording"><span itemprop="name">Parrot Power</span>
Length:<meta itemprop="duration" content="PT6M33S" />6:33 -
۱۱۷۰۰ plays
<meta itemprop="interactionCount" content="UserPlays:11700" />
<a itemprop="url" href="parrot-family-parrotpower-link.html">Link</a>
<a itemprop="audio" href="parrot-family-parrotpower-play.html">Play</a>
<a itemprop="offers" href="parrot-family-parrotpower-buy.html">Buy</a>
From album: <a itemprop="inAlbum" href="parrot-family-yellow-album.html">The Yellow Album</a></div>
</div>

اسنیپت افراد

مردم نیز می توانند اطلاعاتی از خود، همچون عنوان شغلی، کمپانی که در آن کار می کنندبه همراه مکان آن را در نتایج نشان دهند. حتی اطلاعاتی همچون Nickname، عکس و… می توانداضافه شود.

اسنیپت افراد با اسنیپت نویسنده تفاوت دارد. در عکس زیر، تفاوت را مشاهده می کنید.

 

نمونه کد:

<div>My name is Bob Smith, but people call me Smithy. Here is my home page:
<a href="http://www.example.com">www.example.com</a>.
I live in Albuquerque, NM and work as an engineer at ACME Corp.
My friends:
<a href="http://darryl-blog.example.com">Darryl</a>,
<a href="http://edna-blog.example.com">Edna</a></div>

اسنیپت محصولات

این اسنیپت، شامل عکس محصول، رتبه بندی و بازه ی قیمتی محصول می باشد.

 

نمونه کد:

<div itemscope="" itemtype="http://data-vocabulary.org/Product"><span itemprop="brand">ACME</span> <span itemprop="name">Executive Anvil</span>
<img itemprop="image" alt="" src="anvil_executive.jpg" /><span itemprop="review" itemscope="" itemtype="http://data-vocabulary.org/Review-aggregate">
Average rating: <span itemprop="rating">4.4</span>, based on
<span itemprop="count">89</span> reviews
</span><span itemprop="offerDetails" itemscope="" itemtype="http://data-vocabulary.org/Offer-aggregate">
from $<span itemprop="lowPrice">119.99</span> to
$<span itemprop="highPrice">199.99</span>
<meta itemprop="currency" content="USD" />
</span></div>

اسنیپت وعده های غذایی

اسنیپت وعده های غذایی اطلاعات کاملی همچون رتبه بندی محصول، زمان تهیه و مقدار کالری محصول می باشد. برای افزودن این اسنیپت نیاز به حداقل ۲ مورد از موارد زیر می باشد:

  • عکس غذا در ظرف
  • تگ: زمان آماده سازی، زمان پخت، زمان کل و یا محتویات
  • کالری
  • رتبه بندی

 

نمونه کد:

<div itemscope="" itemtype="http://data-vocabulary.org/Recipe">
<h1 itemprop="name">Grandma's Holiday Apple Pie</h1>
<img itemprop="photo" alt="" src="apple-pie.jpg" />
By <span itemprop="author">Carol Smith</span>
Published: <time itemprop="published" datetime="2009-11-05">
November 5, 2009</time>
<span itemprop="summary">This is my grandmother's apple pie recipe. I like to add a
dash of nutmeg.</span>
<span itemprop="review" itemscope="" itemtype="http://data-vocabulary.org/Review-aggregate">
<span itemprop="rating">4.0</span> stars based on
<span itemprop="count">35</span> reviews </span>
Prep time: <time itemprop="prepTime" datetime="PT30M">30 min</time>
Cook time: <time itemprop="cookTime" datetime="PT1H">1 hour</time>
Total time: <time itemprop="totalTime" datetime="PT1H30M">1 hour 30 min</time>
Yield: <span itemprop="yield">1 9" pie (8 servings)</span>
<span itemprop="nutrition" itemscope="" itemtype="http://data-vocabulary.org/Nutrition">
Serving size: <span itemprop="servingSize">1 medium slice</span>
Calories per serving: <span itemprop="calories">250</span>
Fat per serving: <span itemprop="fat">12g</span>
</span>
Ingredients:
<span itemprop="ingredient" itemscope="" itemtype="http://data-vocabulary.org/RecipeIngredient">
Thinly-sliced <span itemprop="name">apples</span>:
<span itemprop="amount">6 cups</span>
</span>
<span itemprop="ingredient" itemscope="" itemtype="http://data-vocabulary.org/RecipeIngredient">
<span itemprop="name">White sugar</span>:
<span itemprop="amount">3/4 cup</span>
</span>
...

Directions:
<div itemprop="instructions">1. Cut and peel apples
۲. Mix sugar and cinnamon. Use additional sugar for tart apples.
...</div>
</div>

اسنیپت رتبه بندی

در مثال های قبل، اسنیپت هایی را دیدید که اسنیپت رتبه بندی در آن وجود داشت. اما شما می توانید این رتبه بندی را نیز به تنهایی در نتایج ایجاد کنید. این اسنیپت، رتبه ی محصولی را از بین ۵ ستاره مشخص می کند.

 

نمونه کد:

<img itemprop="rating" alt="4 Star Rating: Recommended" src="four_star_rating.gif" />

اسنیپت ویدیو

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

 

نمونه کد:

<meta name="title" content="Baroo? - cute puppies" />
<meta name="description" content="The cutest canine head tilts on the Internet!" />	<link href="http://example.com/thumbnail_preview.jpg" rel="image_src" /> 	<link href="http://example.com/video_object.swf?id=12345" rel="video_src" /><meta name="video_height" content="296" />
<meta name="video_width" content="512" />
<meta name="video_type" content="application/x-shockwave-flash" />

آیا شما تجربه استفاده از این تکنولوژی را دارید؟ اگر از وردپرس استفاده می کنید، چگونه این اسنیپت ها را در آن قرار می دهید؟ نتایج خود را با ما در میان بگذاربد.