Rich snippet (ریچ اسنیپت) چیست؟
امروز با مقاله ای دیگر از مجموعه ی سئو وب سایت و بهینه سازی وب سایت وب مدار در خدمت شما هستیم تا با اصلاح Rich snippet (ریچ اسنیپت) که بخش مهمی را در سئو وب سایت ایفا می کنند آشنا شویم، چرا که بکارگیری آن ها نسبت به سئوی سنتی دارای پیچیدگی های بیشتری می باشد.
Rich snippet داده هایی می باشد که می تواند به صورت یک سری کد HTML در صفحات وب سایت قرار گیرد تا در نتایج جستجو توسط کاربران، لینک های وب سایت ما ستاره دار شوند و یا دارای بخشی از اطلاعات واضح تر مانند عکس ، اطلاعات نویسنده و … باشند که در پایین نتایج جستجو نمایش داده شود. به خلاصه تر با Rich snippet ها می توانیم در نتایج جستجو بهتر دیده شویم و همچنین کاربران به راحتی به محتوای صفحه پی ببرند.
نمونه ای از دو سایت که در اولی از ریچ اسنیپت استفاده شده است:
چه نوع محتوایی را Rich snippet ها پشتیبانی می کنند؟
سه نوع ستاره دار کردن مطالب که در حال حاضر توسط موتورهای جستجو شناخته می شود که گوگل پیشنهاد می تواید که از Microdata (مایکرو دیتا) در طراحی سایت استفاده نماییم که در ادامه با آن بیشتر آشنا می شویم با این حال هر سه فرمت زیر قابل قبول می باشد و شما به دانش خاصی بجز دانش جزیی از HTML برای اقدام به این فرمت نیاز ندارید.
Microdata
Microformats
RDFa
هر سه نوع محتوا از Html حمایت می کنند و می توان با استفاده از آن ها محتوای یک صفحه را برچسب گذاری نمود.میکرو دیتا Microdata معمول ترین نوع محتوایی است که در ریچ اسنیپت ها استفاده می گردد.
microdata چیست؟
زمانی که شما وارد سایت سئو و بهینه سازی وب سایت وب مدار می شوید با خواندن بخشی از مقاله متوجه می شوید که راجع به چه موضوعی و مرتبط با چه مساله ای می باشد اما موتورهای جستجوگر در حالت عادی تمامی مطالب سایت شمارو به عنوان text و متن در نظر می گیرند و قدرت تشخیص و تفکیک موضوعی بین مطالب شمارو ندارند . با استفاده از تگ های microdata شما می توانید موتورهای جستجوگر رو راهنمایی کنید و موضوع مطلبتان را به موتور جستجوگر بفهمانید . به عنوان مثال این مقاله در رابطه با تاریخ است ، یا در رابطه با یک شخص است ، یا در رابطه با یک موضوع علمی است و … . قابل ذکر است که این تگ ها در HTML5 مورد استفاده قرار می گیرد که توسط سایت http://schema.org تعریف و استاندارد سازی شده است .
برای مثال یک تگ div که نام و مشخصات یک کتاب در آن قرار دارد کد آن را به صورت زیر وارد میکنیم:
1 2 3 | <div itemscope itemtype="http://schema.org/Book" > دیگر جزئیات در این قسمت قرار میگیرد </div> |
همان طور که مشاهده می کنید از نشانه گذاری داده مثل Itemscope ، Itemtype و Itemprop استفاده شده است. پس بهتر است از قبل درباره Semantic Markup و Schema.org مطالعه داشته باشیم تا به راحتی این بخش را اعمال کنیم.
انواع Rich snippet ها
همان طور که گفتیم از ریچ اسنیپت ها (یا همان داده های نشانه گذاری شده) برای بهتر دیده شدن استفاده می شود و می توانید به حالت های گوناگونی در وب سایت خود استفاده کنید. در این قسمت با انواع ریچ اسنیپت ها و این که چه اطلاعاتی را در نتایج جستجو نشان می دهند و چگونه به سئو وب سایت کمک می کنند آشنا می شویم.
ریچ اسنیپت محصولات (Products Rich Snippet)
یکی از اصلی ترین موارد استفاده از ریچ اسنیپت ها برای فروش محصولات در فروشگاه های اینترنتی آنلاین است. به عنوان مثال فروشگاه های اینترنتی که یک محصول را از چند فروشنده ی متفاوت نمایش می دهند می توانند محدوده ی قیمت آن جنس را بر اساس نزولی و صعودی بودن آن رتبه بندی کنند. این مشخصات می تواند شامل تصویر، نام ، برند، موجودی انبار و … باشد که برای ای کار کافیست در صفحه نمایش محصول به کمک کدهای زیر این کار را پیاده سازی کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <div itemscope itemtype="http://schema.org/Product"> <span itemprop="brand">نام برند مثلا سونی</span> <span itemprop="name">نام محصول</span> <img itemprop="image" src="anvil_executive.jpg" alt="تصویری از محصول" /> <span itemprop="description"> توضیحات محصول در این قسمت قرار میگیرد </span> Product #: <span itemprop="mpn">925872</span> <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">4.4</span> stars, based on <span itemprop="reviewCount">89 </span> reviews </span> <span itemprop="offers" itemscope itemtype="http://schema.org/Offer"> Regular price: $179.99 <meta itemprop="priceCurrency" content="USD" /> $<span itemprop="price">119.99</span> (Sale ends <time itemprop="priceValidUntil" datetime="2020-11-05"> 5 November!</time>) Available from: <span itemprop="seller" itemscope itemtype="http://schema.org/Organization"> <span itemprop="name">Executive Objects</span> </span> Condition: <link itemprop="itemCondition" href="http://schema.org/UsedCondition"/>Previously owned, in excellent condition <link itemprop="availability" href="http://schema.org/InStock"/>In stock! Order now!</span> </span> </div> |
بعد از آن که این مراحل را به درستی انجام دادید نحوه ی نمایش محصولات سایت شما در موتور های جستجو به شکل زیر می باشد:
ریچ اسنیپت ویدئو (Video Content Rich Snippet)
اگر در یک صفحه از محتوای وب سایت خود فایل نوع ویدئو داشته باشیم بهتر است برای نمایس بهتر در نتایج جستجو این فایل ویدئویی را برای موتورهای جستجو قابل تشخیص کنیم که برای این کار از قطعه کد زیر در آن صفحه مربوطه استفاده میکنیم.
نکته ای که وجود دارد اطلاعات درون تگها فرضی است و شما باید این اطلاعات را با اطلاعات واقعی وب سایت خودتان جایگزین کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div itemprop="video" itemscope itemtype="http://schema.org/VideoObject"> <h2>Video: <span itemprop="name">Title</span></h2> <meta itemprop="duration" content="T1M33S" /> <meta itemprop="thumbnailUrl" content="thumbnail.jpg" /> <meta itemprop="contentURL" content="http://www.example.com/video123.flv" /> <meta itemprop="embedURL" content="http://www.example.com/videoplayer.swf?video=123" /> <meta itemprop="uploadDate" content="2011-07-05T08:00:00+08:00" /> <meta itemprop="expires" content="2012-01-30T19:00:00+08:00" /> <meta itemprop="height" content="400" /> <meta itemprop="width" content="400" /> <object ...> <param ...> <embed type="application/x-shockwave-flash" ...> </object> <span itemprop="description">Video description</span> </div> |
بعد از آن که این مراحل را به درستی انجام دادید نحوه ی نمایش ویدئو های سایت شما در موتور های جستجو به شکل زیر خواهد بود:
ریچ اسنیپت لینک ها (Breadcrumbs Rich Snippet)
این نوع ریچ اسنیپت در سئو وب سایت تاثیر خوبی دارد و عملکرد آن بدین گونه است که به جای آن که URL صفحه مورد نظر به کاربران در نتایج نمایش داده شود، مسیر جایگاه آن مطلب در دسته بندی های سایت به کاربر نشان داده می شود. در واقع فهرستی و دسته بندی که برای رسیدن به این بخش از سایت انجام داده اید در نتایج جستجو نشان داده می شود که برای ای کار کافیست در صفحه نمایش مربوطه به کمک کدهای زیر این کار را پیاده سازی کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <ol itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://example.com/books"> <span itemprop="name">Books</span> <img itemprop="image" src="http://example.com/images/icon-bookicon.png" alt="Books"/></a> <meta itemprop="position" content="1" /> </li> › <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://example.com/books/sciencefiction"> <span itemprop="name">Science Fiction</span> <img itemprop="image" src="http://example.com/images/icon-science-fiction.png" alt="Genre: Science Fiction"/></a> <meta itemprop="position" content="2" /> </li> › <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="https://example.com/books/sciencefiction/ancillaryjustice"> <span itemprop="name">Ancillary Justice</span> <img itemprop="image" src="http://example.com/images/cover-ancillary-justice.png" alt="Ancillary Justice"/></a> <meta itemprop="position" content="3" /> </li> </ol> |
بعد از آن که این مراحل را به درستی انجام دادید نحوه ی نمایش لینک ها و آدرس دهی های سایت شما به شکل زیر در موتور های جستجو تغییر خواهد کرد:
ریچ اسنیپت رویدادها (Events Rich Snippet)
اگر مجموعه یا شرکت شما قصد آن را دارد که در آینده ای نه چندان دور رخدادی را برگزار کنید، ریچ اسنیپت Events می توانند برای تبلیغات و اطلاع رسانی به کاربران به شما کمک کنند. می توانید اطلاعات مربوط به زمان شروع رویداد، مدت زمان رویداد و مکان برگزاری رویداد را وارد نمایید. به این ترتیب همه ی این اطلاعات در نتایج جستجو به کاربران نشان داده می شوند که برای این کار از کد زیر در آن صفحه مربوطه استفاده میکنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <div class="event-wrapper" itemscope itemtype="http://schema.org/Event"> <h1 itemprop="name">The 2016 Missoula Marathon</h1> <p>The 2016 <a itemprop="url" href="http://www.missoulamarathon.org/events/marathon/">Missoula Marathon</a> is sponsored by <span itemprop="sponsor" itemtype="http://schema.org/Organization"><a itemprop="url" href="http://www.runwildmissoula.org/"> <span itemprop="name">Run Wild Missoula</span></a></span>.</p> <div class="event-date" itemprop="startDate" content="2016-07-10T06:00">Date/Time: Sunday, July 10th, 2016, 6:00am</div> <div class="event-fees"> <p>Cost:</p> <ul> <li itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <a itemprop="url" href="http://www.runwildmissoula.org/runwild/index.php/ID/mmar2016/fuseaction/register.main.htm"> <span itemprop="validFrom" content="2015-10-01T00:01">Oct 1, 2015</span> – <span itemprop="validThrough" content="2016-01-31T23:59">Jan 31, 2016</span> – <span itemprop="price" content="85.00"><span itemprop="priceCurrency" content="USD">$85</span></span></a> </li> <li itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <a itemprop="url" href="http://www.runwildmissoula.org/runwild/index.php/ID/mmar2016/fuseaction/register.main.htm"> <span itemprop="validFrom" content="2016-02-01T00:01">Feb 1, 2016</span> – <span itemprop="validThrough" content="2016-06-14T23:59">June 14, 2016</span> – <span itemprop="price" content="95.00"><span itemprop="priceCurrency" content="USD">$95</span></span></a> </li> <li itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <a itemprop="url" href="http://www.runwildmissoula.org/runwild/index.php/ID/mmar2016/fuseaction/register.main.htm"> <span itemprop="validFrom" content="2016-06-15T00:01">Jun 15, 2016</span> – <span itemprop="validThrough" content="2016-07-09T23:59">July 9, 2016</span> – <span itemprop="price" content="125.00"><span itemprop="priceCurrency" content="USD">$125</span></span></a> </li> </ul> </div> <div class="description" itemprop="description"> <p>The Missoula Marathon course is flat, fast, USATF certified, and a Boston Qualifier! The marathon course does have a significant hill at the halfway point. The course is a point-to-point, beginning with a scenic route through the countryside and finishing in historic downtown Missoula. The marathon course is well marked with both cones and arrows on the road. You will notice every mile is marked on the road and with 8ft tall mile markers.</p> <p>Wheelchair and Handcycle: We are pleased to offer wheelchair and handcycle divisions in the 2016 Full and Half Marathon.</p> </div> <div class="location" itemprop="location" itemscope itemtype="http://schema.org/Place"> <h2 itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <a href="http://www.ci.missoula.mt.us/">About <span itemprop="addressLocality">Missoula</span>, <span itemprop="addressRegion">MT</span></a> </h2> <h2 itemprop="hasMap"><a itemprop="map" itemtype="https://schema.org/Map" href="http://www.missoulamarathon.org/wp-content/uploads/2015/06/2015-MM-Course-Map-V1-6-2-15.png">View Course Map</a> </h2> </div> </div> |
در نتیجه اگر سایت شما در لیست نتایج جستجو گوگل نشان داده شود (آن صفحه مربوطه) در این صورت نتیجه تقریباً مشابه شکل زیر خواهد بود:
ریچ اسنیپت سازمان (Business Rich Snippet)
اگر سایتی سازمانی یا شرکتی دارید و می خواهید در نتایج جستجو گوگل به نمایش گذاشته شود برای این کار کافیست اطلاعاتی مانند نام تجاری، آدرس سایت، شماره تلفن، لوگو و موقعیت جغرافیایی سازمان را در ریچ اسنیپت ها وارد کنید ولی نکته ای که وجود دارد ابتدا باید وب سایت خود را در Google webmaster tools ثبت کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "url": "https://www.example.com/", "potentialAction": [{ "@type": "SearchAction", "target": "https://query.example.com/search?q={search_term_string}", "query-input": "required name=search_term_string" },{ "@type": "SearchAction", "target": "android-app://com.example/https/query.example.com/search/?q={search_term_string}", "query-input": "required name=search_term_string" }] } </script> |
بعد از آن که این مراحل را به درستی انجام دادید نحوه ی نمایش وب سایت شما در موتور های جستجو به شکل زیر خواهد بود:
ریچ اسنیپت نقد و بررسی (Reviews Rich Snippet)
شاید یکی از مواردی که برای شما هم سوال بوده باشد نحوه ی ستاره انداختن در نتایج جستجو بعضی از سایت ها بوده است. شما می توانید برای نقد و بررسی وب سایت خود از ریچ اسنیپت Reviews استفاده کنید. در این نوع ریچ اسنیپت شما می توانید یک نقد و بررسی را در نتایج جستجو به نمایش بگذارید یا می توانید مجموعه ای از آن ها را نشان دهید. ریچ اسنیپت Reviews به کاربران سایت امکان می دهد که به وب سایت شما امتیاز دهند. درضمن شما می توانید نام شخص نظر دهنده را در نتایج جستجو نمایش دهید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div itemscope itemtype="http://schema.org/Review"> <div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Restaurant"> <img itemprop="image" src="seafood-restaurant.jpg" alt="Catcher in the Rye"/> <span itemprop="name">Legal Seafood</span> </div> <span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <span itemprop="ratingValue">4</span> </span> stars - <b>"<span itemprop="name">A good seafood place.</span>" </b> <span itemprop="author" itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Bob Smith</span> </span> <span itemprop="reviewBody">The seafood is great.</span> <div itemprop="publisher" itemscope itemtype="http://schema.org/Organization"> <meta itemprop="name" content="Washington Times"> </div> </div> |
و بعد از وارد کردن کد بالا اگر سایت شما در لیست نتایج جستجو گوگل نشان داده شود آن صفحه به شکل زیر نمایش داده خواهد شد:
ریچ اسنیپت موزیک (Music Rich Snippet)
ریچ اسنیپت Music شامل لینک هایی برای نمایش ترانه ها و لینک های مستقیمی برای خرید آهنگ ها موسیقی مورد علاقه کاربران هستند. البته موتور جستجوی بینگ از ریچ اسنیپت Music پشتیبانی نمی کند ولی موتور جستجوگر گوگل می تواند از اطلاعات نشانه گذاری شده برای آهنگ ها و آلبوم های موسیقی پشتیبانی کند که قطعه کد آن در پایین برایتان آورده ایم:
MUSIC GROUP
1 2 3 4 5 | <div itemscope="" itemtype="http://schema.org/MusicGroup"> <h1 itemprop="name">[actor]</h1> Album: <span itemprop="album">[albumname]</span> <div itemprop="tracks"></div> </div> |
Music Recording
1 2 3 4 5 6 7 8 9 10 11 12 | <div itemscope="" itemtype="http://schema.org/MusicRecording"> <span itemprop="name">[name]</span> Length:<meta itemprop="duration" content="PT[minutes]M[seconds]S" />[minutes]:[seconds] - [userplays] plays <meta itemprop="interactionCount" content="UserPlays:[userplays]" /> <a itemprop="url" href="[url]">Read more</a> - <a itemprop="audio" href="[playurl]">Play</a> - <a itemprop="offers" href="[buyurl]">Buy</a> From album: <a itemprop="inAlbum" href="[albumurl]">[albumname]</a> </div> |
همچنین نحوه نمایش آن در موتور های جستجو به شکل زیر خواهد بود:
فواید اضافه کردن Rich Snippet
نوعی تبلیغ و جلب توجه کاربران به لینک شما در صفحه SERP
بهینه سازی وب سایت شما برای موتور ها جستجو
افزایش نرخ CTR
درک بهتر محتوای وب سایت ما توسط دستگاههای کتاب خوان ویژه افراد نابینا و معلول
شناسایی بهتر و دقیق تر محتوای وب سایت توسط خزنده های موتورهای جستجو
رضایتمندی بیشتر کاربران نسبت به سایت شما زیرا در زمان کمتری به محتوای وب سایتتان پی خواهند برد.
و درپایان…
امیدوارم مقاله Rich snippet (ریچ اسنیپت) که از طریق گروه سئو و بهینه سازی وب سایت وب مدار برایتان مطرح شد مفید واقع گردد.
مدرس دوره ciw و سئو و بهینه سازی وب سایت مجتمع فنی تهران طراح و برنامه نویس وب و سئو کار
با سلام، به چه صورت می توان ریچ اسنیپت نقد و بررسی (Reviews Rich Snippet) یا همان ستاره دادن به مطالب را در PHP انجام داد. هرچقدر جستجو کردم متاسفانه فقط برای سایتهای wordpress مطالب موجود هست. لطفاً قسمت اخبار سایت مانا ترجمه را ببینید، در این قسمت لازم دارم. ممنون میشم راهنمایی کنید.
خیلی عالی بود ممنون