MatijaL
Hi,
In a LiveView app, I want to setup different meta tags for some pages. For example, on a user profile page, I want to add user specific meta title and description.
In mount function, I set :profile_meta to true
def mount(_params, %{"user_token" => user_token} = _session, socket) do
current_user = Accounts.get_user_by_session_token(user_token)
{:ok,
socket
|> assign(:current_user, current_user)
|> assign(:profile_meta, true)}
end
In the head section I have the following:
<%= if @profile_meta do %>
<meta property="og:title" content={"#{@profile.name}"} />
<meta property="og:description" content={"#{@profile.about} "} />
<% else %>
...
When the profile page is opened in the browser, meta tags are loaded properly in the head tag as they should be.
The problem is that when sharing those page on social media, the data is not loaded because those websites don’t use javascript when scraping meta tags so mount function doesn’t happen and profile_meta: true is never assigned.
What would be the best way to handle this?
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #ai
- #elixirconf-us
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Practical resources that improve the lives of professional developers.
Master modern tools, write cleaner code, and tackle real-world challenges.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 4- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
sodapopcan
There are two stages to LiveView mounting, dead render for standard http and live render for websocket connection.
mountis called each time and there’s no JS at play on the dead render, so you should be good.MatijaL
I thought so too, but it doesn’t work for some reason, just the default values are loaded (inside the else clause). And as I said, in the head tag when loading with browser, everything is loaded as it should.
sodapopcan
Does it render if you
liveSocket.disconnect()on the JS console then view source? And is this in the root template? In a quick test I did it worked. Are you setting it anywhere like in a plug to deal that initializes it and maybe re-nilifying it? Is it in a layout that is only rendered by LiveView and not dead views? If it is in the root template then you should just write it asassigns[:profile_meta]then you don’t have to worry about it being set. It’s ok to do this since LiveView doesn’t manage root (after the initial render).thomas.fortes
I would also recommend the use of some site like https://www.opengraph.xyz/ to test if it isn’t a cache issue on the side of the social network.