Join the Webstudio community

Updated 2 months ago

Webflow-like collection master pages & custom head/footer code in page settings

At a glance

The post discusses the need for custom header code on a page level to add SEO schema code, and the importance of collection master pages for making Webstudio useful. The comments cover several points:

1. Community members debate the placement of schema code, with some arguing it can go anywhere, while others suggest it should be in the head section for better crawl budget and rich snippets.

2. There is discussion around the concept of "collection master pages" and their importance for designers and non-coders using Webstudio, with one community member stating they are unsure where to start with this feature.

3. Community members share their experiences using similar features in other platforms like Webflow, and discuss the pros and cons of different approaches to managing custom code and scripts.

There is no explicitly marked answer in the comments, but the discussion provides insights into the community's perspectives on the topic.

Useful resources
  • The custom header code on page level is needed to add SEO schema code.
  • Collection master pages are a must in making Webstudio usefull
J
P
A
17 comments
@Pizza 1. schema code can go anywhere (src linked)
  1. What are collection master pages? Are you referring to the page that is auto generated when you create a new collection? If so, what's your argument that they must exist for webstudio to be useful (a wildly bold statement if i understand correctly)
https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data
1) I really love the ability to have custom head and footer code on page level in the way webflow does. this allows me to check schema on every page in good overview. having these snippets in my layer panel would me harder to work with.

2) Yes, this is what i'm reffering to. They need to exist because your target audience are no coders, which are often designers. Designers think in master pages since it's present in almost all design software. The way Webflow has don this in their UI is easy to understand. In Webstudio i've no idea where to start tbh
For the context: i'm using webflow on a daily basis for over 3 years now. If i can't find out, new users surely can't as well
1 - I used to think this too but like doing it the new way. I'm able to create a unique html embed for each script making it easy to keep scripts separate, reusable, and understandable (see attached at the end if have post embeds). However, if you still want that, search suggestions and see if it's been suggested before and comment it or add a new one if it doesn't exist. Note there is a global html head field in project settings, but this applies to every page
Attachment
image.png
  1. cms isnt out yet (not saying master pages will be a part of it)
I see. I'm doing this in webflow as well, create a folder and drop multiple invisible html embedds in it. The issue here is that you have to open each to see the content. That's why i put SEO code in my custom code field at page level settings. Like you've mentioned, this feature is already present on site level
here's an example for a client of mine. i'm using these fields to optmise for seo (performance and schema) and keep the embedds in my timeline for function scripts
Attachment
Screenshot_2024-04-15_at_19.41.35.png
Schema "can" go anywhere...

However, if you're using @graph and writing advanced schema, you'll want it as high up in the html code as possible (e.g. in the head) to be a priority in Google's crawl budget for the page.

There are workarounds, such as injecting schema via GTM. But I'd much rather have access to add in custom head code.
Is @graph open graph? If so those are auto output but anything else you want that are meta tags can be added in the page settings. And these can be bound to your data aka dynamic
Attachment
image.png
and for crawl budget why not just place them at the beginning of body? then even if you have a super large/long page they'll get read no problem
@graph is not related to Open Graph in any way. It's a way to organize your JSON-LD schema in a hierarchy using @graph and @id tags. And you definitely want it in the <head> if you're able to put it in there.
Is there some sort of reference you can point me to that would back this up? I've seen in Google's doc head or body is fine for JSON-LD and in the case of crawl budget why is the top of the body not acceptable?
Go scope the IMG or SIA testing
Linking a reference to the claim would help the most if you'd like to see progress on the feature request
TL;DR

"While theoretically, it shouldn’t have made any difference where the markup sits – as long as it is present in the raw HTML source code – in practice the snippet should be in the < head > section for a site to achieve rich snippets in search engine results pages."
The joys of SEO.

Google: it doesn't matter
User Study: it matters
Add a reply
Sign up and join the conversation on Discord