Posting a web page content to Facebook - Open Graph Protocol - how to use it with Blocs


#1

We live in the time of social networks. When you share on Facebook the content of your newly created web page, you would expect of weird or random results… Why? All of that because of Facebook Open Graph protocol. So if you want to avoid this unexpected Facebook behavior, you should care of placing on web page those new meta tags created by Facebook tream. Examples of all of those tags can be found on http://ogp.me. In short: 1. which of them would be helpful and 2. how to put them to your Blocs app project?

  1. og:title - can be used as a title of a web page, og:url - can be used as the url of a web page, og:description - can be used as short description (common or for single web page), og:image - complete url address of the image displayed as the facebook post image, should be minimum size in pixels 600x315 if you prefer this image to be displayed on entire width of the facebook timeline or less if you want to display only a small image or logo on left side of the text.

Those four is enough to properly display a post on facebook containing a content from the web page. If you want to know more, about eg. video and other stuff, read the content on the http://ogp.me. There can be found other examples and complete description of those meta tags.

  1. Those meta tags can be used in your Blocs project using the Page Settings -> Add Code window.
    Simply write necessary tags and paste them to Head Code field in mentioned window, one meta tag per line:

26 pm
Access to Page Settings

43 pm
Click the Add Code button

19 pm
Paste the meta tags to this field.


#2

I hope that Blocs will soon contain a bric that allows us to input data for each category, so it is hidden inside the page coding, but picked up by Facebook and Twitter. I also feel we need something similar to add structured data to our pages for better search rankings. This is an area where I feel Blocs needs to make some progress.


#3

Can you explain it more detailed?


#4

In Rapidweaver there is a stack called SEO helper, which contains various options for Twitter Card, Facebook OpenGraph and structured meta data.

Under the Facebook section you have property types, such as type, title, image, url, OpenGraph description and site name. You simply fill in the details beside each option and it’s added automatically on the page.

For the Twitter card you can specify the card type, twitter site, title, description and image.

For structured data there are all kinds of options, such as type and url, which are linked to your various social media accounts and once again you just type them in.

When you type in a url on Twitter or Facebook your chosen description, title and image all appear automatically.

Structured data can also be used for businesses to add details like opening hours, product type, location, phone number and other details. A lot of the top ranking sites all use structured data and I would like to see a radical overhaul in what is possible with Blocs for SEO purposes, because a website is only useful if it has a high search ranking and all of this could be done with specific brics I imagine.


#5

Might Find some other useful info here facebook developers:
https://developers.facebook.com/docs/sharing/opengraph

The Facebook debugging tool:
https://developers.facebook.com/tools/debug/sharing/
On this screen, you can preview what a Facebook share would look like. You can also get FB to re-scrape(refresh what they have cached) your URL.
2018-01-12_14-41-39

And a simple general article on FB OG

For Twitter cards:
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started