Skip to content

Instantly share code, notes, and snippets.

@ecarlisle

ecarlisle/jekyll-header-with-social-meta.html

Last active January 2, 2016 02:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ecarlisle/6a92bffc12b1a8b07961 to your computer and use it in GitHub Desktop.
Save ecarlisle/6a92bffc12b1a8b07961 to your computer and use it in GitHub Desktop.
Download ZIP
This is an optimized version of Jekyll's /_includes/head.html include. Liquid variables are created up top to keep the source DRY and clean. Included in this header are Open Graph and Twitter meta tags for social integration.
Raw
jekyll-header-with-social-meta.html
{% assign full_url = site.baseurl | prepend: site.url %}
{% capture page_title %}
{% if page.title %}
{{ page.title }}
{% else %}
{{ site.title }}
{% endif %}
{% endcapture %}
{% assign page_title = page_title | strip_newlines | split " " | join " " %}
{% capture page_type %}
{% if page.type %}
{{ page.type }}
{% else %}
article
{% endif %}
{% endcapture %}
{% assign page_title = page_title | strip_newlines | split " " | join " " %}
{% capture page_url %}{{ page.url | replace:'index.html','' | prepend: full_url }}{% endcapture %}
{% capture page_image %}
{% if page.image %}
{{ page.image | prepend: full_url }}
{% else %}
{{ site.image | prepend: full_url }}
{% endif %}
{% endcapture %}
{% assign page_image = page_image | strip_newlines | split " " | join " " %}
{% capture page_description %}
{% if page.description %}
{{ page.description }}
{% else if page.excerpt %}
{{ page.excerpt}}
{% else %}
{{ site.description }}
{% endif %}
{% endcapture %}{% assign page_description = page_description | strip_newlines | split " " | join " " | truncate: 160 %}
{% assign apple_icon_sizes = "57,72,76,114,120,144,152,180" | split: "," %}
<head>
<!-- General Metadata -->
<title>{{ page_title }}</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ page_description }}">
<meta name="robots" content="index, follow">
<link rel="canonical" href="{{page_url}}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ full_url }}/feed.xml">
<!-- Social Meta Madness -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="{{site.twitter_username}}">
<meta name="twitter:url" property="og:url" content="{{page_url}}">
<meta name="twitter:title" property="og:title" content="{{ page_title }}">
<meta name="twitter:description" property="og:description" content="{{ page_description }}">
<meta name="twitter:image" property="og:image" content="{{ page_image }}">
<meta name="twitter:creator" content="{{site.twitter_username}}" />
<meta property="article:author" content="https://www.facebook.com/{{ site.facebook_username }}">
<meta property="article:publisher" content="https://www.facebook.com/{{ site.facebook_username }}">
<meta property="og:type" content="{{ page_type }}" />
<meta property="og:site_name" content="{{ site.title }}" />
<meta property="og:locale" content="en_US" />
<meta property="fb:app_id" content="{{ site.facebook_app_id }}" />
<meta property="fb:admins" content="{{ site.facebook_admins }}" />
<!-- Front-End Resources -->
<link rel="stylesheet" href="{{site.baseurl}}/assets/css/main.css">
<link rel="stylesheet" href="{{site.baseurl}}/assets/js/main.js">
<!-- Icons -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
{% for size in apple_icon_sizes %}
<link rel="apple-touch-icon" sizes="{{ size }}x{{ size }}" href="/apple-touch-icon-{{ size }}x{{ size }}.png" />
{% endfor %}
</head>
<body>
@ecarlisle
Copy link
Author

Revision 3 Changes

Indentation Within {% capture %} Variable Assignment

Special thanks to @Phlow for changes made in revision 3. For readability, I added indentation for all variable assignments. I avoided this because the indentation whitespace gets included in the {% capture %} variable assignment block. Different numbers of whitespace characters are prepended and appended to the variable variable. The number of characters depends on the number of line breaks used in the {% capture %) block.

Strangely, this whitespace cannot be subsequently removed by the strip, lstrip, or rstrip string functions. I will file this as an issue if one has now already been created.

To space can be removed by using array functions. By splitting and rejoining the string using a space for the delimiter, the whitespace can be eliminated.

Avoiding verbose logic within markup.

This was another assist by @Phlow. I removed verbose chaining of functions within the markup (e.g. prepend | prepend | prepend | etc... ). I still do this in the variable assignment as it's more readable there, but try to maintain minimal logic within the markup.

@ecarlisle
Copy link
Author

Revision 8 Changes

Big thanks to @huphtur for the following edits:

  • Clean up messy typos (d'oh!)
  • Consolidate OG and Twitter meta tags as per post by @adactio on cleaning up metadata markup. See consolidations under "Social Meta Madness" content block.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment