Social Meta Tags for Open Graph and Twitter Cards
Social Meta Tags for Open Graph and Twitter Cards
This module adds all neccesary Open Graph *[1] meta tags for Facebook/Google+ and Twitter meta tags for Twitter Cards *[2] to the head section of your shop's category, product and cms pages and allows you to add specific meta titles, meta descriptions and meta images for each page and for Facebook/Google+ and Twitter seperately to optimize the appearance of link posts and tweets of your site. You define your style and provide the information you want for shares on Facebook timelines, in Google+ and in Twitter Cards, independent from your images and data used in the shop itself. You can also choose what card style is used for Twitter (Summary Card, Summary Card with Large Image, Photo Card, Gallery Card or Product Card). Also you can specify custom meta tags that provide attribute data of categories and products, for example, if you choose og:type "product" for your products and want to provide some more information via the Open Graph Protocol. Or if you need to add third party meta data that works with one of the following tags:
* here you can find more information about
[1] Facebook Open Graph meta tags: https://developers.facebook.com/docs/opengraph
[2] Twitter Cards: https://dev.twitter.com/docs/cards
Features:
Note: If you change information about a page, category or product and it isn't visible on new link posts instantly, you can enter the URL of your site in the following debug tool provided by Facebook to reindex your new data: https://developers.facebook.com/tools/debug
For Twitter Cards, you need to validate the link to your card on the following page: https://dev.twitter.com/docs/cards/validation/validator
Usage:
Install the module like described below, clear your cache and re-login to your admin panel. Go to "System -> Configuration -> MEDIA ROCKS EXTENSIONS" where you have a section for configuration called "Social Meta Tags". The Configuration is seperated in 4 groups:
1. General: Here you can define a fallback order for your product images. Choose one from the dropdown or choose "custom" and enter your desired order in the "Product Image Custom Fallback" field that appears below the dropdown.
2. OpenGraph Settings (Facebook/Google+): To activate the og:tags for Facebook and Google+ etc. you have to first enable this section. Then you can enter admin ID(s), API Key, and choose if you want to use the og:type "product" on your product pages. Also you can upload a fallback image for the og:image meta tag, that is used when no image is found for a certain category, product or cms page.
3. Twitter Cards Settings: To activate the Twitter meta tags you have to first enable this section. Then you can enter a Twitter username or ID, an author's Twitter username or ID (note that IDs override the usernames), the card types for cms, category and product pages seperately and a fallback image that is used when no image is found for a certain category, product or cms page. For summary cards only, you can activate "Use Thumbnail Image for Summary Card", so the extension falls back to the thumbnail image of a product or category, if no special twitter meta image is provided. This is good because twitter needs a 120x120 pixels image for the type summary card, but you are still able to provide a bigger fallback image for cms and category pages, if you don't use that card type for them.
Another great feature is the product card, which is only available for product pages: Set "Twitter Card Type for Products" to "Product Card" and the form will reveal some additional options. If you're familiar with Twitter Product Cards you already know them (twitter:data1, twitter:label1 and so on). If you are not, please read the documentation on the Twitter developer page. With this extension you can publish data to these product specific meta tags by simply typing in the attribute code of the attribute you want to be used. For example type 'sku', and the twitter card displays your products SKU. Or type 'final_price' to show the price including tax. A neat feature is that you can choose if attributes like price, cost, special_price and final_price get formatted with the currency code used in your store. A fallback to the product thumbnail like described for summary cards in the previous paragraph is also available for product cards.
4. Custom Meta Tags for Product and Category Pages: In this section you can add custom meta tags. This is especially very useful for og:type product and Twitter Product Cards. The section provides a detailed description for you to add additional product or category attributes. Look at the screenshots for further information.
Test it: If you're done setting up your Social Meta Tags you can view your pages source code and search for "og:" or "twitter:" to find your newly added tags in the head section. To debug your pages, use the follwing sites:
- https://developers.facebook.com/tools/debug
- https://dev.twitter.com/docs/cards/validation/validator
If you have any questions about further customization or features you'd like to have implemented in future versions of this extension, you can contact us via our customer support channels.
Installation:
Installation via Magento Connect Manager:
Open the connect manager and upload the extension file under "Direct package file upload".
Manual Installation:
Unpack the extension and upload all folders to your Magento root folder.
Uninstall Module:
To uninstall the module, please use the Magento Connect Manager or remove the following files and folders from your system manually:
- app/etc/modules/Mediarocks_SocialMetaTags.xml
- app/code/local/Mediarocks/SocialMetaTags
- app/design/frontend/base/default/layout/mediarocks_socialmetatags.xml
- app/design/frontend/base/default/template/mediarocks/socialmetatags
