Xeo - Generate SEO/Twitter Cards/Open Graph tags for Phoenix pages with ease

Your Libraries & OS Mentoring Libraries
,
1

Hello,

I would like introduce you xeo, a small library for helping with the creation of HTML meta tags for SEO/Open Graph/Twitter Cards purposes, in Phoenix based projects:

...
  seo "/awesome" do
    og_title "My Awesome Page"
    ...
  end

  seo /another-page", do: ...
...

Usage Example

In your Phoenix-based project, use Xeo in a module to inject the appropriate macros, then describe your page tags:

defmodule MyApp.Seo do
  use Xeo
  # Alternatively use with options: `use Xeo, warn: false, pad: 2`

  seo "/awesome" do
    og_title "My Awesome Page"
    og_image "/images/awesome.jpg"
    og_description "This is my awesome page"
    ...
  end

  seo "/another-page" do
    # ... 
  end

  seo "/and-another" do
    # ...
  end
end

Then, update your root.html.heex with the generated tags/1 function:

  <head>
    ...
    <%= MyApp.Seo.tags(@conn) %>
  </head>

And BOOM!

Now your pages (provided they’re defined in your router of course) will have the appropriate meta tags:

$ curl localhost:4000/awesome

...
    <meta property="og:title" content="My Awesome Page" />
    <meta property="og:image" content="/images/awesome.jpg" />
    <meta property="og:description" content="This is my awesome page" />
...

Limitations

Xeo does not work with dynamic paths, such as /resources/:id, etc only with static paths.

Use Options

  • By default, the library will emit compile time warnings/reminders for GET routes for which there isn’t a seo/2 defined. You can turn these off with use Xeo, warn: false.

  • For more custom HTML formatting, you can control the whitespace prefixed to the generated tags with pad: some-int-value use option.

That’s it!

Cheers!

7 Likes
3

Thank you!

I am very glad you found it useful.
Your words capture precisely why I created the library.