This game is all about user generated content, and quite some levels are being made. You can link to a specific level like so:
Which detects the level with JavaScript and auto loads the level client side.
But it would be extremely cool if users share that link that the OpenGraph meta data would already show their level thumbnail and description.
Is this possible? I saw one page with a very conclusive NO, but then I see things like next on netlify and then I start doubting again wether or not it’s possible.
Could you please elaborate if that is possible and if so where I can read up some documentation to get that working?
Open Graph tags strictly need a HTML file to parse and check the tags, so as long as there’s the same HTML file is being used, the same tags would be applied. That would be my guess.
It would be possible with Server Side Rendering in a way that you could generate and return the correct HTML as per the URL. So, I guess you can use Netlify Functions for this to some extent. You can generate the HTML template and keep the image files ready in your repo. Then you can check the # value and match it with your levels. Here’s an example: virtual-lolly/src/functions at main · philhawksworth/virtual-lolly · GitHub of how you can use some amount of SSR.
The problem with that is, you’d have to send URLs like yourdomain.com/api/filename.js?level=code. Only then the function would be called.
Hi Luke! Thanks for the answer, I tried to find actual documentation on how to do this without any external service but I did not manage to find this, would you recommend using an external service? If not do you have a page with actual documentation on how to do the pre-rendering?
Hi @luke , so I enabled the pre-rendering, and I put some code high up in my body that changes the open graph tags based on the # in the url, however still I’m seeing the old open graph tags in the facebook debug tool Sharing Debugger - Meta for Developers, what am i missing?
Hi, @ErikSom. It is possible that a previous response is being cached. Quoting our documentation here:
Our built-in prerendering service will cache prerendered pages for between 24 and 48 hours; this is not adjustable.
If you have requested this URL before the change was made, it could be that the prerender service has the cached value.
Please note, that URL you sent requires a Facebook login and I don’t have a Facebook account. I’m not able to use that tool for testing. I’ve been using this instead:
Hi, @ErikSom. To troubleshoot, I need some way of determining what is a correct response and what is not. I also need to be able to see it locally when I test.
What is the URL you are testing? What is the expected content in a correct response and what are you seeing instead? What makes a response correct or incorrect?
In other words, to troubleshoot I need to be able to reproduce what you are seeing locally. I’m asking the questions above so I can test the same URLs you are testing and so I know what to look in the responses to determine correct from incorrect.
Hi @luke , thanks for your reply. The url I’m looking at is the following level url:
If you inspect the after loading this url, you can see that all the opengraph meta tags are changed the first instance you hit this page. Example image:https://share.getcloudapp.com/6quQJr48
Hi, @ErikSom. I think the issue is because you are using an anchor tag in the URL:
https://jollyworld.app/#XCiphfJrV_yFxEg5ajwg2/
Anything after the # in the path portion of the URL is being ignored by the prerender service and it is returning the content for just this URL:
https://jollyworld.app/
Note, if the URL was a normal path (not an anchor) then the prerendering would be specific to the URL:
https://jollyworld.app/XCiphfJrV_yFxEg5ajwg2/
However, with the # included the XCiphfJrV_yFxEg5ajwg2/ become part of the anchor and is not treated as being a distinct page because it isn’t. It is the same page as just https://jollyworld.app/ but with an anchor. It isn’t a new page.
You site javascript might treat is as a different page but the URL specification says it is the same page so the same prerendered content is returned.
The only solution I know of is to stop including the literal # character in the URLs. If there are other questions about this, please let us know.
Hi @luke ,
Ah that makes a lot of sense! Ok I will see if there is anything I can do, will query parameters work for this service? The levels are created dynamically by users. If you have other idea’s on how to make a url like https://jollyworld.app/XCiphfJrV_yFxEg5ajwg2/ work without refreshing the page and generating an html on that location I would be happy to learn!
I don’t think we have other resources for this specific problem at our fingertips right now, as this really goes beyond the scope of Netlify-specific support. But if you or someone else is able to make this work, please do post the solution here for others!
I did make it work! I’m using the browser history API to replace the state and add a query parameter in the URL. It now gives back the dynamic open graph content. Thanks for the hint @luke. And sorry for not posting the solution, i got caught in a lot of other work. JollyWorld - Face gory levels of fun.