Prestashop and Facebook OG Tags

It seems like everyone is on facebook these days. They share sites and products with their friends, that is the social media power that you need. But how do you control the exposure that someone has to your site?

That is where the Open Graph tags come in. Open Graph tags tell facebook what picture to show, what description to use, the link to your site, your sites name, and other valuable data. Data that you want and need to control.

So how do you do it?

It is pretty simple actually. All you need to do is edit your header.tpl file. You are going to need to use your ftp client to download your header.tpl file from your themes folder. One you download it open it up in your favorite text editor, I use Sublime Text. Below is a screen shot of the header file, with the tags added. I highlighted in yellow what we added. I also have it below so you can copy and paste it in your header.tpl file.

Now lets explain the tags, when referring to them, I will reference them by the name in the property section.

• Title – In this example I have it set up to use the meta title for the site. Doing it this way makes it dynamic and depending on how you have the SEO on your products set up, it will use the name of the product in the title.
• Url – This is set up to return the url of the current page that is being linked to.
• SiteName – This is using the name that you entered in the back of the shop as the name of the site.
• Type – Website is the only viable option for an e-commerce site.
• Description – The way it is set up is that it will use the meta description for the page, so you can set up a description for each page on the shop.
• Image – This is the tricky one. I have it setup to use the shops logo for the image. You can leave it like this, but I would recommend making a square image of the logo about 400 x 400 pixels and using it for the image.

Now here is the code that you can copy and paste into your header.tpl file.