I've been working to re-skin this app.
I've changed the original OG tags in the application layouts file to this:
application.html.erb
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6 <%= @bodyId %>"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7 <%= @bodyId %>"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8 <%= @bodyId %>"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9 <%= @bodyId %>"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="<%= @bodyId %>"> <!--<![endif]-->
<head>
<title>Tweak Tell Friends, Earn Free free shoes</title>
<link rel="icon" href="<%= asset_path('favicon.ico') %>" type="image/x-icon">
<link rel="shortcut icon" href="<%= asset_path('favicon.ico') %>" type="image/x-icon">
<meta property="og:title" content="Tweak is coming!"/>
<meta property="og:description" content="Our legacy in your closet. Didn’t want to leave you all behind. Share tweak and earn free shoes."/>
<meta property="og:image" content="<%= asset_path("refer/truman.png") %>"/>
<meta property="og:url" content="<%= root_url %>"/>
<% if @is_mobile %>
<% if @bodyId == 'home' %>
<meta name="viewport" content="width=1600" />
<% else %>
<meta name="viewport" content="width=1120" />
<% end %>
<% end %>
<%= stylesheet_link_tag "core.css", :media => "all" %>
<%= csrf_meta_tags %>
</head>
<body id="<%= @bodyId %>">
<%= yield %>
</body>
</html>
But for some reason it's rendering this when you click the share to Facebook button. Note that it still shows all the old content (I still have not changed the razor image but the other content should be set.)
![Screenshot]](https://i.stack.imgur.com/FOUhI.png)
I used Facebook's developer tool to see what they are seeing when scraping my staging app.
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6 home"> <![endif]--><!--[if IE 7 ]> <html class="ie7 home"> <![endif]--><!--[if IE 8 ]> <html class="ie8 home"> <![endif]--><!--[if IE 9 ]> <html class="ie9 home"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--><html class="home">
<!--<![endif]--><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Tweak Tell Friends, Earn Free free shoes</title>
<link rel="icon" href="/assets/favicon-0c278a6f59ad0742674f70fc104b1ad3.ico" type="image/x-icon">
<link rel="shortcut icon" href="/assets/favicon-0c278a6f59ad0742674f70fc104b1ad3.ico" type="image/x-icon">
<meta property="og:title" content="Tweak is coming!">
<meta property="og:description" content="Our legacy in your closet. Didn’t want to leave you all behind. Share tweak and earn free shoes.">
<meta property="og:image" content="/assets/refer/truman-f2f6a0b791d7b2a6bb5cb9a32b2a0dae.png">
<meta property="og:url" content="https://tweak-staging.herokuapp.com/">
<link href="/assets/core-e009a81f9ad71a7faa17350a2751d9ca.css" media="all" rel="stylesheet" type="text/css">
<meta content="authenticity_token" name="csrf-param">
<meta content="tONzpSwUruFddfaGxJOJPp30OSy+aaSZERg9SnCbhyU=" name="csrf-token">
</head>
<body id="home">
<div class="hero">
<p class="large brandon">Tweak is launching</p>
<p class="small brandon">The next generation of <br>creative footwear</p>
</div>
<div class="form-wrap clearfix ">
<div class="key"></div>
<p class="byline brandon">Be the first to know</p>
<form accept-charset="UTF-8" action="/users/create" class="new_user" id="new_user" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="tONzpSwUruFddfaGxJOJPp30OSy+aaSZERg9SnCbhyU=">
</div>
<input class="email brandon" id="user_email" name="user[email]" placeholder="Enter Email" size="30" type="text"><input class="submit brandon" name="commit" type="submit" value="Step Inside">
</form>
</div>
</body>
</html>
What could be causing this issue? Is it something to do with the asset's pipeline? I've been able to precompile with no problem.
I ended up fixing this issue by hardcoding the home url and the image url in the content section of the meta tag.