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 %>'/>
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 %>'/>
