OpenGraph Meta for Blog Posts on Elixir Phoenix

OpenGraph meta is important for social media and networking sites.

OpenGraph Meta for Blog Posts on Elixir Phoenix

How to add OpenGraph meta data fields to the layout and show page template in Elixir Phoenix

OpenGraph is a common standard for metadata that is used on social media and social networking sites like Linkedin.

I want to share blog posts like this one to LinkedIn and see the proper title, description, and image.

I use Elixir and Phoenix to build the website Folkbot.com and so I need to add the OG fields to the meta include in EEx.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>

    <%= render_existing(@view_module, "_meta." <> @view_template, assigns) ||
        render(WwwFolkbotCom.Web.LayoutView, "_meta.post.html", assigns) %>
    <%= if current_user = @conn.assigns[:current_user] do %>
      <%= tag :meta, name: "channel_token", content: Phoenix.Token.sign(@conn, "user socket", current_user.id) %>
    <% end %>
    <%= csrf_meta_tag() %>
    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>">
    <%= render_existing(@view_module, "_style." <> @view_template, assigns) ||
      render(WwwFolkbotCom.Web.LayoutView, "_style.post.html", assigns) %>

  </head>

  <body>

      <header class="header">
        <%= render "_mega_menu.html", assigns %>
        <%= render "_flash_top.html", assigns %>
      </header>

      <main role="main">
        <%= @inner_content %>
      </main>

    <%= render "_meta_footer.html", assigns %>
    <%= render "_logins.html", assigns %>
    <script>window.userToken = "<%= assigns[:user_token] %>";</script>
    <script src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>


  </body>
</html>

OG meta fields

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="<%= @post.description %>">
    <meta name="author" content="<%= @post.user.name %>">
    <title><%= @post.title %> | <%= @post.website.title %></title>
    <meta property='og:title' content='<%= @post.title %> | <%= @post.website.title %>'/>
    <meta property='og:image' content='<%= WwwFolkbotCom.Web.Blogs.Post.Image.url({@post.filename, @post}, :original) %>'/>
    <meta property='og:description' content='<%= @post.description %>'/>
    <meta property='og:url' content='//www.folkbot.com/posts/<%= @post.id %>'/>
Not open today, try again tomorrow