# 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:
```elixir
def deps do
[
{:meta_heex_component, "~> 0.2.3"}
]
end
```
## Configuration
Configure default meta tags in `config/config.exs`:
```elixir
config :meta_heex_component,
defaults: %{
og_type: "website",
locale: "en",
robots: "index,follow"
}
```
## Render in Your Layout
Include the component in your root layout:
```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>
```
`MetaHeexComponent.get_meta_tags/1` merges values in this order:
1. Config defaults
2. Direct assigns on the socket or conn
3. Values stored in `:meta_tags`
## Controller Example
```elixir
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
```elixir
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
```elixir
meta_description
meta_keywords
author
robots
canonical_url
locale
viewport
application_name
```
### Open Graph
```elixir
og_title
og_description
og_type
og_image
og_url
og_site_name
og_locale
```
### Twitter
```elixir
twitter_card
twitter_site
twitter_title
twitter_description
twitter_image
twitter_image_alt
```
### Additional Tags
```elixir
theme_color
csp
manifest
apple_touch_icon
favicon
additional_meta_tags
```
### Fallback Behavior
```elixir
og_description -> meta_description
og_title -> meta_description
twitter_title -> og_title
twitter_description -> og_description
```
### Custom Additional Meta Tags
```elixir
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:
```elixir
defmodule YourAppWeb do
def html_helpers do
quote do
import MetaHeexComponent
end
end
end
```
## License
MIT
