ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

How to Create a Rich Snippet Using Weebly

Updated on August 1, 2016

Recently, I made a recipe website using Weebly. As time progressed, I learned more and more about SEO and soon realized that rich snippets were crucial. Today, I will show you how to use microformat to markup your recipes, or whatever it is that you would like to display rich snippets in Google search results. I will try to keep this as simple as possible for all types of users to get started marking up there website immediately.

Step 1: Edit Your Header

First of all, you want to go to your Weebly website and click 'Edit' on your home screen. Click on the 'Design' Tab and click 'Edit HTML/CSS'. Click on the type of header you used on your recipe pages (Ex: I used noheader.html) Scroll down near the end of the HTML code until you see the </body> tag. You can use websites like schema.org to get the code for your rich snippet. While creating my recipe website, I used this code before the </body> tag.

<div class="hrecipe">
 {content}
 </div>

Editing HTML/CSS Code
Editing HTML/CSS Code | Source

Step 2: Defining Your Title

In Weebly, you will have to markup each recipe individually. So you will now save your changes and go to the page you want to create your rich snippet. We will start with the Title of your recipe. It is important to use h1 and h2 tags throughout your website, so you will want to delete your Title box and drag the 'Embed Code' box into its place. The code you will want to place will look something like this:

<span class="item">
 <h1 class="fn">YourTitleGoesHere</h1>
 </span>

Step 3: Categorize Each Section

Now we will start with the ingredients. Don't delete that text box yet, you will want to use that to refer to your ingredients listed. Drag the 'Embed Code' box above or below your ingredients list. In that HTML box, you will want to type something like this:

<h2>Ingredients:</h2>
<span class="ingredient">
 <span class="name">FirstIngredient</span>:
 <span class="amount">Quantity</span>
 </span><br>

<span class="ingredient">
 <span class="name">SecondIngredient</span>:
 <span class="amount">Quantity</span>
 </span><br> 

<span class="ingredient">
 <span class="name">ThirdIngredient</span>:
 <span class="amount">Quantity</span>
 </span>


Now you can delete your text box with your ingredients. The directions (or instructions) for your recipe are very similar to the ingredients. Here is the code I used to replace that.

<h2>Directions:</h2>
<span>
Type the instructions on how to make your recipe here.
</span>

Step 4: Add Additional Features

The next few items are all very similar as well. However, a lot of recipe websites want these things in there rich snippet, but not visible on there page. If you hide anything on your page, it will not display in the rich snippet. So make sure nothing is hidden, just add to your page what you want displayed in search results. In order to add how long it takes to make your recipe, you will want to add the prep time, cook time, total time, and duration for your recipe. If your recipe does not need to be 'cooked', you can delete that section. The only part that will display in your rich snippet is the total time, the rest is so Google to categorize your recipe.

Prep time: <span class="preptime">30 min<span class="value-title" title="PT30M"></span></span>
Cook time: <span class="cooktime">1 hour<span class="value-title" title="PT1H"></span></span>
Total time: <span class="duration">1 hour 30 min<span class="value-title" title="PT1H30M"></span></span>
Yield: <span class="yield">8 servings</span>


Ratings and reviews are a little difficult while using Weebly because you have to do every single page individually. Whatever you type is what will be displayed. So if you get one hundred new reviews each week for every single recipe, you will be updating your ratings and reviews quite often. If you would still like to add this feature to your site, I went ahead and added it for you. This example shows a recipe with a 5.0 rating and 2,000 reviews.

<span class="review hreview-aggregate">
 <span class="rating">
 <span class="average">5.0</span> stars based on
 <span class="count">2,000</span> reviews
 </span>
 </span>


If your recipe website just so happens to have a nutritional facts section, this example shows how you would embed the serving size, calories per serving, and the fat per serving.

<span class="nutrition">
 Serving size: <span class="servingsize">1 medium slice</span>
 Calories per serving: <span class="calories">250</span>
 Fat per serving: <span class="fat">12g</span>
</span>


To display the author and publish date for your recipe, you would want your code to look something like this. This example shows how it would look if you want to add the author, publish date, and a summary of what you are displaying.

By <span class="author">TheBookOfRecipes.com</span>
Published: <span class="published">December 5, 2014<span class="value-title" title="2014-12-05"></span></span>
<span class="summary">This is our recipe for Glorene's Toased Pecans.</span>

Embedding Code to Create Rich Snippets
Embedding Code to Create Rich Snippets | Source

