I am thinking of developing an e-commerce app on flutter web, using Navigator 2.0, maybe beamer.
I would like people to be able to share flutter web links and show previews on social networks. Is this possible?
Just to clarify: I am not looking to show previews of other sites on my web app. I would like to show the preview of my flutter web app links on a social network. Is that possible?
Meta tags are part of the html file that being served as response to the "meta tags preview parser", Flutter serves static html file (index.html) and dynamic js along with it,
If you want to include only metadata response for all requests, then you can just modify the index.html file under your web source code.
but if you need to make a dynamic metadata based on the page the user on, you need to serve dynamic html page for each request, like below.
And from what I have tried, I wasn't able to do it from flutter side, but I had to modify the html response per request, checkout this article: https://almog.io/blog/dynamic-open-graph-meta-tags-flutter-web.
also I have included part of my code (its hosted over firebase hosting):
exports.dynamicMetaTagsUpdate = functions.https.onRequest(async (request, response) => {
let html = fs.readFileSync("./index.html", "utf8");
let id = request.path.split("/").pop()
try {
let metaStart = html.indexOf("<!-- META TAGS START-->")
let metaEnd = html.indexOf("META END")
let start = html.substring(0, metaStart);
let injected = await getMetatags(id);
let end = html.substring(metaEnd, html.length);
return response.send(start + injected + end);
} catch (e) {
console.log(e);
return response.send(html);
}
});
The js function getMetatags(id) is a function that returns a string of meta set that I need to include into the response html, for example:
<meta property="og:type" content="website">
<meta property="og:title" content="${author}">
<meta property="og:description" content="${description}">
<meta property="og:image" content="${image}">
In result the html response will look something like this:
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="app name">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- META TAGS START-->
<title>app name</title>
<meta name="description"
content="1234 56789 0123">
<!-- Google / Search Engine Tags -->
<meta itemprop="name" content="app name">
<meta itemprop="description"
content="1234 56789 0123">
<meta itemprop="image"
content="https://website.com/image.jpeg">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://website.com">
<meta property="og:type" content="website">
<meta property="og:title" content="app name">
<meta property="og:description"
content="1234 56789 0123">
<meta property="og:image"
content="https://website.com/image.jpeg">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="app name">
<meta name="twitter:description"
content="1234 56789 0123">
<meta name="twitter:image"
content="https://website.com/image.jpeg">
<!-- META TAGS END-->
<link rel="icon" type="image/png" href="favicon.png"/>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = '4168871932';
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function (ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function (engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function (appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>