Adding custom code in header or footer on a single page

Hi,

Does anybody know if there is a way of adding custom code to the head section of a single page?
I would like to add og:image to pages to define the image used when sharing to social media. I don’t want to add this in the site settings as i don’t want the same image for each page.

Is this something i am going to have to add after?

Thanks,
James

2 Likes

I may be wrong but i think custom code like that for individual pages is added to the body section under the head custom code box in the settings page

I can’t find what the head custom code box in the body section - could you point me in the right direction please?

Thanks,
James

Hi @JamesHannaford, at the moment, you can only modify the Head of your site settings, which will apply for all pages, but we do not have a per page HEAD setting (yet). Depending what html code you are trying to use on your page, you can also use an Embed widget on your site, and paste your html code in that for individual sites.

Cheers, Dave

@cyberdave Thanks for the reply. I am trying to add open graph protocol so that when each page is shared on social media a different image is used. I’m not sure html in an embed widget would work for this?

Hi, well the main issue is, that even though it is possible to add Meta Tags to a page using jquery in your page, those will be not be read correctly by the page, because by the time the tags are added to the Head in code, your Head has already been parsed. I think your options will be limited here except to add your code to the site settings, until we make some updates in Webflow to be able to add per page meta information, which is something we are working on, with changes to the way our page management and navigation works, so we can look at this as well, while we do that feature planning. I will discuss this with a couple of the other guys on the team and we will see what we can do here and make some more comment after that.

@cyberdave Okay thank you - at the moment i will have to add the code to head manually after exporting the code for the site. I am building a site for a podcast series, and each episode page needs to have a unique image for social media sharing. Let me know if there are any other options when you guys have discussed it. Thanks A Lot for all your help.

Yes for this particular need, that is the best approach. We’ll look at adding more support for this in future updates.

Okay - at least i know that is what i need to do, so eleviate wasting any more time trying to figure it out!

Thanks for your response, hopefully something can be added in future updates :smile:

+1 to this for Webflow to support individual page meta information and Styling

1 Like

+1

Just to give another example where I need to add a custom code to head individually.

I am trying to run a Google Analytics Experiment in one of my page and the instruction is to add the experiment code “immediately after the ”.

Hope to have this soon. Webflow has been the best tool I ever used for website optimization (lead generation). But Google Experiment is an important missing step here.

Best,

Hi @guihnz you should also be able to drag an embed widget on your target page, then paste the google analytic code into your embed widgrt, and it should work. Try that and see how it works for you.

Hi Dave,

Not sure if I understood your suggestion (or if you understood my need). Anyway, let me try to explain better.

I am trying to run an Experiment test from Google Analytics (i.e. A/B test) on one page of my site. Example: http://www.programanex.com.br/automacao-comercial

More About Google Analytics Experiment here: An important update on Content Experiments - Analytics Help

The GA instruction is to place the Experiment code just after on the 2 pages (and only on them) to be tested. As far as I understand the Experiment code must be before the GA (UI-XXXXXXXX-X) code, which is normally placed on head. I am using the Custom Code section on webflow to place the Universal GA code to all pages of my website

Using the HTML embed Widget I can only place code in the section, right? Therefore, following your suggestion (if I did understand correctly) I would end up with the Experiment code after the GA Universal code, and it won’t work.

Please let me know if I am assuming all right here or if there is anything else that I missed.

Best,

Hi @guihnz, if you need to put the Google Experiment Code just on two pages, then you can remove your GA analytics code from Site Settings (which puts it in the head), and place on each of your pages a GA analytics code snippet as an Embed (you can get that script snippet from Google), and on those two pages where you need to put the Google Experiment code, then just update the same Embed widget that has the GA analytics code on those two pages and add the Google Experiment code before the GA analytics code for just those two pages…

If you use the Google Analytics code in Site settings, it will be used on each page, and you would not be able to control the order of the script… If you use only embed widgets on each page with GA code, then you can customize this, the way those load…

Try that and see if it helps you…

Cheers, Dave

Hi @cyberdave,

I have implemented as your suggestion and it seems to be working fine, even though Google Analytics Experiment warns that the code is in the wrong session (it should be placed just after the ).

Another issue is that implement Google Analytics code manually in all pages are not the best way to handle it. And it is also placed in the wrong session.

Anyway, I appreciate your help and it has accomplished my need. It is a work around though.

I will still leave my +1 for a nice way to implement code on of pages individually.

:smile:

2 Likes

+1 – we would also like to have different og:image tags on different pages and haven’t found a way to do this yet.

2 Likes

+1 I would also like to have the simple ability to add custom code on a per page basis.
This would be killer for 301 redirects and canonical situations.

Webflow rocks - this would be much appreciated.
Thanks Chris

2 Likes

+25 :smiley: - This would be really useful.

1 Like

@guihnz, sorry, I know this is a little late for you but just in case you still want to do this in the header one of our programmers showed me a way. Paste the google experiment tag in the header which will run it on every page but then edit the last script of it like so:

if (window.location.pathname == ‘/page-you-want-it-to-run-on’) {
utmx(‘url’,‘A/B’);
}

It seems to be working for us (the experiment is only being invoked when people go to the page we want to test it on). Hope this is helpful to somebody out there!

2 Likes

Hi @pwily, it is not late, still a very useful tip. I will try.

Thank you so much!