Skip to content

Instantly share code, notes, and snippets.

@btrav
Last active April 20, 2019 04:15
Show Gist options
  • Save btrav/71a5c4fd8e7cb4750d7cf905ee5f2456 to your computer and use it in GitHub Desktop.
Save btrav/71a5c4fd8e7cb4750d7cf905ee5f2456 to your computer and use it in GitHub Desktop.
Bonusly Blog Article Meta Markup – Main, Search, Social, Viewport, & More
<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
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment