Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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.
{% 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

This comment has been minimized.

Copy link
Owner Author

ecarlisle commented Dec 28, 2015

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

This comment has been minimized.

Copy link
Owner Author

ecarlisle commented Jan 2, 2016

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
You can’t perform that action at this time.