<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>

  <!-- http-equiv -->
  <!-- <meta http-equiv="Pragma" content="no-cache" /> -->
  <!-- <meta http-equiv="Expires" content="-1" /> -->

  <meta name="title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
  <meta name="keywords" content="{{ site.name }}, {{ site.username }}, {{ site.title }}{% if page.keywords %}, {{ page.keywords }}{% endif %}" />
  <meta name="description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
  
  <!-- Social: Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" 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.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
  {% if page.image %}
  <meta property="twitter:image:src" content="{{ site.baseurl | prepend: site.url }}{{page.image }}">
  {% else %}
  <meta property="twitter:image:src" content="{{ site.avatar | prepend: site.baseurl | prepend: site.url }}">
  {% endif %}

  <!-- Social: Facebook / Open Graph -->
  <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 %}">
  {% if page.image %}
  <meta property="og:image" content="{{ site.baseurl | prepend: site.url }}{{page.image }}">
  {% else %}
  <meta property="og:image" content="{{ site.avatar | prepend: site.baseurl | prepend: site.url }}">
  {% endif %}
  <meta property="og:description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
  <meta property="og:site_name" content="{{ site.title }}">

  <!-- Social: Google+ / Schema.org  -->
  <meta itemprop="name" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}"/>
  <meta itemprop="description" content="{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
  <meta itemprop="image" content="{{ site.avatar | prepend: site.baseurl | prepend: site.url }}"/>

  <!-- Web Manifest -->
  <link rel="manifest" href="{{site.baseurl}}/assets/manifest.json">

  <!-- Favicon -->
  <link rel="shortcut icon" href="{{site.baseurl}}/assets/icons/favicon.ico" type="image/x-icon" />
  <link rel="icon" type="image/png" sizes="16x16" href="{{site.baseurl}}/assets/icons/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="{{site.baseurl}}/assets/icons/favicon-32x32.png">
  <link rel="mask-icon" href="{{site.baseurl}}/assets/icons/safari-pinned-tab.svg" color="#2c3e50">

  <!-- Apple Touch Icons -->
  <link rel="apple-touch-icon" href="{{site.baseurl}}/assets/icons/apple-touch-icon.png" />
  <link rel="apple-touch-icon" sizes="57x57" href="{{site.baseurl}}/assets/icons/apple-touch-icon-57x57.png" />
  <link rel="apple-touch-icon" sizes="72x72" href="{{site.baseurl}}/assets/icons/apple-touch-icon-72x72.png" />
  <link rel="apple-touch-icon" sizes="76x76" href="{{site.baseurl}}/assets/icons/apple-touch-icon-76x76.png" />
  <link rel="apple-touch-icon" sizes="114x114" href="{{site.baseurl}}/assets/icons/apple-touch-icon-114x114.png" />
  <link rel="apple-touch-icon" sizes="120x120" href="{{site.baseurl}}/assets/icons/apple-touch-icon-120x120.png" />
  <link rel="apple-touch-icon" sizes="144x144" href="{{site.baseurl}}/assets/icons/apple-touch-icon-144x144.png" />
  <link rel="apple-touch-icon" sizes="152x152" href="{{site.baseurl}}/assets/icons/apple-touch-icon-152x152.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="{{site.baseurl}}/assets/icons/apple-touch-icon-180x180.png" />

  <!-- Windows Tile Icons -->
  <meta name="application-name" content="{{site.name}}">
  <meta name="msapplication-TileColor" content="#2c3e50">

  {% comment %}
    <meta name="msapplication-square70x70logo" content="smalltile.png" />
    <meta name="msapplication-square150x150logo" content="mediumtile.png" />
    <meta name="msapplication-wide310x150logo" content="widetile.png" />
    <meta name="msapplication-square310x310logo" content="largetile.png" />
  {% endcomment %}

  <!-- Android Lolipop Theme Color -->
  <meta name="theme-color" content="#2C3E50">

  <link rel="stylesheet" href="{{ "/assets/css/main.css" | prepend: site.baseurl }}">
  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
  <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />

  <!-- defining baseurl for JavaScript -->
  <script>var BASEURL = '{{site.baseurl}}';</script>
</head>
