OpenGraph tags for social media links
What for?
Makes links on social media have title, image, description.
How test?
You’ll find post after post about having a FaceBook logon. Maybe your interests are not FaceBook, or WhatsApp (part of FaceBook)? Instagram, Telegram, Twitter and so forth?
On the social media platform of interest, make an account for yourself. Then post in links, see how they look. If you want to experiment, you will have problems with cache.
Note that WhatsApp, at least, is fixed to the marked URL. Even if a website serve‐mechanism can handle or redirect from alternative URLs, URLs with alternative forms may not cause enhanced displays. Or take time to propagate. Display propagation may also depend on device.
How long before effect?
Seems to be connected to web presence of the pages. If the page is indexed with search‐engines, and especially if images are associated with it (e.g. structural markup)… I havn’t timed it, but maybe after an hour? If no existing web presence, two days? Anyway, for the web, very fast effect. Otherwise, I don’t know. I’ll post if I find anything.
The registration seems to be mainly concerned with cacheing the image. Makes sense, because processing the image for cache will be expensive. Once an image is cached, it seems to work for all URLs it is applied to… but only if the URL is indexed on the web.
Where?
If you have articles, items in catalogues, product pages… leaf content of any kind with included images, then those webpages.
Information pages and homepage
On homepages, most big sites provide at least titles and description Open Graph data. When there is no image, hefty descriptions seem to be preferred.
Information pages often have no Open Graph data at all. However, some promotional websites, even on information pages, will have both titles and images.
For images on home‐and‐information pages, the provision of Open Graph data seems to depend on site aims and link usage. The following are partly suggestions, but respect big‐website usage. If the site is
informative, and the links likely to be used in text
No markup. Because if images spring up when trying to refer to resources it’s distracting?
promotes content, and links are likely to stand‐alone
Yes markup. But be aware of the comments above
BBC? Microsoft? No. Udemy—no effort that is effective. Reddit—no effort at all. IKEA? Yes, on everything. The Guardian, NY Times, Apple and Stackoverflow walk between—logos and text on home and category pages, but information pages are plain.
How?
There’ a little more than this, but this is all most pages use. Add to HTML,
<meta property="og:title" content="Product!" />
<meta property="og:type" content="webpage" />
<meta property="og:url" content="https://fazed.com" />
<meta property="og:image" content="https://fazed.com/images/anything-can-opener.jng" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:description" content="You want it bad! The can-opener that will open every can anywhere, anytime, forever!" />
The tags need to be one of the first things in the HEAD of a webpage. I recall Facebook say within the first 1Mb. I’ve put the tags in this order because, though it makes no structural sense, that’s how they’re listed in the protocol.
If you provide any of title, description or image they may substitute for the URL, so think about what you want, or you could replace default information—relatively dense, informative—with nothing but a title in bold variant. Unlikely to happen, but beware. Descriptions and images—don’t include them if don’t want. But if you want them, must put the meta tags into the HTML because, far as I know, the data will not be lifted from page scrapes or structural markup.
Further notes:
‘type’ is really easy in OpenGraph. Any page that has content is an ‘article’. Any page about the site or navigation or anything else, is a ‘webpage’. Give thanks this isn’t Schema.org structural markup
URL is the canonical URL for the page
Image size tags are optional, but help social media engines
Other tags
May be of use,
<meta property="og:locale" content="en_GB" />
<meta property="og:site_name" content="Fazed" />
<meta property="og:video" content="https://fazed.com/videos/fixanythingamabob.jng" />
Best practice is to not state a locale for American English. But ‘locale’ has a use if you wish to present different images with translated material (if images will be similar, why use the tag?). ‘site_name’—if I see the tag used, I’ll tell you. And ‘video’ (and ‘audio’) will add URLs to relevant resources.
What’s the image?
Can be anything you like. Logos are strangely absent in many cases—sites that push material prefer to push desired‐lifestyle images. That said, many huge websites decorate their information page links with logos.
Resolution Size
Recommended is 1200 × 630 landscape. Bear in mind the aspect ratio will be hacked to fit, so landscape images are best if they will crop to square, Nobody who seems serious about Open Graph data uses square images (if you must, 1200 × 1200). Logos may be more bold with clear space—Apple’s logo image is about 1/3 high: 206px
File Size
Less than 5MB (Twitter advice). Which is huge (medium quality photo is 2MB). I’ve found 350kB, even 500kB. However, I have a little evidence that larger weight images may take longer to appear. When it doesn’t reduce image quality, I’d keep the weight down
Format
Almost always JPEG. Apple use PNG (but for small logos, so filesize is small). But usually high quality JPEG. Point is, these images will be hacked and cached by the social media platforms. As long as they are less than 5MB (Twitter advice) they will be processed. But you should provide large resolution and colour images for high‐definition/large size re‐formats (that’s why the recommended dimensions are relatively large)
A little more about size. Marketeers seem keen to push for the largest image. Fact is, as found on web, several huge websites—StackOverflow, Apple, The New York Times—use smaller square images. These are used on information pages, and are usually logo‐decoration.
How long does cache last?
If the URL is indexed in search‐engines and, maybe, the previous image was known, cache will update remarkably fast. I’ve noted a change after 12 hours.
For unknown URLs, I don’t know. And will likely vary by platform. I’ll tell you if I find info.
A manual reset is sometimes available, but the action depends on the platform. There are web posts on this issue. If you have a developer logon, FaceBook developer pages have a reset button.
Refs
Article on sizing. The way I would do it,
Facebook Open Graph Meta Tags data,
https://developers.facebook.com/docs/sharing/webmasters#markup
Facebook on Open Graph best practices,
https://developers.facebook.com/docs/sharing/best-practices#tags
Article on Facebook’s Open Graph Meta Tags,