Create rich snippets and rich cards from Google and Schema.org examples, Facebook Open Graph and Twitter Cards

Online rich snippets generator allows you to create Google rich cards such as FAQ, Video, Product, Local Business, Review, Breadcrumb, Event, Job posting, Sitelinks and others.
Choose any Schema.org, Facebook Open Graph or Twitter Card example. Add extra Schema.org properties as per your need, or search and browse Schema.org types hierarchy and create custom schema snippet according to your input criteria

How to use rich snippets generator?

Here are some guidelines on how to create schema markup:

  • Based on the content of your web page, determine what kind of rich snippet or schema markup would be most appropriate for your content.
  • Select Google Search, Schema.org, Open Graph or Twitter schema markup from the menu. After that the form will be automatically populated with corresponding data from the example, in the same hierarchical structure as the markup. You can then insert your data in the fields, or remove fields that you don't want to use.
    You can add extra fields to content type by selecting properties from the Add extra properties from Schema.org feature below.
  • If you want to use some other schema markup, you can use Schema.org types list viewer to find and select schema markup that you want. You can search Schema.org by descriptions, and when you select desired type, isSemantic.net will populate form with corresponding example, or if there is none, it will create an empty form which you must extend with properties.
  • After you're done, copy-and-paste given markup into your web page, preferably in the head tag, but other places are also allowed.
    Markup is given in JSON-LD format for Google and Schema.org markup, and in RDFa format for Open Graph and Twitter cards. You can convert JSON-LD and RDFa markup to Microdata or any other format using isSemantic.net RDF converter.
  • If you have your snippet, you can import it and edit it as an HTML form.

Google Search snippets are based upon those stated in Google Search guidelines , but you can add extra properties to any schema type, or remove them, as stated in the documentation.
You are also provided with property descriptions from Schema.org.

Open Graph tags are based upon those stated in Sharing Guide .

Twitter Cards are those stated in Sharing Guide .

Schema.org types list viewer

Search or browse Schema.org types that suit your content and create custom schema markup from any Schema.org content type, with examples.

Schema.org
Enter term related to your business or other subject to filter schema types, and then select suggestions that you prefer
  • Click the button below to load latest Schema.org and:
    • search and browse all Schema.org content types
    • get matching content results from your input keywords
    • get corresponding Schema.org example
    Load Schema.org

Result markup:

Copy&paste code below between the <head> and </head> tags of your web page

<script type="application/ld+json">
// start typing to get data
</script>

Import JSON-LD rich snippet as an editable HTML form

Enter JSON-LD data (without script tags) to convert it to an HTML form that you can edit and extend:
Import to form

Add extra properties from Schema.org

Schema.org type/class properties

You can extend any Schema.org type by adding any possible properties, and generate custom Schema.org markup.

Properties are hierarchical and can have many childs/subclasses, that can have multiple values. That means values are nested, and can be literal (plain-text) values or types/classes. If there is a checkbox, it is a literal value, and if there is a dropdown, it is a type/class, in which case you need to click on a drop-down list and select properties until you reach checkbox.

Note: use this option to include every possible sub-type of a property (all children and their children), instead of only direct (first child), which can go up to hundreds.

Add selected properties to form

Loading Schema.org data.. Please wait...

What is schema markup?

Schema markup is a special code that is added to the web pages in a standardized way in order to describe its meaning for the computers. Because it has standardized structure, it is also called structured data, and because it usually appears as snippet of code, it is also called (rich) snippets. Schema markup/structured data allows computers, namely, search engines (bots, crawlers, spiders etc.) to get information about content and determine its meaning. For example, schema markup/structured data allows search engines to display enhanced search results - rich results.

What are rich snippets?

Rich snippets or rich results are results on search engine results page (SERP) that are visually enriched with graphical elements such as images, rating stars, search boxes and similar, in contrast to the usual textual search results with blue link.

Rich snippets usually appear as standalone elements in the form of a card, box or carousel. They are used with a specific type of content on a web page, such as products, recipes, articles, events, videos etc. In general, rich snippets use structured data schema markup that usually has specific markup rules for each rich snippet, but they can also be used by search engine automatically, without adding structured data to a web page.

Here is a common example of a rich search result, where we can see how search engine reads structured data markup and uses it to display a graphically enhanced search result - rich snippet - with star rating information, price and so on:

Figure 1 Structured data displayed as a rich snippet by search engine
Figure 1 Structured data displayed as a rich snippet by search engine
Google and the Google logo are registered trademarks of Google LLC, used with permission.

Since it clearly affects search engine results page (SERP), structured data is an important step when doing search engine optimization (SEO) for any web page.

What is Schema.org?

Schema.org is a vocabulary of shared collections of schemas for structured data on the Internet, founded by major search engine providers Google, Microsoft, Yahoo! and Yandex. Though not a standard, it is one of the most frequently used vocabularies, used by millions of websites and many applications.

Its goal is to provide webmasters with a single common vocabulary that contains markup that is most valuable to search engines and users on the Internet.

It contains hundreds of machine-readable definitions of the most commonly used concepts, such as organizations, persons, places, services, events products and so on. Read more about Schema.org .

Schema.org types hierarchy

