Making Flutter Web Apps SEO friendly

Nowadays flutter is going to be popular for developing applications for Mobile and Web. We all know the desktop version is in beta and flutter 2.0 knocked with the stable version of Flutter web. We all know that when the web comes into the picture, then the targeted audience is much larger (worldwide). Our website cannot be easily reached where users just type and search it into a search engine and we get the result. Index matters when the website is for businesses and others.

SEO is a top priority when we want to suggest the audience choose our app by increase the index of the search.

Photo by Merakist on Unsplash

Is SEO possible with flutter web?

Such a question comes to mind before or after developing the web app for flutter. Better SEO support for a web app is the target for the next release by the Flutter developers.

Here is the result of my website after making it SEO friendly

Before :

After :

SEO

Search engine optimization is the process of improving the quality and quantity of website traffic to a website or a web page from search engines. SEO targets unpaid traffic rather than direct traffic or paid traffic.

What is SEO-friendly?

Making a website SEO-friendly means that Google and other search engines can crawl each page on the website efficiently, interpret the content effectively, and index it in their database. Once indexed, they can then serve the most relevant and valuable web pages to their users based on the topics they search for.

Steps I followed for making website SEO friendly

• The title length should be a minimum of 207 characters.
• Description length of a minimum of 690 characters will be beneficial.
• Need to add keywords meta in index.html (Keyword should be proper as per the content of the page and need to add minimum 10 keywords to archive good SEO).
• Need to add a viewpoint for mobile optimization.
• Wrapping every text, image, link with the seo_render package will be helpful for making the website SEO friendly. It is used to render text, links, images widgets as HTML elements for SEO purposes. (still, it’s under development).
• Semantics widget can also help for making website SEO-Friendly.

Meta Tags for SEO-Friendly

The Open Graph Tags

og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
og:image - An image URL which should represent your object within the graph.
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/".

There are many properties available in meta tags. You can find here

Using seo_render library for render text widgets as HTML elements

• First, we need to add a RouteObserver to automatically remove Html Elements when popped from the Navigation Stack. To do this simply add this line in MaterialApp

navigatorObservers: <RouteObserver<ModalRoute<void>>[routeObserver],

• Add this dependency to your pubspec.yaml

pubspec.yaml

• Get the package from Pub

flutter packages get

• All Text, Images, and Link should be warped like this

home_page.dart

• TextRenderer Just pass your Text/RichText Widget and an option RenderController() that can be used to refresh the content(position) in case of Scrollable Content/ Changed Position.
• LinkRenderer Need to pass child : Widget, anchorText : String, link : String & an optional RenderConroller()
• ImageRenderer Need to pass child : Widget, link : String, alt : String & an optional RenderConroller()

Semantics

This widget annotates the widget tree with a description of the meaning of the widgets.

It is used by accessibility tools, search engines, and other semantic analysis software to determine the meaning of the application.

This semantics will provide information to accessibility services in mobile.

• Semantics when you want to describe only 1 particular Widget
• MergeSemantics when you want to describe a group of Widgets. In this case, the different Semantics which will be defined in the sub-tree of this node will be merged into one single Semantics. This could be very useful to regroup semantics, however, in case of conflicting semantics, the result may be nonsensical.

Attributes of Semantics :

There are many attributes available in semantics like,

• label: It provides a text description of the Widget. It is the basic semantic information.
• container: Whether this node introduces a new semantic node (SemanticsNode) in the semantic tree. It can not be separated or merged by upper layer semantics, that is, independent.
• explicitChildNodes: The default is false, indicating whether to force the display of the semantic information of the child widget. It can be understood as split semantics.
• scopesRoute: If it is not empty, whether the node corresponds to the root of the subtree, the subtree should declare the route name. Usually withexplicitChildNodesSet it to true together, and use it in routing jumps, such as Page jumps,Dialog, BottomSheet, PopupMenuThe pop-up part.

Here is shown some attributes of semantics,

semantics_demo.dart

If you want to debug the Semantics of your application, you may set the showSemanticsDebugger property of your MaterialApp to true. This will force Flutter to generate an overlay to visualize the Semantics tree.

seo_renderer | Flutter Package

Semantics: https://youtu.be/NvtMt_DtFrQ

By following these steps you can make flutter web SEO Friendly. Still, there are many things that can make a website SEO-friendly. These steps can’t make increase the SEO of flutter web but they can make our website SEO-Friendly.

👏👏👏 Claps if this blog helps you and Keep Fluttering.

Source Giphy