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?
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.
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:
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.
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 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.
I’m rather dumbfounded by this. I was able to find an “Action” for SoftPress Freeway to add the appropriate code into the HTML tag, which is this code:
<html prefix="og: <http://ogp.me/ns#">>
But even now in Feb. 2020 there appears no way to achieve that in Blocs. Why?
I care about this because I want to post links to individual pages in my website and have a predetermined photo appear as the thumbnail in FaceBook. It really is that simple. And the means to do that is simple too. I just need to add the aforementioned Open Graph code in either the HTML or HEAD tags, and then I need add other OG code to link to the pic I want FaceBook to display (which is something I actually can do in Blocs right now).
You’d think the importance of social media would have been recognized by now such that Open Graph code insertion would have made its way into Blocs.
Sure I can hand-hack the HTML Blocs exports, but that is highly undesirable. I don’t want to hand-hack page code every single time I export from Blocs.
Has anyone come up with a Blocs hack to achieve this?
I built a Bric last year for Open Graph and it injected the og tags into the header, and could pull from the existing SEO info you had on your page settings… BUT! FB was being a dork in the way it read the page, that it would not pick them up even though they were in the HTML, something to do with being added with Javascript.
So I have semi-abandoned it, hopefully Blocs 4 will see OpenGraph added. (hey @Norm) I don’t expect to see it in a point release.
If I come across an actual solution I will revisit, in the mean time, I just stick with copy and pasting the OG tags into the header manually.
