Hi, in this post I will talk a bit about HTML Meta Tag and how we can setup custom tags in Power Apps Portals <head> element.
For the purpose of this post, I will create a custom Open Graph Meta Tag to be used in Facebook/Twitter.
What are Meta Tags?
The <meta> tag is used to define metadata about the HTML document. This is commonly used by search engines, browser and other web services.
This tag is never displayed on the page and is an empty element, so there is never a closing tag like </meta>.
Open Graph protocol
Open Graph protocol was introduced by Facebook to enable any page becoming a rich object in a social graph – in simpler words, to display your website in a prettier way when sharing via social media. Today several other social medias and web services use this protocol, such as Twitter/Google+ etc.
By opening Facebook and add the Bing URL, this is the structure we can see on the post:
If we open bing.com and inspect the page, we can actually see the og meta tags defined on the page:
If we simply try to share an OOB Power Apps Portals via Facebook, this is how it would be presented:
Adding Meta Tag to Power Apps Portals
At first it might look tricky to make this change in Power Apps Portals, but it is actually easier than it looks. Power Apps Portals are full of hidden content snippets, not all are documented. One of them is called Head/Bottom and we can use it exactly to perform changes in the <head> element of the Portals website.
If you can’t find this content snippet in your CDS environment, all you have to do is create the record, set it to HTML type and define the tags in the HTML tab of your snippet.
In my example I am adding an image (created via Web File), description and title:
For my image, I tried initially leaving only the relative path (/og-image.png), but it didn’t work, so I had to change to the full image path (https://<portalurl>/og-image.png).
If we now try to share on Facebook, for example, this is how it looks:
By inspecting the Portals website, we can see the tags at the end of the <head> element:
Caching issues
While testing this, one thing I noticed is that Facebook might cache some data on their side, so you are changing the tags on the Portals, just note that it might take a while to replicate on Facebook.
Conclusion
Meta tags are a simple but effective way to give an insight into what your website is about. Give it a try and see what you think!
Oliver Rodrigues 
Life saver!
LikeLike
Very interesting subject , regards for putting up.
LikeLike