Replace custom seo.html with Jekyll SEO Tag plugin

[ddd-workshop]

Recently announced by GitHub: https://github.com/blog/2162-better-discoverability-for-github-pages-sites

[mmistakes]

Sort of. I originally planned to use the Jekyll SEO Tag plugin that comes along with GitHub Pages but it didn't fully support everything the theme does (eg: Twitter Summary cards with large images).

So I took what the plugin did and baked it into the theme so I could enhance and build off of it.

If for whatever reason you'd rather use the native plugin instead of my customizations you can rip out {% include seo.html %} from /_includes/head.html and replace with {{ seo }} and you're good to go.

[mmistakes]

Followup. The Jekyll SEO Tag plugin has made a lot of nice updates and now supports everything I was custom rolling into the theme and would love to swap it in.

Only thing is it would be a bit more work if you want to include feature images as meta data for Twitter Cards and Open Graph. The variable names are different so you'd have to manually specify them and edit any old content.

Jekyll SEO Tag	MM theme
page.image	page.header.image
site.logo	site.og_image

I tried using some Liquid assign tags to override variables and placed that before {% seo %} in head.html but it didn't seem to work.

{% if page.header.image contains "://" %}
  {% assign page.image = page.header.image %}
{% else %}
  {% assign page.image = page.header.image | prepend: "/images/" | prepend: base_path %}
{% endif %}

{% if site.og_image contains "://" %}
  {% assign site.logo = site.og_image %}
{% else %}
  {% assign site.logo = site.og_image | prepend: "/images/" | prepend: base_path %}
{% endif %}

{% seo %}

If anyone has any ideas of how to pull in images to be used with {{ seo }} without having to change variable names in the theme or edit YAML Front Matter in posts/pages/collections that would be great.

[mmistakes]

Workaround. Use YAML anchors to avoid duplicating values.

Example:

header:
  image: &image /assets/images/filename.jpg
image: *image

or

header:
  image: &image /assets/images/filename.jpg
image: 
  path: *image

[ghost]

@mmistakes need a hand with this? It'd be great to get this into the theme. Related discussion occurring here: https://github.com/jekyll/jekyll-seo-tag/issues/159

[mmistakes]

Sure @jhabdas if you want to work on a PR. I've been putting if off because I didn't want to deal with disrupting the current behavior and any issues that are going to flood in over "why aren't my Twitter cards showing up anymore" due to the header.image change :wink:

[ghost]

@mmistakes cool. gimme a few minutes. I'll work on it now.

[mmistakes]

That and it's going to deprecate the configurable <title> separator and revert back to -. But I'm cool with that, just need to remember to add a note about in the docs. https://mmistakes.github.io/minimal-mistakes/docs/configuration/#site-title

[mmistakes]

@jhabdas RE: auto-adding the {% seo %} tag from the plugin I was thinking something like this in case a user wants to rip it out, at least they get SEO optimized <title> elements and the canonical tag.

{% if site.gems contains 'jekyll-seo-tag' %}
    {% comment %}
    Add metadata for search engines and social networks if jekyll-seo-tag plugin is enabled
    {% endcomment %}
    {% include head-seo.html %}
{% else %}
    <title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
    <meta name="description" content="{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}">
    <link rel="canonical" href="{{ page.url | replace:'index.html','' | absolute_url }}">
{% endif %}

_includes/head-seo.html

{% seo %}

[ghost]

That and it's going to deprecate the configurable