The first thing I noticed was that the new Weebly editor does not add proper open graph data. So when shared on Facebook, the image shown was a segment of my debbiediscovers logo So in order to improve shareability of this site: I had to add open graph meta tags into the header portion of each page: <!-- Update your html tag to include the itemscope and itemtype attributes. --> <html itemscope itemtype="http://schema.org/Webpage"> <!-- Schema.org markup for Google+ --> <meta itemprop="name" content="DebbieDiscovers Needs Your Help"> <meta itemprop="description" content="Let's build a school together with Pencils of Promise"> <meta itemprop="image" content="http://i.imgur.com/CCwSAX5.jpg"> <!-- Twitter Card data --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@debbiediscovers"> <meta name="twitter:title" content="DebbieDiscovers Needs Your Help"> <meta name="twitter:description" content="Let's build a school together with Pencils of Promise"> <meta name="twitter:creator" content="@debbiediscovers"> <!-- Twitter summary card with large image must be at least 280x150px --> <meta name="twitter:image:src" content="http://i.imgur.com/nz9InSi.jpg"> <!-- Open Graph Data for Facebook --> <meta property="og:url" content="http://www.debbiediscovers.weebly.com" /> <meta property="og:type" content="website" /> <meta property="og:title" content="DebbieDiscovers Needs Your Help" /> <meta property="og:description" content="Let's build a school together with Pencils of Promise: This is a dedicated fundraising site for friends and family to learn more about Debbie's campaign to build a school together in Laos with Pencils of Promise." /> <meta property="og:image" content="http://i.imgur.com/CCwSAX5.jpg" /> Note: Add this to each individual page under Pages, SEO Settings and Header Code (and not the overall Settings page). How to Add Open Graph Meta Tags to your Weebly Site1. At the top of the Weebly editor, click on Pages. 2. Go to the Page that you want to add the meta-tags to. Click on the three dots on the extreme left of the page. 3. Once you're on the page, look for SEO Settings. 4. When you're on SEO Settings, scroll all the way down to the bottom until you see Headers. 5. Add to the Header Code by modifying the meta-tags I listed above. 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: I used Imgur to generate a shareable link to my 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. Hope that helps! Let me know in the comments if it did, or if you have any questions!
Comments
|
Categories
All
DEBORAH KAYThis is a simple blog to track my fundraising activities and to keep family, friends and supporters updated on my progress. Archives |