Re: Add Dynamic Content to <head> from Theme Extension

corbenisboring · ‎01-15-2024

I've built a Shopify App that proxies to proxy `/a/blog` from our storefront to `http://example.com/blog`.

`http://example.com/blog` responds with `application/liquid` so that we can match our current theme.

This responds with the blog contents, as well with liquid to set the page title:

```

{%- assign page_title = "${title}" -%}

```

But how do I set custom meta tags & scripts for SEO? I'm trying to use an app embed blocks:

This in `blog-app-extension/blocks/blog_seo.liquid`:

```

{% capture page_title %}
{% endcapture %}
{% capture page_description %}
{{description}}
{% endcapture %}
<script>
{{page_title}}
</script>
{% endcapture %}
<meta property="og:site_name" content="{{shop.name}}" />
<meta property="og:url" content="{{canonical_url | default: shop.url}}" />
<meta property="og:title" content="{{title}}" />
<meta property="og:type" content="website" />
<meta property="og:description" content="{{description}}" />

{% schema %}
{
"name": "App Embed",
"target": "head",
"settings": []
}
{% endschema %}

```

I'm new to Shopify Liquid, so excuse the ignorance. Any suggestions on the best way to go about this?

Thanks!

danieldixon · ‎02-16-2024

Unfortunately Shopify doesn't make a way to set the page title and meta information from an app proxy. There are two approaches I see as a work around:

1. Pull the title from the URL path

If you had /a/blog/my-new-post, in your theme.liquid when the "/a/blog" path is found, you could grab and turn the "my-new-post" into a page title of "My New Post" by using liquid to remove dashes and capitalize. Might also be able to use the path as a key to look up a metaobject on the store?

2. Use Javascript in the markup returned to set the page information

You can also set the page title using document.title = "My New Post", but I'm not sure how search engines will treat this.

Always Building SaaS and Products
RevRover.com
HereFacts.com

View solution in original post

danieldixon · ‎02-16-2024

Unfortunately Shopify doesn't make a way to set the page title and meta information from an app proxy. There are two approaches I see as a work around:

1. Pull the title from the URL path

If you had /a/blog/my-new-post, in your theme.liquid when the "/a/blog" path is found, you could grab and turn the "my-new-post" into a page title of "My New Post" by using liquid to remove dashes and capitalize. Might also be able to use the path as a key to look up a metaobject on the store?

2. Use Javascript in the markup returned to set the page information

You can also set the page title using document.title = "My New Post", but I'm not sure how search engines will treat this.

Always Building SaaS and Products
RevRover.com
HereFacts.com

S_James · ‎02-23-2024

That's not true, you can most definitely set the page_title using an app proxy, and with app embed blocks you can add additional meta tags for SEO - As specifically stated in Shopify's documentation https://shopify.dev/docs/apps/online-store/theme-app-extensions/extensions-framework#app-embed-block...

I'm not massively familiar with app theme extensions and liquid myself, however, the issue appears to be with your last caption as you're missing the opening capture tag, I'm not quite sure why you're trying to insert script tags containing the page_title anyway..? The following example works to add the additional tags, however, the page_title capture does not work to change the page title. I imagine this is due to the block being rendered after the page_title has already been set. A workaround would be to set the page_title in your initial app proxy liquid response and not via the app embed block.

{% capture page_title %}
{% endcapture %}
{% capture page_description %}
{{description}}
{% endcapture %}

{% schema %}
{
"name": "App Embed",
"target": "head",
"settings": []
}
{% endschema %}

corbenisboring · ‎04-30-2024

Yep – went with grabbing the path as a key to lookup the metaobject!

assign current_path = request.path
if current_path contains '/a/blog'
assign post_slug = current_path | split: '/' | last
endif

assign og_publishdate = 'now' | date: '%Y-%m-%d'
if post_slug != blank
assign blog = shop.metaobjects['blog'][post_slug]
endif
-%}

Re: Add Dynamic Content to <head> from Theme Extension

Add Dynamic Content to <head> from Theme Extension

Community Blog Articles