6

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?

  • How it is related to Sitecore? – Anton Dec 13 '16 at 16:33
  • 1
    I think this is Sitecore related, since the question is about the best place to put a specific element in the Sitecore rendering tree – Dmytro Shevchenko Dec 13 '16 at 16:53
  • I don't think it's asking where to put an element in the "Sitecore rendering tree" specifically, @DmytroShevchenko, but rather where to put a specific presentation component in the DOM on a page with an Atomic Design that happens to be managed by Sitecore - though Sitecore doesn't really come into play on this one. – Zachary Kniebel Dec 13 '16 at 19:52
  • 2
    I'm not entirely sure what the question is. Is it "will google punish me if I hide that element?" or is it "can I make sure that H1 tag is displayed only once even if I have 10 hero components on a single page?" or maybe "will my SEO be lower if I don't have H1 tag at all?" – Marek Musielak Dec 13 '16 at 20:24
  • @MarekMusielak it's a very open question: "so I am curious to know how other people have solved this problem?" – jonasag Dec 13 '16 at 21:48
3

The solution I am currently considering is to have a h1-text on the landing page Sitecore item itself. When the components are rendered the Hero controller will take this h1-text, wrap the Hero image in a h1 tag and use the h1-text as the Hero image alt tag.

Before doing this it will check to see if there are any other Hero renderings present on the page. If there are and if this Hero rendering are higher up in the stack then it won't render the h1 around the Hero and it won't change the alt-text of the image.

In the original question I said that a Hero rendering would not always be present on the landing page. But I could use the same approach in the other renderings as well, so the controller of each rendering will scan to see if an eligible h1 rendering has already been added and if so just do nothing. Otherwise it would wrap the image of the eligible h1 rendering in a h1 tag and set the alt-tag of the image to the h1-text. This would ensure that a h1 tag is always present on a landing page.

It may be a bit of a complicated solution, but as I said I cannot have h1 tags hidden by CSS or have a h1 tag visible on the page.

  • Can you explain how you will check to see if an eligible <h1> rendering has already been added to the page? I'm not sure that you can do this with Sitecore MVC. If not, what you could do is add an <h1> rendering to the landing page's Standard Values – Zachary Kniebel Dec 14 '16 at 15:34
2

This is an alternative to the approach you already posted. Keep the approach to the markup that you planned on using with the <h1> wrapped around an <img> with its alt attribute set based on a field on the page item. The difference comes in how you determine if you need to add the <h1> and set the alt attribute or not.

Rather than scanning the layout field, you could just have a property on your controllers something like this:

protected bool PageHeaderAdded
{
    get { return (bool?)HttpContext.Items["PageHeaderAdded"] ?? false; }
    set { HttpContext.Items["PageHeaderAdded"] = value; }
}

The HttpContext.Items collection is request-scoped storage. So check the property, if it is false, add your <h1> and set your alt attribute, then set the property to true. The next controller on the page will find that property set to true, so it can render normally.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.