5,332 reads

A Workaround to Flutter Web SEO Issue

by AspiiireJune 25th, 2021

Too Long; Didn't Read

A Workaround to Flutter Web SEO Issue: Use canvas tag for Web Flutter. The search engine has no way to understand how your content is made since it only understands textual content. The canvas tag is a tag used for drawing; it is a really powerful tag. It lets you achieve goals that otherwise are impossible - like complex animations, new ways of interacting with data, etc... ways that are not possible with the standard HTML, CSS, JS at all. The solution is to show a clone content of what's visible on your App in a way or another.

Companies Mentioned

featured image - A Workaround to Flutter Web SEO Issue

Flutter Web has a big problem.

You like Flutter, but then you know that Flutter is not well optimized and has some problems with SEO.

Check this out! I'll give a few tricks to solve this problem.

So what's the problem?

For Web Flutter, use the canvas tag! The canvas is a tag used for drawing; it is a really powerful tag. It lets you achieve goals that otherwise are impossible - like complex animations, new ways of interacting with data, etc... ways that are not possible with the standard HTML, CSS, JS at all.

So what's the problem? All seems good, right?

No bro! The problem is that the search engine has no way to understand how your content is made since it only understands textual content.

No Flutter?

Flutter is a great SDK. It saves you a ton of time, so I don't see why you should use it anymore, I mean, yes, it has this problem, but we can find some workaround to this issue.

Before they solve this problem (it may take a lot of time), let me tell you a workaround.

The Workaround

I would say that when you want to develop for the web, you should take into consideration the project that you want to create!

If you want to create an article-based website like priiimo.com, then you can split your website into 2 parts - the part that will show the articles to serve it with Node, PHP, or other ways, and the hidden part that needs the authorization to do it with Flutter. All the complex part that, for example, contains the management of users, analytics, etc.

What do you think? I'll give you another Idea. For example, you use Flutter to create a sort of CMS that will generate HTML pages.

In this way, your content will be visible by search engines without problems.

Don't Clone

You have to be careful when serving content to search engines. One solution that you probably had in your mind was to show a clone content of what's visible on your App in a way or another.

BUT...

This MAY violate Google's guidelines. If you are targeting this one; It is called Cloaking.