Image meta tags — “brute-force” ordeals
The devil is in the details…
Disclaimer: The events described herein are purely non-fictional… go figure…
A few weeks before the time of the event that instigated this post, a friend of mine sought my help on an issue concerning a project he was working on at the time… this issue had to do with an “image” meta tag…
Anyways, let’s keep that by the side for a moment.
So, a bit on meta tags
Meta tags are tags that are used for describing aspect of the contents present on the site for different purposes.
According to w3schools,
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services…
There are different types of meta tags, some of which are:
- Open Graph (OG) tags — for Facebook
- Twitter cards
- Schema.org names — for Google+
- Other tags… lol. But seriously though… ( -_- ) : take the “Description” meta tags used by search engines as an example… ;)
Okay, so going back to the story of my ordeal in trying to include an image meta tag which will show an image description of the site if/when pasted on a media. Something like the following:
To achieve this, all that is needed is to include the following kind of meta in the <head> section of my application
<meta property='og:image' content='link_to_image' />That’s for Facebook. Twitters’ is a bit different with a name="twitter:image" property.
That’s all.
Now, going back to my friend having asked me for some guidance in how to include this in a Ruby-on-Rails project, especially the content='link_to_image' part, because this will have to somehow be gotten out of the asset pipeline and etc...
Note that this is someone core in the skills of the front-end tech stacks and just writing his very first Rails application.
Long story short, I just gave it to him straight without thinking twice about it, and about two minutes later, I remember him saying:
It worked!!! Thank you…
Now, just a few weeks down the line, I remembered this, and decided to implement same in an app I was working on, and the following are my ordeals and trials
- First, I tried to remember the solution I gave to my friend… I failed, I couldn’t
- Next, I tried to check for where I sent it to him so I can copy it back… failed, couldn’t find it
- Then I tried going through his GitHub account, maybe I’ll see the repository for the project I knew he was working on at that time and copy the implementation… Failed again, either he never pushed it to remote server or if he did, it wasn’t Github
- Then I was tired, and decided to just leave it… Failed again, cause I went back to it cause I really wanted it, so I started putting it together, the way I should have done from the onset
- First thought was to display an image, so I went the
image_tagway, with something like this:
<meta name="image" content="#{<%= image_tag(‘image.png’) %>}" />which I quickly got to know is a bad idea because of what got rendered:
<meta name="image" content='<img src="/images/image.png" alt="Image"/>Ohhh… image_tag ... Right!
- Next step was to try
asset_pathin place ofimage_tag, and I got:
<metaname="image"content='/image.png' />Hmmm… Okay, that is a bit more like it all I need is to make sure that this is referenced relative to the host url… which was what came next
- I found a way to add the host url to the back of the
asset_pathas follow:
<meta name="image" content="#{<%= Rails.configuration.host_base_url %><%= asset_path('image.png')}" %>’ />
Well… suffice it to say it didn’t work… :(
This is what got rendered:
<meta name="image" content='http://example.com/image.png’ />Huhhh…
Took me a while to figure out what was wrong…
The Rails asset pipeline…
Okay, so… Google!!! :D and then Stackoverflow!!!… came back with image_url
YES!!!
From the RubyOnRails API documentation, image_url
Computes the full URL to an image asset. This will use
image_pathinternally, so most of their behaviors will be the same. Sinceimage_urlis based onasset_urlmethod you can set:hostoptions. If:hostoptions is set, it overwrites globalconfig.action_controller.asset_hostsetting.
- So, I went the
image_urlway:
<meta name="image" content="#{<%= image_url('image.png') %>}" />And got the following rendered:
<meta name="image" content='http://localhost:3000/assets/image-370d816***.png' />It didn’t work
- Hehe… as if I won’t come back… So, what exactly is wrong with this now?
For me to figure this out, I have to go back to evaluating the problem… what I set out to achieve, which was: To ensure that when the site’s url is pasted in a media, it unfurls and shows a descriptive image.
And there it is… Media!…
Taking Facebook as my first media, I discovered that I needed a property="og:image" attribute for the open graph protocol.
While twitter needed a name="twitter:image" attribute...
An “Aha” moment.
#Update
TWIST OF FATE!…
Two days after I published this, I got a feed on my Github page that “my friend” has made “that his project” public… and he did that “2 days ago”.
So, it was actually on Github, just that it was a private repo…
Well, what can I say? We learn in mysterious ways…
