Meta tags management for Phoenix applications.
- Dynamic meta tag management for SEO
- Open Graph and Twitter Card support
- LiveView and controller integration
- Customizable defaults with fallback values
- Flexible support for additional meta tags
Add meta_heex_component to your list of dependencies in mix.exs:
def deps do
[
{:meta_heex_component, "~> 0.2.2"}
# from 0.2.2 you need liveview 1.0.0 or higher
]
endConfigure default meta tags in your config files:
# config/config.exs
config :meta_heex_component,
defaults: %{
og_type: "website",
locale: "en",
# add more if you need
}Include the meta tags in your layout, for example:
# root.html.heex
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<MetaHeexComponent.live_meta_tags {MetaHeexComponent.get_meta_tags(assigns)} />
</head>The get_meta_tags/1 helper function will:
Merge configuration defaults with explicitly set meta tags Handle both controller and LiveView meta tags Ensure proper precedence (explicit values override defaults) Meta Tag Precedence Meta tags are merged in the following order (later values override earlier ones):
- Configuration defaults (from config.exs)
- Assigns set directly on the socket/conn
- Values in the meta_tags map (set via put_meta/2 or assign_meta/2)
def index(conn, _params) do
conn
|> MetaHeexComponent.put_meta(
meta_description: "Welcome to our homepage",
og_title: "Homepage",
locale: "es" # This will override the default "en"
# add more if you need
)
|> render("index.html")
enddef mount(_params, _session, socket) do
{:ok,
MetaHeexComponent.assign_meta(socket,
page_title: "Products",
meta_description: "Your product overview",
og_title: "Products List",
twitter_card: "summary",
# add more if you need
# add additional
additional_meta_tags: [
%{name: "robots", content: "index,follow"},
%{property: "og:locale", content: "en_US"}
]
)}
endAll attributes are optional and will use configured defaults (config.exs) when not provided.
meta_description - Primary meta description for SEO
meta_keywords - Keywords for SEO
author - Content author
robots - Robots meta tag content (like "index,follow")og_title - Open Graph title
og_description - Falls back to meta_description if not provided
og_type - Type (e.g., 'website', 'article')
og_image - Image URL
og_url - URLtwitter_card - Card type (e.g., 'summary_large_image')
twitter_site - @username for the website
twitter_title - Falls back to og_title if not provided
twitter_description - Falls back to og_description if not provided
twitter_image - Image URL
twitter_image_alt - Image alt textcanonical_url - Canonical URL
locale - Content language (e.g., 'en', 'es')
viewport - Viewport settings
theme_color - Theme color for browsers
csp - Content Security Policy
manifest - Web app manifest path
apple_touch_icon - Apple touch icon path
favicon - Favicon path
application_name - Application name
additional_meta_tags - List of additional meta tagsThe component implements smart fallbacks:
og_description falls back to meta_description
og_title falls back to meta_description
twitter_title falls back to og_title
twitter_description falls back to og_descriptioncustom additional_meta_tags (list) - List of additional meta tags in the format:
additional_meta_tags: [
%{name: "robots", content: "noindex"},
%{property: "og:locale", content: "en_US"}
]You can also import the functionality into your html_helper in lib/your_app_web.ex for easier use across your application. Add the following:
defmodule YourAppWeb do
def html_helpers do
... other entries
quote do
import MetaHeexComponent
end
end
endMIT