A small library to help with the generation of SEO, Open Graph and Twitter Cards HTML meta tags for Phoenix-powered apps.
seo "/some-url" do
description "Some seo-friendly description"
og_type "website"
og_title "Some title"
og_image "/images/some-image.jpg"
og_site_name "example.com"
og_description "Some description"
endHere are the macros automatically injected, which you can use inside the block supplied
to the seo macro:
titledescriptioncanonicalog_typeog_titleog_descriptionog_imageog_site_nameog_urltwitter_cardtwitter_sitetwitter_titletwitter_descriptiontwitter_urltwitter_image
Add the xeo package to your list of dependencies in mix.exs:
def deps do
[
{:xeo, "~> 0.1.0"}
]
endThe typical flow involes (1) using the Xeo module, (2) invoking the Xeo.seo/2 macro
to define the tags for each page based on its path, and (3) injecting
the MyModule.tags(@conn) function in the root template, inside the <head>...</head> tag.
defmodule MyApp.Seo do
use Xeo
# Alternatively, `use Xeo, warn: false, pad: 2`
seo "/awesome" do
description "Some seo-friendly description"
og_type "website"
og_title "Some title"
og_image "/images/some-image.jpg"
og_site_name "example.com"
og_description "Some description"
end
seo "/another-page" ...
end
Update your root.html.heex:
<html lang="en">
<head>
...
<%= MyApp.Seo.tags(@conn) %>
</head>
</html>Now let's check if it works:
$ curl localhost:4000/awesome
...
<html>
<meta name="description" content="Some seo-friendly description" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Some title" />
<meta property="og:image" content="/images/some-image.jpg" />
<meta property="og:site_name" content="example.com" />
<meta property="og:description" content="Some description" />
...In the example above we used the og_title and og_image macros to define the open graph tags for our /contact page.
Do note that the above module will contain a tags/1 function, which accepts
a phoenix connection and returns the tags associated with the page identified
by the connection's path.
When invoking use Xeo you can supply additional options:
:warn(boolean) - show compilation time warnings (default true):pad(integer) - how much whitespace padding to use for html tags (default 4)
For elegant formatting when using the supplied macros,
you can import :xeo in your project's formatter file:
# .formatter.exs
[
...
import_deps: [:xeo],
...
]- Xeo does not work with dynamic paths, e.g
/resources/:id, only with static paths which are known at compile time.
Xeo is open source under the MIT license. See LICENSE for more details.