Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
2016-03-30-social-meta-tags-with-jekyll
defaults:
-
scope:
path: "" # an empty string here means all files in the project
type: "posts"
values:
is_post: true
<meta property="og:type" content="article" />
<meta property="og:url" content="http://conductofcode.io/post/social-meta-tags-with-jekyll/" />
<meta property="og:title" content="Social meta tags with Jekyll" />
<meta property="og:description" content="This is how I added social meta tags to this Jekyll blog to optimize sharing on Facebook, Twitter and Google+." />
<meta property="og:image" content="http://conductofcode.io/post/social-meta-tags-with-jekyll/meta.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Conduct of Code" />
---
layout: post
title: Social meta tags with Jekyll
date: 2016-03-30 22:00:00
tags: Jekyll, Blogging
image:
path: meta.png
width: 1200
height: 630
---
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BlogPosting",
"@id": "http://conductofcode.io/post/social-meta-tags-with-jekyll/",
"url": "http://conductofcode.io/post/social-meta-tags-with-jekyll/",
"mainEntityOfPage": {
"@type": "BlogPosting",
"@id": "http://conductofcode.io/post/social-meta-tags-with-jekyll/"
},
"headline": "Social meta tags with Jekyll",
"description": "This is how I added social meta tags to this Jekyll blog to optimize sharing on Facebook, Twitter and Google+.",
"datePublished": "2016-03-30T11:00:00+01:00",
"image": {
"@type": "ImageObject",
"url": "http://conductofcode.io/post/social-meta-tags-with-jekyll/meta.png",
"width": 1200,
"height": 630
},
"author": {
"@type": "Person",
"name": "Henrik Lau Eriksson"
},
"publisher": {
"@type": "Organization",
"name": "Conduct of Code",
"logo": {
"@type": "ImageObject",
"url": "https://s.gravatar.com/avatar/27df7a0a062537ef9116a1572707d5e0?s=60",
"width": 60,
"height": 60
}
}
}
</script>
{% if page.is_post %}
{% assign type = "BlogPosting" %}
{% else %}
{% assign type = "Blog" %}
{% endif %}
<!-- http://schema.org/ -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "{{ type }}",
"@id": "{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}",
"url": "{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}",
"mainEntityOfPage": {
"@type": "{{ type }}",
"@id": "{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}"
},
"headline": "{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}",
"description": "{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 140 }}{% else %}{{ site.description }}{% endif %}",
{% if page.date %}
"datePublished": "{{ page.date | date_to_xmlschema }}",
{% endif %}
{% if page.update %}
"dateModified": "{{ page.update | date_to_xmlschema }}",
{% endif %}
{% if page.image %}
"image": {
"@type": "ImageObject",
"url": "{{ page.url | prepend: site.baseurl | prepend: site.url }}{{ page.image.path }}",
"width": {{ page.image.width }},
"height": {{ page.image.height }}
},
{% endif %}
"author": {
"@type": "Person",
"name": "{{ site.author }}"
},
"publisher": {
"@type": "Organization",
"name": "{{ site.title }}",
"logo": {
"@type": "ImageObject",
"url": "{{ site.gravatar_url }}",
"width": 60,
"height": 60
}
}
}
</script>
{% if page.is_post %}
{% assign type = "article" %}
{% else %}
{% assign type = "website" %}
{% endif %}
<!-- http://ogp.me/ -->
<meta property="og:type" content="{{ type }}" />
<meta property="og:url" content="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}" />
<meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
<meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 140 }}{% else %}{{ site.description }}{% endif %}" />
{% if page.image %}
<meta property="og:image" content="{{ page.url | prepend: site.baseurl | prepend: site.url }}{{ page.image.path }}" />
<meta property="og:image:width" content="{{ page.image.width }}" />
<meta property="og:image:height" content="{{ page.image.height }}" />
{% endif %}
{% if page.is_post %}
<meta property="og:site_name" content="{{ site.title }}" />
{% endif %}
<!-- https://dev.twitter.com/cards/overview -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@{{ site.twitter_username }}" />
<meta name="twitter:creator" content="@{{ site.twitter_username }}" />
<meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
<meta name="twitter:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 140 }}{% else %}{{ site.description }}{% endif %}" />
{% if page.image %}
<meta name="twitter:image" content="{{ page.url | prepend: site.baseurl | prepend: site.url }}{{ page.image.path }}" />
{% endif %}
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@hlaueriksson" />
<meta name="twitter:creator" content="@hlaueriksson" />
<meta name="twitter:title" content="Social meta tags with Jekyll" />
<meta name="twitter:description" content="This is how I added social meta tags to this Jekyll blog to optimize sharing on Facebook, Twitter and Google+." />
<meta name="twitter:image" content="http://conductofcode.io/post/social-meta-tags-with-jekyll/meta.png" />
@inetbiz

This comment has been minimized.

Copy link

commented Apr 24, 2019

@hlaueriksson I think '@type:' is ItemPage. The mainentityofpage is a blogpage/article. I'd also like to explore this with @mention forking off into a tag page that uses different schema such as person, place or thing as an '@mention' to an ItemPage.

@hlaueriksson

This comment has been minimized.

Copy link
Owner Author

commented Apr 24, 2019

@inetbiz Thanks for the feedback! I'm using the https://github.com/jekyll/jekyll-seo-tag plugin now for rendering social meta tags.

@inetbiz

This comment has been minimized.

Copy link

commented Apr 24, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.