Saturday, April 26, 2014

Blog Editor (for Blogger) - FAQ

What is Blog Editor?

Blog Editor is an online blogger blog editing tool with recipe microdata support and better post editing capabilities.

 

What feature does this blog editor have that official blogger blog editor does not have? Why should I use this blog editor instead of the official blogger blog editor?

  • Recipe microdata
  • Custom templates (Use Template Designer to design your own templates)
  • Post Tags (ex: Technorati tags)
  • Time Duration (Cook Time, Prep Time, Total Time) in recommended format using a UI.
  • Tables
  • Horizontal line
  • Special Characters (Copyright, registered, pound, euro, yen etc.)
  • Smileys
  • Anchor - Link within the page (Ex: You can create anchor links within posts for Go directly to ingredient, Go directly instructions, Go directly nutrition information)
  • Indent / Outdent
  • Nested Lists using indent
  • Find / Replace Text
  • Subscript, Superscript support
  • Insert div container
  • And a few more, try all the toolbar buttons / controls

 

What is schema.org?

schema.org is a collaboration by Google, Microsoft, and Yahoo! to improve the web by creating a structured data markup schema supported by major search engines. On-page markup helps search engines understand the information on webpages and provide richer results. A shared markup vocabulary makes it easier for webmasters to decide on a markup schema and get maximum benefit for their efforts.

 

What is schema.org/recipe microdata?

schema.org/recipe microdata is a standard way of marking up recipe content in your website with structured data markup schema

 

Why should I use schema.org/recipe microdata?

The goal of a recipe microdata is to provide users with additional information about a specific cooking recipe, such as the reviewer(s) star ratings (1 to 5 stars), cook/prep time, and calorie information.
When recipe information is marked up in web pages, Google may use that information to show rich snippets for recipe results, and for inclusion in Google with Recipe View. (Recipe View is currently available only in the US and Japan, but they are working to bring it everywhere.)

 

All this sound greek & abstract to me, can you explain this in a more concrete way?

  • Click this to go to the landing page for Google Recipe View - http://www.google.com/insidesearch/features/recipes/index.html
  • If you are outside of US / Japan click Try Google with Recipe View now button, change the search text to some thing that you want to search for (I searched for pasta recipe).
  • Click on the search tools button (below the search box, in the right side).
You should now see an additional row of search filters – Ingredients, Cook time and Calories.
Filter by ingredients
Filter by cook time
Filter by Calories
  • You can now filter for recipes that do not contain the egg, garlic as ingredients.
  • Or you can filter for those recipes that you can cook under 15 mins.
  • Or you can filter for those recipes that are below a few calories.
That is the one of the real uses of marking up your recipe content with schema.org/recipe microdata.
All this is made possible because the recipe can now be understood by a machine. I will quote Craig Bradford’s from a post in the moz blog.
It’s about creating content that machines can understand and reference. There are already services that try to make use of this kind of information such as Silk, Apples Siri and potentially Wiredoo.

 

How do I markup my recipe content with schema.org/recipe microdata?

We have written a simple post composer (blog editor) that has a few simple templates to deal with Recipe microdata
Check it out here - Recipe microdata Blog Editor - Post Composer.

 

I have a different look feel for my website / blog and these templates do not match with my current website’s / blog’s look and feel. Can I design my own templates?

Yes, you can. Please check out the Template Designer

 

I do not know what values to fill in for the Recipe microdata property values, Do you have any information on this?

Please check http://schema.org/Recipe & http://schema.org/NutritionInformation or the relevant property descriptions available in this blog itself.
http://blog-editor.blogspot.in/2014/04/httpschemaorgrecipe-microdata.html
http://blog-editor.blogspot.in/2014/04/httpschemaorgnutritioninformation.html

 

Do you have any documentation / tips on how to get started with the Recipe microdata Blog Editor - Post Composer?

Yes, Please check this blog post for further details.

What other article do you recommend on the topic?

I also recommend the well written article by Paul on getmecookinghttp://www.getmecooking.com/article/why-are-search-engines-being-slow-to-roll-out-their-recipe-search-functionality

 

Does this support wordpress or any other blogging platform?

Not at this moment, Right now this supports only Google’s blogging platform – Blogger. If time permits and there is demand, support for other platforms can be added.

 

Source and References:

http://schema.org/Recipe
http://schema.org/NutritionInformation
Google Recipe View
https://support.google.com/webmasters/answer/173379?hl=en
https://support.google.com/webmasters/answer/1211158
http://www.getmecooking.com/article/why-are-search-engines-being-slow-to-roll-out-their-recipe-search-functionality

Getting Started with Blog Editor - Post Composer

Authorization and form details

  1. Point your browser to the http://schema.org/Recipe microdata Blog Editor - Post Composer
  2. Wait for the page to load - the progress image should disappear.
  3. If this is the first time you are logging in you should be seeing an Authorize button.
  4. Click the Authorize button that can authorize this web page to post something to blogger on your behalf.
  5. Once authorized you can see a form with the following
    1. Blog dropdown list – Lists the blogs you own.
    2. Draft Checkbox (Select this if you want to publish your post to draft)
    3. Post Title Text field
    4. Labels entry field (Type in a label and press enter to add a label)
    5. Post body html editor
    6. Buttons to
      1. Load an existing post – Edit post
      2. Load an existing post from the drafts – Edit post
      3. Load an existing post from the local draft - Edit Local Draft
      4. Clear the form and make it ready to compose and publish a new post – New Post
      5. Clear the form – Cancel
      6. Publish a new post, edited post to the selected blog – Publish
      7. Save a post draft locally (in the browsers's database) - Save Local Draft

Composing a new post

  1. Select the blog you want to publish to
  2. Input a post title
  3. Input labels (type in a label / use the autocomplete) and press enter to add a label. Click on the x icon on the label to remove the label.
  4. Check the Draft Checkbox if you want to publish the post to draft.
  5. The Post body html editor is very similar to the one in blogger / windows live writer.
  6. Click on the Insert Recipe snippet icon in the The Post body html editor toolbar (richsnippets). You should see a dialog similar to this Pick a recipe snippet dialog
  7. Click on either Recipe Snippet – Solid Border or Recipe Snippet – Dashed Border. You should see something similar to image
  8. The template has some dummy values / example values. You can start editing those in the Post body html editor.
    • Recipe Name
    • Recipe Thumbnail (Double Click to bring the image dialog)
    • Recipe Description
    • Cuisine
    • Category
    • Yields
    • Prep. Time (Double Click to bring the duration dialog)
    • Cook Time (Double Click to bring the duration dialog)
    • Total Time (Double Click to bring the duration dialog)
    • Ingredients (Edit the dummy text inline or Keep the cursor at the end of the last ingredient and press enter to add a new ingredient – This adds the required markup automagically)
    • Instructions (Edit the dummy text inline or Copy and Paste an existing instruction to add a new one and modify the pasted text – This will make sure the new instruction has the required schema.org markup metadata)
    • Instruction Images (Double Click to bring the image dialog)
  9. Once done editing / composing your post, Click publish.

Image Dialog

You can provide
  • an image url from any image hosting service like flickr
  • or use picasa web albums to
    • select an existing image
    • upload a new image and select it
This (See below) is the image properties dialog in the post body html editor. You can provide a width / height, alignment, alt text etc. If you check the "Captioned Image" checkbox, you can provide a caption for the image in the post body html editor. This results in a figure html tag. You can either provide the width here or resize the image in the post body html editor itself for a better live feel of the resize action.

If you click on the "Select a photo from Picasa or Upload a new photo" button, you can leverage google's picasa web albums image hosting service to select an existing image / upload a new image and use it. (This blog editor uses Google File Picker dialog).

  • Click on the "You Photos" tab on the left side to select an existing photo from picasa web albums.
  • Click on the "Upload Photos" Tab to upload an image and use its url.

Duration Dialog

Double clicking on either preptime, cooktime or totaltime brings the duration dialog where we edit the time duration.
Duration Dialog
The dialog should be self explanatory - Please enter a valid number.

Insert a new ingredient list

Some times you may need multiple ingredient lists, for example (to marinate, to temper, to cook etc). Use the ingredient list recipe snippet to insert a new “ingredient list” itself.
  1. The Post body html editor is very similar to the one in blogger / windows live writer.
  2. Click on the Insert Recipe snippet icon in the The Post body html editor toolbar (richsnippets). You should see a dialog similar to this Pick a recipe snippet dialog
  3. Click on either Recipe Snippet – Ingredients List.

Editing an existing post

  1. Select the blog you want to publish to
  2. You should see an edit post button on the top / below the post body html editor.
  3. Click on the edit post button
  4. This should bring up a dialog similar to this
    Post Picker Dialog
  5. Click on the post you would like to edit and proceed.
  6. If you cannot find the post you would like to edit, try it in a different page (the pager can be found at the bottom of the post chooser, posts table).
  7. Once done editing in the post body html editor, click publish.
Play around with the post composer, it is a pretty simple application.

http://schema.org/Recipe microdata

The following are the fields / properties of http://schema.org/Recipe microdata.

cookTime Duration  The time it takes to actually cook the dish, in ISO 8601 duration format.
cookingMethod Text  The method of cooking, such as Frying, Steaming, ...
ingredients Text  An ingredient used in the recipe.
nutrition NutritionInformation  Nutrition information about the recipe.
prepTime Duration  The length of time it takes to prepare the recipe, in ISO 8601 duration format.
recipeCategory Text  The category of the recipe—for example, appetizer, entree, etc.
recipeCuisine Text  The cuisine of the recipe (for example, French or Ethopian).
recipeInstructions Text  The steps to make the dish.
recipeYield Text  The quantity produced by the recipe (for example, number of people served, number of servings, etc).
totalTime Duration  The total time it takes to prepare and cook the recipe, in ISO 8601 duration format.

http://schema.org/NutritionInformation microdata

The following are the fields / properties of http://schema.org/NutritionInformation microdata

calories Energy  The number of calories
carbohydrateContent Mass  The number of grams of carbohydrates.
cholesterolContent Mass  The number of milligrams of cholesterol.
fatContent Mass  The number of grams of fat.
fiberContent Mass  The number of grams of fiber.
proteinContent Mass  The number of grams of protein.
saturatedFatContent Mass  The number of grams of saturated fat.
servingSize Text  The serving size, in terms of the number of volume or mass
sodiumContent Mass  The number of milligrams of sodium.
sugarContent Mass  The number of grams of sugar.
transFatContent Mass  The number of grams of trans fat.
unsaturatedFatContent Mass  The number of grams of unsaturated fat.

Hello World

sadhguru charaNAravindhAbhyAm namO nama: – Salutations to the lotus feet of the guru.

Welcome to this blog.

Here you can find a blog editor that supports http://schema.org/Recipe microdata.