Skip to content

Instantly share code, notes, and snippets.

@ecarlisle
Last active January 2, 2016 02:59
Show Gist options
  • Save ecarlisle/6a92bffc12b1a8b07961 to your computer and use it in GitHub Desktop.
Save ecarlisle/6a92bffc12b1a8b07961 to your computer and use it in GitHub Desktop.
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
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