Most content is shared to Facebook and Twitter as a URL, so it's important that you mark up your website with Open Graph tags to take control over how your content appears. Without these tags, they may not display correctly.
Follow the steps below to set this up.
Step 1: Log in to your affiliate's dashboard.
Click User, select the user.
Step 2. Update User (Login to the user interface for this user)
Step 3:Click Facebook.
Step 4. Add the meta code to your landing to your landing page. You need to add it before the closing </head> tag.
Facebook example
<meta property="og:title" content="Drive More Traffic to Your Website"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.osiaffiliate.com"/>
<meta property="og:image" content="http://www.osiaffiliate.com/images/omnistar-logo-fb.jpg"/>
<meta property="og:site_name" content="OSI Affiliate Software"/>
<meta property="og:description" content="Sign up for a FREE 15-Day trial of the Omnistar Customer referral software and start having your customers work for you."/>
Here is how the post will look from the above code:
Modify the code that was used for this post. Update the title, url, image link, description, and site name a shown below:
<meta property="og:title" content="Your Title Goes Here"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http:/www.yoursite.com"/>
<meta property="og:image" content="http://www.yourimagelink.com"/>
<meta property="og:site_name" content="Your Site Name Goes Here"/>
<meta property="og:description" content="Your Description goes here"/>
Below is a table explaining the description of the key tags. For a full list of tags and their descriptions, visit the Facebook Open Graph Protocol website or the Facebook Open Graph Object Properties page.
Meta Tag Name | Description |
fb:app_id | This is optional. If you don’t have your website app id, you can create one by following instructions provided by Facebook. If you don’t provide the app id, Facebook will use a default app id. |
og:type | Since you are adding this to your landing page. You can use the type ‘website’ |
og:url | This is the url to your landing page. Make sure to use the canonical URL of the landing page. |
og:title | Use the title of your landing page. |
og:image | Provide the url of the image you want displayed when the link is shared on Facebook. It should be at least 600x315 pixels, but 1200x630 or larger is preferred (up to 5MB). |
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@your twitter handle goes here">
<meta name="twitter:title" content="Your title goes here">
<meta name="twitter:description" content="Your description goes here">
<meta name="twitter:image" content="http://www.yourimagelink.com">
Property | OpenGraph |
twitter:card | og:type |
The card type | If an og:type, og:title and og:description exist in the markup but twitter:card is absent, then a summary card may be rendered. |
Used with all cards | |
twitter:site | n/a |
@username of website. Either twitter:site or twitter:site:id is required. | |
Used with summary, summary_large_image, app, player cards | |
twitter:description | og:description |
Description of content (maximum 200 characters) | |
Used with summary, summary_large_image, player cards | |
twitter:title | og:title |
Title of content (max 70 characters) | |
Used with summary, summary_large_image, player cards | |
twitter:image | og:image |
URL of image to use in the card. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported. |
Login to you Weebly account and click on Edit Website.
Step 5. Click on Pages and select the webpage that you linked for social sharing.
Step 6. Click on SEO Settings.
Step 7. Paste the meta codes in the field provided for Header Code.
Step 8. Click on Publish to make the changes.
If you're using Twitter, change the relevant information to link to your Twitter account, and your Twitter website card. You can check that Twitter is reading your meta-tags correctly by using this validator: https://cards-dev.twitter.com/validator.
If you're using Facebook, you'll want to modify the open graph meta-tags. You can check what Facebook is grabbing from your site by using their debugger tool: https://developers.facebook.com/tools/debug/
Note that Imgur was used to generate a shareable link to the open graph images. The ideal size for a Facebook open graph image is 1200 by 630 pixels. The ideal size for a Twitter website card is 800by 418 pixels.