I have an e-commerce site and I migrated the site’s search results pages to use LiveView. Users can paginate the search results, and the liveview uses push_patch to update the url with a page param like fakestore.com/search?page=1
I want to be able to canonicalize the search results pages such that fakestore.com/search?page=1 or fakestore.com/search?page=2 or fakestore.com/search?page=n… all point to the same canonical url.
I am having a difficult time figuring out how to add a rel=canonical link to the head of the page. The LiveView in question inherits from a root.html layout that stores all of the static metatags, but I can’t simply put the rel=canonical in root.html because that root layout is shared across many other pages, and I only want the rel=canonical to apply to the search results page.
What is the best method for passing information from a LiveView to the layout?
One idea I have is ditching the live "path" LiveView call in the router and instead use regular controllers/templates. Then, in the controller, I would be able to pass some information about rel=canonical to the conn, and pull that information off of the conn in the root layout. Then I could use live_render to render the liveview from within the controller. However, I would really prefer to avoid making changes like these just for this use case.
There is no need to update canonical on live patches. Canonical is used by search engines and search engines won’t rely on live navigation. Instead, they will render the whole page, which will always contain the proper canonical from the initial render.
Would it be possible to dynamically update meta description in a LiveView? To motivate the example, we can imagine a LiveView that accepts url params to display a certain category of products.
example.com/apples should show a list of apples example.com/bananas should show a list of bananas
In mount of this liveview, the url param is consumed and used to fetch the list of fruit, and also queries for some general information (description about the type of fruit etc.)
What I would like to do is be able to keep this generalized LiveView that can accept arbitrary url params, but dynamically update the meta description so that way the SERP for the page example.com/bananas can show a description of bananas and the SERP for example.com/apples can show a description of apples.
I’ve been reading about updating the title here, but I’m not sure how it may be possible to dynamically add things like meta description to the root layout.
For the same reason that José said, is there a real need to have the meta description update? Crawlers will receive the proper meta tags on HTTP request, and as far as I’m aware, no a11y tools use the meta description and friends so I don’t think they need to be updated on live nav?
It’s likely I’m not describing or even understanding my own problem correctly, I appreciate the help.
It’s not so much that I’m trying to update meta description etc on live nav as I am trying to get different meta descriptions in the head of the page for different http requests to urls that are ultimately using the same liveview.
example.com/bananas and example.com/apples both use FruitLive
If I make a request to /bananas I want the banana meta description and if I make a request to /apples I want the apple meta description.
Besides my contrived example here I do feel like it would be useful to be able to conditionally update what is in the root layout depending on certain url params or what have you.
Thanks again, I’m fairly new to elixir so I appreciate the patience with what might be a rather naive set of questions
If it helps, I’m trying to accomplish what this metatags library does, except for liveview. For regular non liveview routes I’m able to use this metatags library and in the controller I am able to consume the URL params and pass information along before it makes it to the layout. I’m not sure where to intercept the request the same way in the standard liveview lifecycle that doesnt use controllers. By the time I’m in mount it seems too late.
From what I understood its not possible to update parts of the root layout, in our case the head element. I’ve read that recommended to not use the LiveView in case you need to update parts of root layout. This is truly sad because I have already built an app in LiveView and did not know about this limitation earlier. I have tried to insert the metatags with js by utilizing LiveView hooks, but it doesnt work unfortunately
We recommend performing regular redirects/anchor links for navigating between different root layouts because things like scripts and styles won’t be unloaded/cleaned up. You can use LiveView perfectly fine in these cases
Agreed, you can use LiveView fine in the above mentioned cases. I’m appreciative of LiveView, and excited to keep using it. However, in order to properly place structured metadata in the HTML element for a blog post, I would prefer a more efficient path as opposed to querying a post once at the controller-level, to populate layout specific assigns, and again at the LiveView level during server and client-side mounts.
