Questions & Help>Questions

How to create dynamic meta tag in phoenix

/phoenix#meta-tag#ui
shahryarjb

shahryarjb

Hello,

I want to create dynamic meta tag in each controller and view, for example :

in show action function

<meta name="keywords" content="...." />
<meta name="description" content="...." />
<meta property="og:image" content="...." />
<meta property="og:image:width" content="1074" />
<meta property="og:image:height" content="506" />
<meta property="og:title" content="...." />

in index function

<meta name="keywords" content="...." />
<meta name="description" content="...." />
<meta property="og:image" content="...." />

in these functions, meta tags are different, it should be noted I need to add custom code in head like this:

.... In summary, I need to have full head access to import something which I will be able to edit in controller , because I read these property with database

What do you have a suggestion for me? I don’t need fix meta !!

I read these:

https://www.brainarama.com/thought/dbfe9020-b431-11e7-ae34-3f710d564c96/Elixir-Phoenix-framework-pass-data-from-controller-action-to-layout-view-app-html-eex

10 comments
/phoenix#meta-tag#ui
6078 10

Showing Posts 1 to 10

voughtdq

voughtdq

Sure, just provide a list of keys/values for each meta tag and then map those to Phoenix.HTML.Tag.tag/2. You’d put this in your layout view or a shared view:

  def meta_tags(attrs_list) do
    Enum.map(attrs_list, &meta_tag/1)
  end

  def meta_tag(attrs) do
    tag(:meta, Enum.into(attrs, []))
  end

Assuming your data fits into this shape:

  attrs_list = [%{name: "keywords", content: "........"},
                %{name: "description", content: "........."},
                %{property: "og:image", content: "......"}]

Then you can use it like this in your layout:

<%= if @meta_attrs, do: meta_tags(@meta_attrs) %>

Of course, you’ll need to provide meta_attrs in the assigns for each controller. You could also do it with a plug if that gets tedious.

5
Post #1
shahryarjb

shahryarjb OP

Hello, Thank you very much, I have a problem when I decade to start Phoenix server

== Compilation error in file lib/trangell_html_site_web/views/layout_view.ex ==
** (CompileError) lib/trangell_html_site_web/templates/layout/app.html.eex:9: undefined function meta_tags/1

Step 1

in templates/layout/app.html.eex path I write

<%= if @meta_attrs, do: meta_tags(@meta_attrs) %>

Step 2

in controllers/page_controller.ex path :

  def index(conn, _params) do
    attrs_list = [%{name: "keywords", content: "........"},
                %{name: "description", content: "........."},
                %{property: "og:image", content: "......"}]
    render(conn, "index.html", meta_attrs: attrs_list)
  end

Step 3

in views/page_view.ex path :

def meta_tags(attrs_list) do
    Enum.map(attrs_list, &meta_tag/1)
  end

  def meta_tag(attrs) do
    tag(:meta, Enum.into(attrs, []))
  end

where did I make a mistake?

0
Post #2
voughtdq

voughtdq

Try defining them in views/layout_view.ex instead of views/page_view.ex

1
Post #3
shahryarjb

shahryarjb OP

it works for me , but I think it has some problems

see please :

<meta content="test1" name="keywords"><meta content="test2" name="description"><meta content="......" property="og:image">

at frist it loads content and after loads name , I saw https://hexdocs.pm/phoenix_html/Phoenix.HTML.Tag.html#tag/2 , but it doesn’t have any example :frowning:

0
Post #4
shahryarjb

shahryarjb OP

can some body help me?

0
Post #5
manukall

manukall

I’m not sure I understand what the problem is. If you’re concerned about the order of attributes (content before name), then I’m pretty sure it doesn’t matter.

1
Post #6
dokuzbir

dokuzbir

if you want exact order, instead of map you can use list

attrs_list = [
[name: "keywords", content: "........"],
[name: "description", content: "........."], 
[property: "og:image", content: "......"]
]
2
Post #7
voughtdq

voughtdq

Not in my example, though. Phoenix.HTML alphabetizes the attrs.

2
Post #8
fklement

fklement

Here → http://cloudless.studio/articles/27-implementing-page-specific-titles-in-phoenix you can find a very nice and simple example for implementing dynamic page specific titles.

2
Post #9
chezlio

chezlio

