Version: current

Schema Markup / Rich Results

Overview#

Falcon UI Kit comes complete with a few handy components to provide your app with Schema markup in the form of JSON.

To test your app you can use Googles rich results testing tool.

For full schema markup docs please see schema.org.

Featues#

  • Organisation
  • Product
  • Product list
  • Blog post
  • Blog list

Organisation Schema#

Full docs

Ideally the organisation schema component will be added to your route App.js file so it exists on all page.

import { OrganizationSchema } from '@deity/falcon-ui-kit';
import logo from 'src/assets/logo.png';
...
<OrganizationSchema
logo={logo}
name="DEITY"
url="https://deity.io"
sameAs={[
'https://twitter.com/DEITY_pwa',
'https://www.linkedin.com/company/deity-bv/',
'https://www.instagram.com/deity_pwa/',
'https://medium.com/deity-io',
'https://github.com/deity-io'
]}
/>

The props expected are:

  • logo - Path to site logo
  • name - Site / App name
  • url - Organisation URL (probably your sites URL)
  • sameAs - Array or organisation URLs (normally social network links)

Product Schema#

Full docs

The product schema should be added to your route product component (client/src/pages/shop/Product.js in our example apps).

The product schema expects a product prop. This should be an object:

type product = {
name: string,
description: string
thumbnail: string
price: string
sku: string
urlPath: string
}
import { ProductSchema } from '@deity/falcon-ui-kit';
...
<ProductSchema product={product} />

Product List Schema#

Full docs

The product list uses the product schema but is imported into our ProductCard component.

Blog Post Schema#

Full docs

The blog post component is added to the root blog post component (client/src/pages/blog/Post.js in our example).

It expects 1 prop, blog. This should be an object with blog post information:

type blogSchemaInfo = {
title: string,
image: string,
date: Date,
modified: Date,
excerpt: string,
author: string,
slug: string,
content: string
};
import { FormattedDate, Image, BlogPostSchema } from '@deity/falcon-ui-kit';
...
<BlogPostSchema blog={blogSchemaInfo} />

Blog List Schema#

Full docs

The blog list schema uses the same component as the blog post but is added to the BlogPostCard component.

Ask the community. #help

If you can't find what you're looking for, the answer might be on our community slack channel. Our team keep a close eye on this and will usually get back to you within a few hours, if not straight away. If you haven't created an account yet please sign up here slack.deity.io.

Stay up to date

Do you want to be informed when we release new features or fixes? Sign up to our newsletter to stay in the loop.