How to Add Facebook Open Graph Tags to Adobe Muse Page

Why and How to Add Facebook Open Graph Tags to Adobe Muse Page


In this post, I will explain to you how to add Open Graph tags to your pages created in Adobe Muse. The benefit is that you can increase engagement on Facebook and share or in other words to drive more traffic to your pages/site.

Why and how to add Open Graph tags

First thing first: why to bother with Open Graph tags? The answer is simple: sometimes you can find that thumbnail is missing or Facebook post contains a different image of what you are expecting. The image in the Facebook post should be nice and catchy in order to increase engagement and clicks. The are more tags beside image tag so you can control title and description which appears in Facebook share.
Example of missing thumbnail in facebook share


Another advantage is that and other popular sharing platforms like Twitter and Google+ will also recognize and use Open Graph tags. Twitter has its tags and here is my post on how to add a Twitter card to Adobe Muse page. In situations where twitter tags are not present it will use Open Graph tags.

How to add Open Graph tags to Muse page

Meta tags can be added to any page in Adobe Muse from: Page > Page Properties > Metadata tab. Just paste the code and save then publish your site or upload using FTP client.

Paste open graph meta tags in Adobe Muse


Note: if your site is using alternate layouts and you have versions for Desktop, Tablet and Phone then you must repeat the process for each layout of your site. Here is tutorial: Migrate existing Adobe Muse websites to responsive layout . If you are creating responsive sites in Muse then you will paste code only once as explained above.

Code example

Here is example of code that you can use:
<meta property="fb:app_id" content="your_fb_app_id" />
<meta property="og:url" content="http://www.yousite.com" />
<meta property="og:image" content="https:yourimage.png" />
<meta property="og:image:width" content="828" />
<meta property="og:image:height" content="469" />
<meta property="og:description" content="Your site description" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your site title" />
<meta property="og:locale" content="en_US" />


Copy code above and change this part: content="everything inside". Here is a link to read more about The Open Graph protocol and what meta tags you can include.

An important part of this process is to create a Facebook app and to get app id which is on the top in the code above. You should visit Facebook for Developers and create your app. When creating an app, choose: App for Pages.
Facebook app ID

Facebook Debugger

The last step is to use Sharing Debugger on Facebook for developers to check that everything works as expected.
Check open graph tags using Facebook Sharing Debugger


Product used in this tutorial:
Adobe Muse CC 2017

Comments

Popular posts from this blog

How to Change Artboard Size in Adobe Photoshop

Free Puzzle Pieces Actions For Photoshop and Elements

Old Weathered Vertical Wooden Planks Free Image