Possible to automatically fill SEO page title and SEO canonical?

I just did a test and it looks like liquid doesn’t render in the SEO fields. Can anybody confirm this? Is there any workaround?

Correct, I don’t think those fields accept Liquid.

I approach this in a different way and handle the logic in the template.
I’m assuming you want to set these other SEO meta tags based on information already available from the page/item - to avoid double handling data? or to create some sort of dynamically generated value? but either way, I think the general process below can be applied/adapted.

So I do this for all the meta data tag and schema tags, but I’ll outline the process I have for the ‘title’ meta.
First I set up a hierarchy of which ‘title’ value takes priority:

{% capture pgOGelsSEOelsName %}
{% if this.OpenGraphProperties.title != null %}
    {{this.OpenGraphProperties.title | replace:' ', ' '}}
{% elsif this.SEOTitle != null %}
    {{this.SEOTitle | replace:' ', ' '}}
{% else %}
    {{this.name | replace:' ', ' '}}
{% endif %}
{% endcapture %}

So here, if the OG Title is present it takes priority, followed by the SEO/Meta Title if present, followed by the page name as a fallback/default.

and then, set up the meta tags:

{% if this.OpenGraphProperties.title == null %}
<meta property="og:title" content="{{pgOGelsSEOelsName | strip_html}}" />
{% endif %}
<meta name="twitter:title" content="{{pgOGelsSEOelsName | strip_html}}" />

Here I’ve added the Twitter schema for title - you can use the same value to add other schemas you might need to implement.

I find this process helps reduce data entry as most of the time all the meta data is the same and doesn’t need to be entered in all the fields.

Sorry if this is complete overkill for what you were actually asking :slight_smile: but hopefully it’s helpful.

I’ll be posting my full meta/schema data snippet on the Treehouse site soon, but I need to make a few tweaks first…

4 Likes

Thank you for the detailed answer and solution @Adam.Wilson. Not overkill at all. That is what I was looking for. How is it that you have a solution to almost every issue I come up with? Amazing.

2 Likes

@Adam.Wilson are you placing the code on the page template or the pages (module) detail layout?

On the ‘content template’ so that it works for all module item types, not just pages.

1 Like

Sorry for the dumb question. I’m not familiar with the

What’s the path to the ‘content template’?

It’s most likely what you are referring to as the ‘Page Template’… but in Treepl it’s called ‘Content Templates’ :slight_smile:
image
(because they’re not strictly for pages)

1 Like

Oh yeah, there it is right in front of me :smile:

Got it :+1: :

1 Like

@Adam.Wilson Did you ever end up writing the full meta/schema data snippet? Mind sharing what you got?

Hey @Alex_B_Centrifuge. No not yet :frowning:
But I’ll paste what I use below… it should work, but there are some extra things in there specific to my builds:

{% capture OGelsMETAelsNAME %}{% if this.OpenGraphProperties.title != null %}{{this.OpenGraphProperties.title | replace:'&nbsp;', ' '}}{% elsif this.SEOTitle != null %}{{this.SEOTitle | replace:'&nbsp;', ' '}}{% else %}{{this.name | replace:'&nbsp;', ' '}}{% endif %}{% endcapture %}


{% if this.OpenGraphProperties.title == null %}<meta property="og:title" content="{{OGelsMETAelsNAME | strip_html}}" />{% endif %}
{% if this.OpenGraphProperties.url == null %}<meta property="og:url" content="{{request.request_url.href}}" />{% endif %}
{% if this.OpenGraphProperties.image == null %}<meta property="og:image" content="{{request.request_url.origin}}{% if this.OpenGraphProperties.image != null %}{{this.OpenGraphProperties.image | replace: '.svg', '.png'}}{% elsif this.image != null %}{{this.image}}{% else %}{{si.sd.si}}?width=200&height=200{% endif %}" />{% endif %}
{% if this.OpenGraphProperties.type == null %}<meta property="og:type" content="website" />{% endif %}
<meta property="og:description" content="{% if this.MetaDescription != null %}{{this.MetaDescription | strip_html}}{% elsif this.Description != null%}{{this.Description | newline_to_br | replace: '    ', ' '  | replace: '  ', ' ' | strip_html | replace: '"', '“' | truncatewords: 30 | strip}}{% else %}{{si.cd.d}}{% endif %}" />
{% if this.OpenGraphProperties.locale == null %}<meta property="og:locale" content="en_AU" />{% endif %}
<meta name="twitter:card" content="summary" />
<meta name="twitter:url" content="{% if this.OpenGraphProperties.url != null %}{{this.OpenGraphProperties.url}}{% else %}{{request.request_url.href}}{% endif %}" />
<meta name="twitter:title" content="{{OGelsMETAelsNAME | strip_html}}" />
<meta name="twitter:description" content="{% if this.MetaDescription != null %}{{this.MetaDescription | strip_html}}{% elsif this.Description != null%}{{this.Description | newline_to_br | replace: '    ', ' '  | replace: '  ', ' ' | strip_html | replace: '"', '“' | truncatewords: 30 | strip}}{% else %}{{si.cd.d}}{% endif %}" />
<meta name="twitter:image" content="{{request.request_url.origin}}{% if this.OpenGraphProperties.image != null %}{{this.OpenGraphProperties.image | replace: '.svg', '.png'}}{% elsif this.image != null %}{{this.image}}{% else %}{{si.sd.si}}{% endif %}" />    

NOTE: there is a ‘Site Information’ tag in there ({{si.cd.si}}) which is a fallback image which I call Site Icon. You can either recreate that in Site Information or just hardcode a fallback image path.

Hope it makes sense :slight_smile:

2 Likes

That’s great. Thank you so much. :+1::grin:

This I think head content and head content automation is totally something you could do a treehouse on. One side is the implementation, the other side is the value/importance/techniques of having this content. … Just a though. That being said I think it would be intersting to introduce/go over any of the code snippets that are up on the Treehouse site.

1 Like

Hey @Adam.Wilson thanks for sharing that!
One question is {{si.cd.d}} company description and {{si.cd.si}} site icon?

Yes, that’s right @luke.

Thanks you Adam for this code.