Step 5: Add an Image

Now, if you have images on your recipe page, you will want to replace that too with HTML instead of the 'Image Box'. This part gets a little complicated and may take awhile at first until you get used to it. You need your image to stay somewhere online so your HTML has somewhere to refer back to. So I made an extra page for all of my images and named it 'Images'. Place your images on this page. You will want to hide this page in navigation, make this page only visible to people with the site password, and hide this page from search engines. Copy and paste the image URL on a notepad so you can refer back to it. It will look like this:

http://www.weebly.com/uploads/3/0/5/9/30599581/1552399_orig.jpg

Now delete http://www.weebly.com so it looks like this:

/uploads/3/0/5/9/30599581/1552399_orig.jpg

Now go back to the recipe page that you were working on. Delete the image from that page. Place the 'Embed Code' box in its place. Images on Weebly have the option to use a 'Lightbox'. A lot of users find this feature to be useful for there website, so I will share with you the code for both. If you want your Weebly website to only display a picture, the code will look something like this:

<img class="photo" src="/uploads/3/0/5/9/30599581/1552399_orig.jpg" alt="Picture" style="width:auto;max-width:100%"></a><div style="display:block;font-size:90%"></div>
</div></div>

If you want the 'Lightbox' feature turned on, it will look something like this:

<div><div class="wsite-image wsite-image-border-thin " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a class="w-fancybox" href="/uploads/3/0/5/9/30599581/1552399_orig.jpg" onclick="if (!lightboxLoaded) return false">
<img class="photo" src="/uploads/3/0/5/9/30599581/1552399_orig.jpg" alt="Picture" style="width:auto;max-width:100%"></a><div style="display:block;font-size:90%"></div>
</div></div>


Notice where i replaced the /uploads/3/0/5/9/30599581/1552399_orig.jpg in the HTML. That is where you will place your image URL that you recently copied and pasted onto your notepad. Once everything seems to be in place, you can publish your website.

Step 6: Test Your Rich Snippet

We can now test your rich snippet by going to Google's Markup Tester Tool. Type in the URL for the page you want to check your rich snippet and click 'Preview'. It should look something like this:

Structured Data Testing Tool
Structured Data Testing Tool | Source

You won't see your image here, but you will see a gray box. If you have reviews and ratings, they will be displayed by your total cook time. If you see the changes you made, then you know it is working properly. It will take about a week before it shows up in your Google Webmaster Tools. It may take 6 weeks or more before displaying in Google's search results. So be patient with these things. It is still good to tell Google how to categorize your recipes to improve your SEO, so i can assure you that it is well worth it.

Structured Data
Structured Data | Source

I know that the process for this can be quiet confusing. I hope that this article can help others to understand how to markup there Weebly website.

Comments

    0 of 8192 characters used
    Post Comment

    • clivewilliams profile image

      Clive Williams 11 months ago from Jamaica

      great info

    • thebookofrecipes profile image
      Author

      Jaydab 3 years ago from Texas

      Just add the hrecipe code before the body tag in your EDIT HTML/CSS under the Design tab.

    • profile image

      Jen 3 years ago

      Could you clarify Step 1? What is the change that you made when you edited html/CSS in weebly? You refer to using the div, hrecipe, when creating the site.

      I'm assuming there is some change or addition here that I should make when trying to do this on my site, but I'm not following? Your instructions go on into more detail, but I never see hrecipe referred to again, so I am not sure what Step 1 is actually telling me to do. Maybe it is something very obvious, but it has lost me.

      If you could clarify that would be great. Thanks!

    • thebookofrecipes profile image
      Author

      Jaydab 3 years ago from Texas

      You need to embed a rating widget on each page that you would like to have. Then place the code that is in the example on this hub nearby that rating widget. Each time someone submits a new rating in the widget, you will need to update the code to your rich snippet. If you don't want that hassle, you can have the widget and just not put it in your rich snippet. So people can still rate your recipes.

    • Abby Campbell profile image

      Abby Campbell 3 years ago from Charlotte, North Carolina

      Thank you so much for sharing this information. I have so much to learn, but I googled for this information and it happened to be shared by a fellow hubber. I am going to try this on Monday with one of my recipes and see how it works. The only thing I didn't understand is the "Ratings." Will there be a place where readers can actually rate my recipe like on the big sites with the 5 star rating scale?

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: "https://hubpages.com/privacy-policy#gdpr"

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)