Phoenix Meta Tags
This is a library helps generate meta tags for a website.
Default Usage
From a struct like this:
%{
title: "Phoenix Title",
description: "Phoenix Descriptions",
url: "https://phoenix.meta.tags",
image: "https://phoenix.meta.tags/logo.png"
}will become:
# Default tags
<title>Phoenix Title</title>
<meta content="Phoenix Title" name="title">
<meta content="Phoenix Descriptions" name="description">
#Open Graph tags
<meta content="website" property="og:type">
<meta content="https://phoenix.meta.tags" property="og:url">
<meta content="Phoenix Title" property="og:title">
<meta content="Phoenix Descriptions" property="og:description">
<meta content="https://phoenix.meta.tags/logo.png" property="og:image">
#Twitter tags
<meta content="summary_large_image" name="twitter:card">
<meta content="https://phoenix.meta.tags" name="twitter:url">
<meta content="Phoenix Title" name="twitter:title">
<meta content="Phoenix Descriptions" name="twitter:description">
<meta content="https://phoenix.meta.tags/logo.png" name="twitter:image">Advanced Usage
Other key value of tags map will be rendered individually by key. Nested map will be rendered by flat-representation of keys. For example:
map = %{
title: "Phoenix Title",
description: "Phoenix Descriptions",
url: "https://phoenix.meta.tags",
image: "https://phoenix.meta.tags/logo.png",
fb: %{
name: "facebook",
size: %{
width: 100,
height: 200,
position: %{
x: 10,
y: 15
}
}
}
}In addition to default tags like above example, the rendered tags will have more:
<meta content="facebook" property="fb:name">
<meta content=100 property="fb:size:width">
<meta content=200 property="fb:size:height">
<meta content=10 property="fb:size:position:x">
<meta content=15 property="fb:size:position:y">Instead of a nested map, you can also use a string-key map, this also delivers the same result:
map = %{
"title" => "PhoenixTags",
"fb:name" => "facebook",
"fb:size:width" => 100,
"fb:size:height" => 200,
"fb:size:position:x" => 10,
"fb:size:position:y" => 15
}Tag Value Override
In default rendering, the og:title tag will get value from title. If you re-define og:title value, the new value will be override the default title value. For example:
map = %{
title: "Phoenix Title",
og: %{
title: "Override"
}
}Will have output:
<title>Phoenix Title</title>
<meta content="Phoenix Title" name="title">
<meta content="Override" property="og:title">Installation
The package can be installed by adding :phoenix_meta_tags to your list of
dependencies in mix.exs:
def deps do
[
{:phoenix_meta_tags, ">= 0.1.9"}
]
endIn your Web Module add this:
def view do
quote do
...
use PhoenixMetaTags.TagView # Add this
end
end
def controller do
quote do
...
use PhoenixMetaTags.TagController # Add this
end
endAlso put this render function inside your <head> tag of app.html.eex:
<head>
<%= render_tags_all(assigns[:meta_tags] || %{})%> # Add this
</head>Usage
Wherever you want to render meta tags, jut put it before render your view:
conn
|> put_meta_tags(%{
title: "Phoenix Title",
description: "Phoenix Descriptions",
url: "https://phoenix.meta.tags",
image: "https://phoenix.meta.tags/logo.png"
})
|>render("index.html")Or, use it as a plug:
@meta %{
title: "Phoenix Title",
description: "Phoenix Descriptions",
url: "https://phoenix.meta.tags",
image: "https://phoenix.meta.tags/logo.png"
}
plug :put_meta_tags, @metaDefault value
You can put the default value for meta tags in your config file. This config will be merge with runtime tags before rendering.
config :phoenix_meta_tags,
title: "Phoenix Title Default",
description: "Phoenix Descriptions Default",
url: "https://phoenix.meta.tags.default",
image: "https://phoenix.meta.tags.default/logo.png",
"og:text": "Hello Open Graph",
fb: %{
name: "facebook",
size: %{
width: 100,
height: 200,
position: %{
x: 10,
y: 15
}
}
}Copyright and License
Copyright (c) 2018 hlongvu
This work is free. You can redistribute it and/or modify it under the terms of the MIT License. See the LICENSE.md file for more details.