Awesome stuff, I just had to change the heex part to the Phoenix 1.6.6:

  <head>
    ...
    <!-- METAs -->
    <%= if assigns[:meta_tags], do: meta_tags(@meta_tags) %>
1
Post #10
— All posts loaded —

Where Next? Top

View thread on forum (has 10 replies!)
phoenix
meta-tag
ui
Home Questions & Help>Questions
15 5963 10
Last post
REPLY VIEW THREAD WITH 10 POSTS

Trending in Questions Top

RSP87
Questions & Help>Questions

Programming Phoenix chat example - iPhone lack of socket updates
I’m working on a project that simulates the bumbl example in the programming phoenix book. It acts almost like an email client. We have a...
/phoenix#troubleshooting
1 950 6
New
nseaSeb
Questions & Help>Questions

What's the approach for handling lists that allows for optimized traversal?
Hello, I know there is an approach for handling lists that allows for optimized traversal, but I can’t recall the specific method (somet...
#learning-elixir#list
13 419 15
New
RemyXRenard
Questions & Help>Questions

Livebook DataTable displaying charlist as list
I’m seeing that a list inside a Kino.DataTable will be interpreted as a charlist, even if the Kino.configure() is set to charlists: :as_l...
/livebook#charlist
2 325 3
New
brecabral
Questions & Help>Questions

Scoped Routes section of the Phoenix guides refers to a problem without explaining what it is ("but there is a problem")
Documentation While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
/phoenix
2 232 2
New
velrest
Questions & Help>Questions

`:erlang.float` vs `value * 1.0`: Which is the prefered way?
So my question is quite simple and i have found no conclusive answer on forum, google or AI. Should we use :erlang.float for Integer to ...
#learning-elixir
12 638 5
New
samoloth
Questions & Help>Questions

Prevent_hijacking? on email change confirmation with magic link strategy
Hi, I’ve just set up an application with ash_authentication. There is only magic link strategy for now, so there is no confirmation add o...
/ash#ash-authentication
0 196 1
New
FlyingNoodle
Questions & Help>Questions

Should change and preparation modules validate arguments?
If a change or preparation module uses Ash.Changeset.get_argument/2 or Ash.Query.get_argument/2 (or any of the other get_argument functio...
/ash
1 138 1
New

Other Trending Topics Top

mudasobwa
Chat & Discussions>Discussions

Cure - a new language compiled to BEAM
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
#static-types#type-checking#types#fsm
168 5507 69
New
marciok
News>Announcing

Gust - A task orchestration system built in Elixir
Hi there! We created Gust: A task orchestrator inspired by Airflow. For those who have never heard about Aiflow, it’s a Python-based wor...
/phoenix/oban#library#workflow#background_job#reactor
111 4469 40
New
jimsynz
News>Announcing

Beam Bots - Resilient Robotics on the BEAM
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
/beam-bots#library#robotics#bb
119 2916 28
New
Dmk
News>Announcing

Xamal - Deploy Elixir releases to bare metal servers via SSH
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
#library#deployment#deploy#deployments#xamal
75 2512 33
New
netoum
News>Announcing

Corex - Accessible and unstyled UI Phoenix components
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
/phoenix#library#ui#liveview#hooks#accessibility#component#tableau
63 2662 20
New
webofbits
Chat & Discussions>AI / LLMs

How much do you still code yourself?
With AI doing more of the implementation work, I’ve been wondering how much coding I should deliberately keep doing myself. My main conc...
#ai
202 1626 84
New
Back to top

Latest Phoenix Threads

Phoenix Forum ❯

Questions & Help>Questions

Questions Questions ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

ElixirCasts

Producing high quality Elixir screencasts since 2017.

Our Sponsors

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Error tracking, logs, uptime, and Just Enough APM. Built for developers.

Code Sync

Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!

Defacto

Bringing learning, work and compliance together since 1987.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

WyeWorks

**Building the future of software with AI, trust, and human connection.**

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Forums

Popular Tags

Our Sponsors

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Error tracking, logs, uptime, and Just Enough APM. Built for developers.

Code Sync

Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!

Defacto

Bringing learning, work and compliance together since 1987.

ElixirCasts

Producing high quality Elixir screencasts since 2017.

WyeWorks

**Building the future of software with AI, trust, and human connection.**

Software Mansion

The team behind Membrane, Popcorn, LiveDebugger. Available for hire.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews