Question

While creating Open Graph extension in Magento I came across an issue- although my metatag is correct, facebook cannot catch my og tag because there is too much code before my meta/og tag.

Has anyone else encountered this and do you have any suggestions?

<reference name="head">
    <block type="catalog/product_view" name="product.opengraph">
        <action method="setTemplate">
            <template>socialtag/opengraph_product.phtml</template>
        </action>
    </block>      
</reference>
Was it helpful?

Solution

Here's an alternative solution. It's not nice, and should be considered a hack. It also goes against the purposes of Magento's layout system. Nonetheless, if your requirement is not to override the base head template, then try this:

Inject Content via Event Observer

In your module config XML, add the following event:

...
<global>
    ...
    <events>
        <http_response_send_before>
            <observers>
                <head_modify>
                    <type>singleton</type>
                    <class>Namespace_Module_Model_Observer</class>
                    <method>injectOgTags</method>
                </head_modify>
            </observers>
        </http_response_send_before>
    </events>
    ...
</global>
...

And then you would create an observer class to match:

<?php

class Namespace_Module_Model_Observer
    extends Varien_Event_Observer
{

    public function injectOgTags(Varien_Object $object)
    {
        $response   = $object->getResponse();
        $html       = $response->getBody();

        // Some logic for building up the appropriate meta tags
        // based on URL or product or layout handles
        $html = str_replace('<head>', '<head><meta property="og:title" content="Page title" />', $html);

        $response->setBody($html);
    }

}

So far as I can see, this is only way to solve your problem. Neither the stock head block nor its base template make provisions for adding meta tags above its call for child HTML.

OTHER TIPS

I'm not sure what exactly is rendering in the head that pushes your meta tags so far down, nor have I seen this being an issue (except the "rule of thumb" which says to place meta tags as high as possible in the HEAD).

In any case, you might try this:

<reference name="head">
    <block type="catalog/product_view" name="product.opengraph" before="-">
        <action method="setTemplate">
            <template>socialtag/opengraph_product.phtml</template>
        </action>
    </block>      
</reference>

Notice the before="-" attribute. This will get picked up during block generation (see Mage_Core_Model_Layout::_generateBlock) and inserted at the top of the parent block's stack (see Mage_Core_Block_Abstract::insert).

Unfortunately, this alone will not solve your problem, as the stock Magento head template does not render its children in a sorted order. So you will have to override this template yourself and force the sort flag.

To do this, change the head template via layout XML:

<reference name="head">
    <action method="setTemplate">
        <template>your/module/head.phtml</template>
    </action>
</reference>

And in that template render your child HTML like so:

<?php echo $this->getChildHtml('', true, true) ?>

Where the third argument is the sort flag which tells the block to render its children according to your managed order. This will get your block at the top.

On a side note, because you will have to go through all of this trouble anyway to extend the head template, you might also want to bump up the child rendering up near the top of the template (above your CSS/JS).

BONUS:

Why are you leveraging the catalog/product_view block? See this extension for a good boilerplate to compare your code with: https://github.com/thaddeusmt/magento-fb-opengraph/ -- their implementation covers OG tags beyond just products.

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top