MetaHeexComponent

Meta tag management for Phoenix applications.

MetaHeexComponent helps you render SEO, Open Graph, Twitter, and custom meta tags from a shared component that works with both LiveView and controller-rendered pages.

Compatibility

Phoenix LiveView 1.0+
Verified with Phoenix 1.7 and 1.8
Tested with controller layouts, initial LiveView render, and LiveView navigation

Installation

Add meta_heex_component to your dependencies:

def deps do
  [
    {:meta_heex_component, "~> 0.2.3"}
  ]
end

Configuration

Configure default meta tags in config/config.exs:

config :meta_heex_component,
  defaults: %{
    og_type: "website",
    locale: "en",
    robots: "index,follow"
  }

Render in Your Layout

Include the component in your root layout:

<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>

MetaHeexComponent.get_meta_tags/1 merges values in this order:

Config defaults
Direct assigns on the socket or conn
Values stored in :meta_tags

Controller Example

def index(conn, _params) do
  conn
  |> MetaHeexComponent.put_meta(
    meta_description: "Welcome to our homepage",
    og_title: "Homepage",
    locale: "es"
  )
  |> render(:index)
end

LiveView Example

def 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",
     additional_meta_tags: [
       %{name: "robots", content: "index,follow"},
       %{property: "og:locale", content: "en_US"}
     ]
   )}
end

Available Attributes

SEO

meta_description
meta_keywords
author
robots
canonical_url
locale
viewport
application_name

Open Graph

og_title
og_description
og_type
og_image
og_url
og_site_name
og_locale

Twitter

twitter_card
twitter_site
twitter_title
twitter_description
twitter_image
twitter_image_alt

Additional Tags

theme_color
csp
manifest
apple_touch_icon
favicon
additional_meta_tags

Fallback Behavior

og_description -> meta_description
og_title -> meta_description
twitter_title -> og_title
twitter_description -> og_description

Custom Additional Meta Tags

additional_meta_tags: [
  %{name: "robots", content: "noindex"},
  %{property: "og:locale", content: "en_US"}
]

Optional Import

If you want to import the helpers into your web layer:

defmodule YourAppWeb do
  def html_helpers do
    quote do
      import MetaHeexComponent
    end
  end
end

License

MIT