27
Schema Structured Data Basic Markups to Get You Started

Sample Schema Markups for your Website

Embed Size (px)

Citation preview

Page 1: Sample Schema Markups for your Website

SchemaStructured Data

Basic Markups to Get You Started

Page 2: Sample Schema Markups for your Website

Schema Markup?Schema markup is code that youplace on your web pages to makethem easier for search engines tounderstand the content and returnmore informative results for users.

WHAT IS

Page 3: Sample Schema Markups for your Website

RICH CONTENTin SERPs, including knowledgegraphs.

SEARCH ENGINES USE THIS DATA TO DISPLAY

Page 4: Sample Schema Markups for your Website

How to AddSchema Markup toYour Website

Page 5: Sample Schema Markups for your Website

Using a Schema Plugin

is the easiest and fastest way addschema markup to your websitepages.

IF YOU HAVE A WORDPRESS WEBSITE

Page 7: Sample Schema Markups for your Website

Adding Schema Manually

for websites not built on WordPressor if you need to tag page elementsnot supported by the plugin.

ANOTHER WAY TO ADD SCHEMA MARKUP IS BY

Page 8: Sample Schema Markups for your Website

Schema Markup Tools

are available to make it easier togenerate the necessary code.

YOU DON'T HAVE TO DO EVERYTHING MANUALLY.

Page 9: Sample Schema Markups for your Website

Google Markup Helper

This tool will help you addstructured data markup to some ofthe most commonly used types ofweb pages.

HTTPS://WWW.GOOGLE.COM/WEBMASTERS/MARKUP-HELPER/

Page 10: Sample Schema Markups for your Website

Structured Data Testing Tool

This tool will help you check if youhave implemented your schemamarkup correctly.

HTTPS://DEVELOPERS.GOOGLE.COM/STRUCTURED-DATA/TESTING-TOOL/

Page 11: Sample Schema Markups for your Website

Schema MarkupsYou Should Know and Use

Page 12: Sample Schema Markups for your Website

Sample Markup

<div itemscope itemtype=”http://schema.org/yourBusinessType“>

<span itemprop=”name”>YOUR BUSINESS NAME</span>

 <a itemprop=”url” href=”http://www.yourwebsite.com/“>Home</a>

 <a itemprop=”telephone” href=”tel:+1234567890“>(123) 456­7890</a></div>

 <div itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>  <span itemprop=”streetAddress”>111 YourStreetAddress st.</span>

  <span itemprop=”addressLocality”>Locality</span>,  <span itemprop=”addressRegion”>YourState</span> <span

itemprop=”postalCode”>YourZipCode</span></div>

Page 13: Sample Schema Markups for your Website

Your Businessname, location and other contactinformation can be marked up.

THE SAMPLE SCHEMA ABOVE SHOW HOW

Page 14: Sample Schema Markups for your Website

Common TagsLet's first define some of the most common tags

that you'll see in schema markup code.

Page 15: Sample Schema Markups for your Website

itemscopeThis tag simply specifies that theHTML contained in the <div>...</div> block is about a particularitem.

<DIV ITEMSCOPE .....</DIV>

Page 16: Sample Schema Markups for your Website

itemtypeis used to tell search engine what thepage is about - in the case of oursample, we want to declare the type ofbusiness you have. The full list of typesis available here: https://schema.org/docs/full.html

ITEMTYPE=”HTTP://SCHEMA.ORG/YOURBUSINESSTYPE“

Page 17: Sample Schema Markups for your Website

itempropis used to add propertiesassociated with the type youchose. In our example, name, url,address and telephone are allproperties of the itemtypelocalbusiness

<SPAN ITEMPROP=”NAME”>YOUR BUSINESS NAME</SPAN>

Page 18: Sample Schema Markups for your Website

ExtrasWhen you prepare schema markup about your company, it is

important to add as much information as possible to helpimprove your company's knowledge graph box. Here are some

properties you should be sure to mark up.

Page 19: Sample Schema Markups for your Website

sameAsa reference web page associated to yourbusiness/brand like your social mediaprofiles (Facebook, LinkedIn,Twitter, etc.)and citations. This helps search enginesmake a connection between your website,your citations and social profiles.

<LINK ITEMPROP=”SAMEAS” HREF=”HTTPS://..../YOURWEBSITE“>

Page 20: Sample Schema Markups for your Website

logoBy tagging your logo, search engines willknow what image to use as your logo.

<IMG ITEMPROP=”LOGO” SRC=”HTTP://..../LOGO.PNG” />

Page 21: Sample Schema Markups for your Website

hasMapFor Local Businesses with a physicalstore, including a map in your schemawill ensure that your correct locationwill always be displayed.

<LINK ITEMPROP=”HASMAP” HREF=”HTTPS://GOO.GL/MAPS/...“>

Page 22: Sample Schema Markups for your Website

geothe geo tag is another way to make itabsolutely clear to search engine aboutyour location if you include GPScoordinates in your schema.

Page 23: Sample Schema Markups for your Website

Schema for Geo

 <span itemprop=”geo” itemscope itemtype=”http://schema.org/GeoCoordinates”>

<meta itemprop=”latitude” content=”40.76205” />

<meta itemprop=”longitude” content=”­73.98884” />

To find your coordinates, you can visit this site andtype in your business address

Page 24: Sample Schema Markups for your Website

A Better Schema Markup

<div itemscope itemtype="http://schema.org/organization"><span itemprop="name">Panoptic Marketing LLC</span> <a itemprop="url" href="http://www.Panopticmarketing.com/">Home</a><img itemprop="logo" src="http://www.panopticmarketing.com/logo.png" /><link itemprop="sameAs" href="https://www.facebook.com/PanopticOnlineMarketingLlc "><link itemprop="sameAs" href="https://twitter.com/panoptic_nyc"><a itemprop="telephone" href="tel: +16468204650">+1 646­820­4650</a></div><div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">  <span itemprop="streetAddress"> 353 West 48th Street, #328</span>  <span itemprop="addressLocality">New York</span>  <span itemprop="addressRegion">NY</span> <spanitemprop="postalCode">10036</span></div> <span itemprop="geo" itemscope itemtype="http://schema.org/GeoCoordinates"><meta itemprop="latitude" content=”40.76205” /><meta itemprop="longitude" content=”­73.98884” /></div></div>

Page 25: Sample Schema Markups for your Website

Don't Forget to Check Your Schema

Page 26: Sample Schema Markups for your Website

Know you have an improvedschema markup for yourcompany information