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: jekyll/jekyll-seo-tag#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 😉

[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 <title> separator and revert back to -. But I'm cool with that, just need to remember to add a note about that in the docs.

There's an open issue against the SEO tag for title separator customization: jekyll/jekyll-seo-tag#121

Be great if you could upvote the issue.

[mmistakes]

Upvoted. I'm picky about the visual appearance of that stuff so that's why I originally baked it into the theme. In the grand scheme of SEO it probably doesn't matter in the least so I can see why it might not make it into the plugin.

[ghost]

I took a good long look at this and reached the conclusion there's not much to gain from adding support for Jekyll SEO Tag to this theme. Here's why:

• Made Mistakes theme already does a good job at SEO on its own, and is a fine example of how to roll your own SEO (and that's nice to have to gain an understanding of how to do things without relying on a dependency).
• Adding the Jekyll SEO Tag will result in many exceptions to the existing documentation, both in the standard configuration as well as the multi-author support.
• There will be namespace clashes between theme and plugin both in the config and authors.yml which, if integrated, would cause headaches and potentially break existing theme features. And I'm not sure there are enough YAML anchors in the world to address that.
• Jekyll SEO Tag gem, though available for GitHub Pages sites, needs more work IMHO. I would encourage those interested in attempting to integrate it to work with the maintainers of the plugin to continue making improvements (and ideally add some namespacing of some kind).

For the adventurous using the gemified theme, you can add support for Jekyll Tag gem by doing the following:

1. Install the versioned plugin dependency to your site-level Gemfile

   bundle install gemrat
   gemrat jekyll-seo-tag

2. Add jekyll-seo-tag to the gems array in your site _config.yml

3. Copy contents of theme _includes/seo.html file to _includes/head/seo.html in your site after doing:

   mkdir -p _includes/head && touch _includes/head/seo.html

4. Create a site-level _includes/seo.html with the following contents:

   {% if site.gems contains 'jekyll-seo-tag' %}
     {% comment %}
       Add metadata for search engines and social networks if jekyll-seo-tag plugin is enabled
       @see https://github.com/jekyll/jekyll-seo-tag/ for usage instructions
     {% endcomment %}
     {% seo %}
   {% else %}
     {% comment %}
       Otherwise use custom theme override
     {% endcomment %}
     {% include head/seo.html %}
   {% endif %}

5. And then follow the plugin setup and usage instructions.

😅

[mmistakes]

@jhabdas Pretty much the same conclusions I drew which is part of the reason I've held off tackleling this. My main motivation was to leverage the plugin so I wouldn't have to maintain the SEO portion of the theme and piggy back on improvements they were regularly making.

But I agree, probably too many things to fight against to do it and likely lose a few custom additions the theme accounts for. Is there anything there plugin does the theme doesn't that we should add?

[ghost]

👍 None that I'm aware of. There're some additional JSON-LD support in the works, though, as we're seeing, mixing several different structured data formats into one plug-in can get a little hairy.

[ghost]

FYI jekyll/jekyll-seo-tag#161

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[djrare]

Issue webpage https;\(Basic)-www.

[djrare]

Comment