Editing the <head> of a page

Liberty Create - Build Advice
1

Is there a way add tags to the head of a webpage or webpage (authenticated) page?

The scenario we have is we’d like to add social media sharing buttons to a page. These work best with particular meta tags added to the head of the page which specify things like a title, short description, image path. All this is available in the record properties that is the context of the page - we just need a way to dynamically add them to meta tags in the head.

We raised an idea for adding dynamic values to the title tag for the page too - so it can be “Event details - [Event name]” in the title.

2

Does anyone know if this is possible.
We need the abilty to add meta tags to a page head.

3

Good morning @lcc_jc

Thank you for your question and apologies for the late reply.

I have checked with our team and they do not believe this is possible.

If you need any other help, please don’t hesitate to ask!

thank you

LV

4

Why not create a new widget in Code Studio for the authenticated webpage to use?
Then in the frontend.js file add a created() function which creates the meta element and appends it to the document.head?

Here’s an example of adding the Google Charts loader script to the document head taken from the Organisation Chart widget available in the app share.

/* frontend JS */
export default {
	created () {
		let gcScript = document.createElement('script')
        gcScript.setAttribute('src', 'https://www.gstatic.com/charts/loader.js')
        document.head.appendChild(gcScript)
	},
...

Hope this helps :wink:

1 Like
5

Thanks Neil, that sounds like a good workaround.

Is there any scope where it could become a new feature, where you could have an editable list of tag names and the source (select which property to populate from) against pages?

6

Although adding the meta tags with JavaScript works, the issue we have is that not all of the trawlers for the social media sites execute the JavaScript. So when we’re using the Facebook sharer for example, it only looks at the original page source which doesn’t include any meta tags.

We need to be able to add the meta tags server side so that when a URL is passed to a social media sharing site it can pick those meta tags out.
Additionally, this would rely on the page having a base type - which you can’t do on a public webpage, so there would need to be a way for robots to access authenticated pages or to allow public pages to have a base type set.