We are building a landing page which only consists of loosely coupled renderings in an atomic design. The first rendering is usually a "Hero" component but not always. The Hero component can potentially be present multiple times on the landing page as it is a loosely coupled rendering that can be used on other pages as well.
I need to stick a h1 tag on the landing page, but because the page itself is empty and it only consists of one placeholder and loosely coupled renderings I am not sure where to put it. All the renderings that make up the landing page have images on them and I want to wrap one of these images in a h1 tag and give the image an alt-text. According to people who know more about SEO than me that is an acceptable way of doing it. The design does not allow for a visible h1-text and I cannot just hide a h1 tag through CSS as search engines would punish the website for doing that, so it needs to be displayed in an image alt tag wrapped in a h1.
So I need to ensure that the h1-tag is displayed once and only once per landing page, but it doesn't matter where it is placed as long as it is present.
Surely, this is a very common scenario when working with loosely coupled components, so I am curious to know how other people have solved this problem?