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 to get the code for your rich snippet. While creating my recipe website, I used this code before the </body> tag.

<div class="hrecipe">

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>

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:

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

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

<span class="ingredient">
 <span class="name">ThirdIngredient</span>:
 <span class="amount">Quantity</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.

Type the instructions on how to make your recipe here.

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

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>

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"></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:

Now delete so it looks like this:


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>

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>

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.


    0 of 8192 characters used
    Post Comment

    • clivewilliams profile image

      Clive Williams 6 months ago from Jamaica

      great info

    • thebookofrecipes profile image

      Jaydab 2 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 2 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

      Jaydab 2 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 2 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?