Bonusly Blog Article Meta Markup – Main, Search, Social, Viewport, & More

bonusly-blog-article-markup.html

<title>{{TITLE}}</title>
<meta name="description" content="{{DESCRIPTION}}">
<link rel="canonical" href="http://www.example.com/">  <!-- note that most BUT not all articles have bonus.ly canonical URLs -->

<!-- Schema/Google Structured Data, more at schema.org & https://developers.google.com/search/docs/data-types/article -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "{{PAGE URL}}"
  },
  "headline": "{{TITLE}}",
  "image": {
          "@type": "ImageObject",
          "url": "{{ content.featured_image }}"
   },
  "datePublished": "2015-02-05T08:00:00+08:00", /* datetime format */
  "dateModified": "2015-02-05T09:20:00+08:00", /* datetime format */
  "author": {
    "@type": "Person",
    "name": "{{AUTHOR NAME}}"
  },
   "publisher": {
    "@type": "Organization",
    "name": "Bonusly",
    "logo": {
      "@type": "ImageObject",
      "url": "https://google.com/logo.jpg" /* 60x600px rectangle logo in .png format */
    }
  },
  "description": "{{DESCRIPTION}}"
}
</script>  

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList", /* More on breadcrumbs here: https://developers.google.com/search/docs/data-types/breadcrumb */
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Bonusly Blog",
    "item": "https://blog.bonus.ly/"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "{{PRIMARY ARTICLE TAG}}",
    "item": "https://blog.bonus.ly/tag"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "{{TITLE}}",
    "item": "{{PAGE URL}}"
  }]
}
</script>


<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@bonusly">
<meta name="twitter:title" content="{{TITLE}}">
<meta name="twitter:description" content="{{DESCRIPTION}}">
<meta name="twitter:creator" content="{{AUTHOR HANDLE if Twitter link exists ELSE @bonusly}}">
<meta name="twitter:image:src" content="http://www.example.com/image.html"> <!-- featured image -->
<meta name="twitter:image:alt" content="{{ALT TEXT FOR IMAGE}}">

<!-- Open Graph data, more data here: http://ogp.me/ -->
<meta property="og:title" content="{{TITLE}}" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" /> <!-- featured image -->
<meta property="og:description" content="{{DESCRIPTION}}"/>
<meta property="og:site_name" content="Bonusly" />
<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" /> <!-- datetime format -->
<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" /> <!-- datetime format -->
<meta property="article:tag" content="{{ARTICLE TAG}}" />  <!-- string array -->


<!-- Set the viewport for responsive design (may already be done elsewhere) -->
<meta name=viewport content="width=device-width, initial-scale=1">

<!-- Set AMP URL (not sure how this is currently being done on the blog) -->
<link rel="amphtml" href="https://blog.bonus.ly/article?hs_amp=true">

<!-- Set RSS URL (not sure how this is currently being done on the blog) -->
<link rel="alternate" type="application/rss+xml" href="https://blog.bonus.ly/rss.xml">


<!-- Data card validation resources & more:
Google – https://search.google.com/structured-data/testing-tool/u/0/
Bing – https://www.bing.com/toolbox/markup-validator
Twitter – https://cards-dev.twitter.com/validator
Facebook – https://developers.facebook.com/tools/debug/

The Essential Meta Tags for Social Media (CSS Tricks) – https://css-tricks.com/essential-meta-tags-social-media/
Must-Have Social Meta Tags for Twitter, Google+, Facebook and More (Moz) – https://moz.com/blog/meta-data-templates-123
-->