Schema.org is a tree-like data model, which means that its terms also have relationships between themselves through hierarchy. This is called class hierarchy, which means that one term/class is denoted as an instance of another term/class, and has the same characteristics. We can also see it as a child-parent relationship.

For example, Hotel is child of LocalBusiness, which is a child of Organization, which is then child of Thing, the root term/class of Schema.org. In such relationship, every child inherits its parent's attributes, so in this case, Hotel can have any properties that LocalBusiness has, or any of their parents. Moreover, this enables us to make logical conclusions (inferences): if something is a Hotel, it is a LocalBusiness and Organization, which is one of the most powerful features of structured/linked data.

As you can see, some properties can also be hierarchical, which means they can have types/classes as values. For example, address property has a PostalAddress class as a value, which then has many properties. In this case we can actually conclude that address property does not contain a value: it serves rather as container. We could say that properties with complex types as values have classification role, since they actually describe classes/properties they contain.

Visually this hierarchical structure is noticeable in an HTML form where such properties are rendered as <fieldset> tags, containing many input tags, and have other properties as values

If you search Hotel in Schema.org search and browse feature, you can see this hierarchy, and if you select Hotel content type, you will see that it has properties from all its parents, from Lodging Business to Thing.

Figure 2 Schema.org content types hierarchy
Figure 2 Schema.org content types hierarchy

Use our RDF visualizer tool to visualize linked data RDF as a diagram, as well as to validate the markup.

What is Open Graph?

Open Graph Protocol is a schema markup (it is also referred to as a vocabulary) developed by Facebook in order to combine and relate web pages and create its rich representation within the social graph. In practice, Open Graph allows Facebook's Like feature to work for pages outside their network, i.e. sharing on Facebook.

Open Graph Protocol is based on RDFa format so it is using HTML tags to describe content that can have different markup depending on the media content, such as Website, Video, Audio markup. Read more about Open Graph Protocol .

What are Twitter Cards?

Twitter Cards is a schema markup based used by Twitter to optimize Tweets and enhance user experience. It has its special markup and rules, but it is fully compatible with Open Graph tags, and can be marked up with Open Graph tags.

This is also possible because, like Open Graph, Twitter Cards is based on RDFa format, and is usually used to describe and represent web pages as card, player or app snippets. Read more about Twitter Cards .

What is schema markup generator?

Schema markup generator is a tool that allows you to quickly create and edit schema markup that can be used for rich snippets. isSemantic.net's schema markup generator allows you to create schema markup for search engines and social networks in one place. Also, you can create schema markup by modifying Schema.org, Google Search, Open Graph and Twitter Cards examples, or create custom schema markup, from scratch, by searching Schema.org content types that are appropriate for your content.

How to modify rich snippet/Schema.org example?

When you select Google rich snippet or Schema.org example, you should overwrite test input data with your own.You can add or remove fields/properties that you don't use.

To remove a property, use commands above the field. You can remove a single property, or many nested properties by removing the top-level property.

To add an existing property, use commands above the properties, whicy will create a copy of the previous property.
To add a new property, follow instructions under Add extra properties from Schema.org.

How to create a custom schema markup?

One of the purposes of structured data is to enable interlinking of different types of data, which means that you can create any type of schema markup. However, you must obey general structured data rules, as well as the vocabulary, which is in this case Schema.org. Before any steps, it's important that you understand schema hierarchy, so that you can easily visualize hierarchical structure, which you will build. Use our RDF graph visualization tool to visualize schema markup as a simple hierarchical structure, and a bit more complex RDF graph visualization.

  1. Decide what type of schema markup would you like to create. Use Schema.org types list viewer to find it by entering keywords that are relevant to your content, because you can call it differently.
  2. Now you need to add the properties of the selected type. Under Add extra properties from Schema.org go through all properties and find those that you wish to populate with data. Some properties also have hierarchical properties, so you should go through hierarchy until you get to the desired property.
  3. Select desired properties, add them to the form. The form will be extended with selected properties, with input fields populated with type of data it expects. Fill in your data, and there you have your custom schema markup snippet.

How to add a rich snippet to website?

  1. Determine what type of content category your web page is (is it about products, articles, tools, recipes etc.). If you are not sure, use Schema.org types list viewer, enter keywords that describe your content and find content types that might be appropriate for your content.
  2. Determine what type of rich snippet matches your content category: Article, Product, Video, FAQ, Twitter Cards, Facebook Open graph tags etc. If you are unsure, use the above Schema.org viewer to search and browse content types.
  3. Use schema markup generator to select desired rich snippet
  4. Modify rich snippet by adding data that is relevant to your web page. Follow the guidelines for the chosen rich snippet
  5. If you are using Schema.org, you can add extra properties, other than those required by the guidelines
  6. If you don't want to use JSON-LD, use isSemantic.net RDF converter to convert it to Microdata or RDFa
  7. Copy and paste schema markup into your web page's source code
  8. Validate schema markup, depending on the schema you chose:

Disclaimer: using isSemantic.net's features does not guarantee the data will appear as rich results, and isSemantic.net disclaims any liability concerning your use of data created by using its features. Please consult respective official guidelines for any questions.