react-helmet-async icon indicating copy to clipboard operation
react-helmet-async copied to clipboard

Ability to have granular control over order of elements

Open jtart opened this issue 7 years ago • 6 comments

This is also an issue (but not a GitHub one...) in react-helmet.

While this library, and react-helmet, allow some level of control over the order of head elements - by element type: link, meta, etc - it would be good to have fine-grain control over what element goes where as the position of elements inside the head is important.

An example of the benefits of this are in meta elements, where it is best for some key meta elements to come at the top of the head, i.e. charset, and some meta elements to come towards the bottom, i.e. open-graph data.

jtart avatar Aug 29 '18 23:08 jtart

Would it be a solution to provide this order in the index.html and let the library preserve your original order? I was originally implementing this in react-helmet but it feels like it's not maintained anymore

https://github.com/nfl/react-helmet/pull/407

JoviDeCroock avatar Oct 15 '18 10:10 JoviDeCroock

@JoviDeCroock do the current unit tests account for what your patch fixes, or is it possible to show the behavior with a test?

staylor avatar Oct 17 '18 20:10 staylor

@staylor Well i wanted to first discuss this before i would try implementing it somewhere else, The problem in most SPA's is that when you add a <Helmet> on a page it gets placed on the bottom, this is below an awfull lot of <style> tags from for example a css-in-js library. This prevents crawlers from seeing the meta tags since they only crawl the first x amount of characters.

I want to find a solution that suits the needs for both server and client side. I hope this explanation makes a bit of sense.

Thank you so much for taking your time to respond to this issue, i appreciate it a lot.

JoviDeCroock avatar Oct 17 '18 20:10 JoviDeCroock

@staylor I'm running into an issue that some component on the page looks very bad during page loading because css gets loaded in the end. Not sure if it's the same issue here, but would love to know if there's any workaround :)

Maggie199 avatar Mar 06 '19 06:03 Maggie199

Any update on this issue?

I think there's a problem with sharing some pages because meta tags can become burried under too many links and script tags and sites like linked in or facebook can't reach some of the updated meta data that you may set in dynamically generated pages.

is there a way to maybe have a stricter order of tags with meta being at the very top, followed by link and script tags? That way the meta data can be scraped regardless of how many links and script tags you may have in your head.

I'll see about getting a PR out for this.

dvzrd avatar Mar 14 '21 00:03 dvzrd

I've started some work on this (see PR #133). It hard-codes a certain set of tags and attributes that should be prioritized for SEO purposes. As it stands, this only works on a SSR, but a client render will respect the order from the server and keep it unchanged. Would be curious if anyone has any preference on this pattern.

justinph avatar Jun 23 '21 22:06 justinph