There are a couple of sections in the JSON file, they are grouped as -
-
twitter: Twitter Card sharing- Link title, URL, and description
- Twitter-site owner of the account posting the link, card type, and creator (also your twitter handle)
- Placeholder enable flag, URL base, foreground & background colors, text, image width & height, and image type
- Link image URL, image width & height
- Link title, URL, and description
-
og: This is for all other non-twitter shares- Link title, URL, and description
- Site type and name
- Placeholder enable flag, URL base, foreground & background colors, text, image width & height, and image type
- Link image URL, image width & height
- Mime Image type
- Link title, URL, and description
{
"prefix": "og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#",
"twitter": { /* meta tag config data */ },
"og": { /* meta tag config data */ }
}
The JSON key values shown below are for testing purposes only.
Use this as your prefix attribute for the <head> tag when using Open Graph meta tags.
{
"prefix": "og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#",
#1 Twitter Card : Link title, URL, and description
title : This is displayed as the Twitter Card title. See Output Examples to see where it shows up.
url : The URL to the site or page that clicking the link will bring you to.
description : A brief description, shown under the title on the link.
"twitter": {
"title": "Page or Site Title(Twitter)",
"url": "http://www.webexperiment.info/tests/mdrender/test2.html",
"description": "A brief description of your page or site, but don't make it too long. About this long should be good.",
#2 Twitter-site owner of the account posting the link, card type, and creator (also your twitter handle)
site : @username for the website used in the card footer.
card : The card type, which will be one of “summary”, “summary_large_image”, “app”, or “player”.
creator : @username for the content creator / author.
"site": "@YourTwitterHandle",
"card": "summary_large_image",
"creator": "@YourTwitterHandle",
#3 Placeholder enable flag, URL base, foreground & background colors, text, image width & height, and image type
As an alternative to static images you can use placeholder images. There are a number of resources on the web but I chose Placeholder.com because it's very simple to use and it's free. The only catch has been with the on-image text.
use_ph : if true then the Placeholder image will be used
image_ph : This is the base URL for Placeholder, the code assembles the complete URL from this and the following pieces
bgcolor_ph : An RGB color but without the "#"
fgcolor_ph : An RGB color but without the "#"
text_ph : Some optional text to overlay onto the image
imagewidth_ph : Width of the image
imageheight_ph : Height of the image
imagetype_ph : Prefferred type, jpg, png, gif. Not optional for Placeholder images, this field also gets used in the og:image:type meta tag to build the image/???? string
"use_ph": false,
"image_ph": "http://via.placeholder.com/",
"bgcolor_ph": "381aff",
"fgcolor_ph": "6eff3d",
"text_ph": "some text goes RIGHT here",
"imagewidth_ph": "1556",
"imageheight_ph": "778",
"imagetype_ph": "jpg",
#4 Link image URL, image width & height
image : a URL to a static image, used if use_ph is false
imagewidth : image width
imageheight : image height
"image": "https://raw.githubusercontent.com/jxmot/markdown-render/master/assets/img/placeimg_1000_800_arch-01.jpg",
"imagewidth": "1000",
"imageheight": "800"
},
#1 Link title, URL, and description
Please see the Twitter Card section for details.
"og": {
"title": "Page or Site Title",
"url": "http://www.webexperiment.info/tests/mdrender/test2.html",
"description": "A brief description of your page or site, but don't make it too long. About this long should be good.",
#2 Open Graph Object Type
type : right now I'm only using website, there are a lot of others decribed in the Open Graph documentation
site_name : The name of the site which contains the resource linked to in url
"type": "website",
"site_name": "This is My Site",
#3 Placeholder enable flag, URL base, foreground & background colors, text, image width & height, and image type
See the Placeholder section above for the details.
"use_ph": false,
"image_ph": "http://via.placeholder.com/",
"bgcolor_ph": "403dff",
"fgcolor_ph": "000000",
"text_ph": "some OTHER text goes here",
"imagewidth_ph": "1200",
"imageheight_ph": "796",
"imagetype_ph": "jpg",
#4 Link image URL, image width & height
See the Link Image section above for the details.
"image": "https://raw.githubusercontent.com/jxmot/markdown-render/master/assets/img/placeimg_1000_800_tech-01.jpg",
"imagewidth": "1000",
"imageheight": "800",
#5 Mime Image type
This will indicate the type of image for Placeholder and static images.
"imagetype": "image/jpg"
}
}
The samples below were the results of the meta tags that were created with the configuration shown above. And as expected Twitter will display a different image than the others.
Twitter :
Facebook :
LinkedIn :
-
Referenced in this document -
oghead-example-test.json-- static image files, those images were obtained from PlaceIMG
-
Closely Related Files -
test.json- theogjsonfield in this file contains the path and file name to JSON file containing the Open Graph configuration as described in this document.head.php- renders the Open Graph meta tags, also renders additional<head>tag contents.index.php- includeshead.php
- The Open Graph protocol - documentation
- About Twitter Cards - documentation
- Card Validator - Twitter card validator
- Facebook A Guide to Sharing for Webmasters
- Social Debug - tests against Facebook, Twitter, Google+, and LinkedIn and "grades" the results.
- ApiLeap - a screenshot API, built on Chrome. There is a free plan that allows you up to 100 screen shots per month. You'll have to go to their site to sign up for an access key. There is also a web interface that you can try at no cost. And from what I've seen so far it works much better then a few others that I've tried.
What's been described here is only a small portion of the capabilities and use of Open Graph. I plan on exploring everything else Open Graph can do and I will update this document and it's associated application code as I learn more.
© 2018 Jim Motyl