Tutorial on using product image in open graph protocol tags

[Dh42]

Hey guys, I wrote a small tutorial on how to use the Open Graph Protocol tags in Prestashop to show the product image when a page is shared. Its a good way to up your SEO and social bookmarking for your site.

[PEPPE83]

Hi Dh42, thank you for your tutorial.

I tried to apply your guide but I have a problem, can you help me?

I always have trouble the picture to appear right on FB of a product or the logo of my site and I do not understand why.

I work on PS 1.4.8.2

I followed your guide and:

- I have successfully added the lines of code to the file "header.tpl".

- In override/classes i have a file named "_FrontController.php"

 

renaming it in "FrontController.php" my website work correctly.

if i add your code in this file i get a blank page but products works correctly in facebook.

if i use the "FrontController.php" attached in your tutorial i get blank page and products dont works on facebook.

 

Sorry for my english

[surf4lifeuk]

Hi Dh42

 

I managed to add your code into the header file and it works nicely. However, I was wondering if you could write an additional tag to show the price of the product? I need the following tag to be converted to Prestashop friendly version:

 

<meta property="og:price:amount" content="15.00" />

 

Is this possible?

[artofadornment]

Prices & Availability:
 
These might help, but you should definitely test them first (back up header.tpl, then set to force compile and disable cache) to make sure your site still works OK after adding each tag. These work in my version of 1.5.3.1 with custom theme, however they may not work for everyone.

Price & Currency:

<meta property="product:price:amount" content="{$product->getPrice(false)|string_format:"%.2f"}" />
<meta property="product:price:currency" content="{$currency->iso_code}" />
<meta property="product:price:standard_amount" content="{$product->getPriceWithoutReduct(true)|string_format:"%.2f"}" />

If you want prices to include tax (using the above excludes all tax) then set the price:amount false to true, and then the price:standard_amount true to false.
 
Availability:

{if $product->quantity <= 0}
<meta property="og:availability" content="oos" />
{else}
<meta property="og:availability" content="instock" />
{/if}

However those tags placed as-is in the header.tpl may break the shopping cart. Therefore I recommend making them conditional on whether it's a product page or not. To do that, replace the tag <meta property="og:type" content="website" /> that Dh42 wrote here with the following:

{if $page_name=='product' AND $product->id|intval<>0}
    <meta property="og:type" content="product" />
    <meta property="product:price:amount" content="{$product->getPrice(false)|string_format:"%.2f"}" />
        {if $product->on_sale}
            <meta property="product:price:standard_amount" content="{$product->getPriceWithoutReduct(true)|string_format:"%.2f"}" />
        {/if}
<meta property="product:price:currency" content="{$currency->iso_code}" />
        {if $product->quantity <= 0}
            <meta property="og:availability" content="oos" />
        {else}
            <meta property="og:availability" content="instock" />
        {/if}
{else}
    <meta property="og:type" content="website" />
{/if}

It's probably a messy solution, but it *should* work in most versions. If someone has a better way to do it though,  by al means please share it!
 
- Elaine

Edited March 2, 2014 by artofadornment (see edit history)

[saidecors]

some body please help me to place Og tags for my website http://modularkitchen.saidecorschennai.in

Thanks in advance

Edited September 23, 2014 by saidecors (see edit history)

[PrestaShark]

Prices & Availability:

 

These might help, but you should definitely test them first (back up header.tpl, then set to force compile and disable cache) to make sure your site still works OK after adding each tag. These work in my version of 1.5.3.1 with custom theme, however they may not work for everyone.

 

Price & Currency:

<meta property="product:price:amount" content="{$product->getPrice(false)|string_format:"%.2f"}" />
<meta property="product:price:currency" content="{$currency->iso_code}" />
<meta property="product:price:standard_amount" content="{$product->getPriceWithoutReduct(true)|string_format:"%.2f"}" />

If you want prices to include tax (using the above excludes all tax) then set the price:amount false to true, and then the price:standard_amount true to false.

 

Availability:

{if $product->quantity <= 0}
<meta property="og:availability" content="oos" />
{else}
<meta property="og:availability" content="instock" />
{/if}

However those tags placed as-is in the header.tpl may break the shopping cart. Therefore I recommend making them conditional on whether it's a product page or not. To do that, replace the tag <meta property="og:type" content="website" /> that Dh42 wrote here with the following:

{if $page_name=='product' AND $product->id|intval<>0}
    <meta property="og:type" content="product" />
    <meta property="product:price:amount" content="{$product->getPrice(false)|string_format:"%.2f"}" />
        {if $product->on_sale}
            <meta property="product:price:standard_amount" content="{$product->getPriceWithoutReduct(true)|string_format:"%.2f"}" />
        {/if}
<meta property="product:price:currency" content="{$currency->iso_code}" />
        {if $product->quantity <= 0}
            <meta property="og:availability" content="oos" />
        {else}
            <meta property="og:availability" content="instock" />
        {/if}
{else}
    <meta property="og:type" content="website" />
{/if}

It's probably a messy solution, but it *should* work in most versions. If someone has a better way to do it though,  by al means please share it!

 

- Elaine

 

Very nicely done Elaine! Works perfect even with price values!

 

Dh42 - link is broken