Flutter web search engine SEO optimization friendly

original

https://medium.com/mindful-engineering/flutter-web-seo-friendly-317528c29cc6

refer to

https://pub.dev/packages/seo_renderer

text

Currently, Flutter will become a popular trend when developing mobile and web applications. We all know that the desktop version is in beta testing and is being eliminated in the stable version of Flutter web. We all know that when the Internet appears in pictures, the target audience will be much larger (worldwide). Our website cannot be easily reached by users as long as they enter and search into a search engine, and we get the results. When a website is built for businesses and others, indexing is very important.

When we want to recommend users to choose our application by increasing the search index, search engine optimization is the most important.

Is it possible to optimize the web search engine with Flutter?

This question came to my mind before or after developing the web application. Better SEO support for web applications is the goal of the next version of Flutter developers.

Here is the result of making my website SEO friendly

before:

Later:

Search Engine Optimization

Search engine optimization Search engine is a process that can improve the quality and quantity of website traffic, so that the website or webpage gets traffic from search engines. The goal of search engine optimization is free traffic, not direct traffic or paid traffic.

What is seo friendly?

Building a SEO-friendly website means that Google and other search engines can efficiently crawl every page on the website, effectively interpret the content, and index it into the database. Once indexed, they can provide users with the most relevant and valuable web pages based on the topics they search.

The steps I followed to make the site SEO friendly

The length of the title should be at least 207 characters
A minimum description length of 690 characters would be beneficial
Need to add keywords meta in index.html (the keywords should be correct according to the content of the page, and at least 10 keywords need to be added for a good archive of SEO)
Need to add a mobile optimized view
Pack each text, image, link* **\_seo_render Thank God*** The package will help make the site SEO friendly. It is used to render text, links, and image widgets as HTML elements for SEO purposes. (Still under development)\_
Semantic gadgets can also help make websites seo friendly

Meta tags for seo

Open chart label

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 attributes available in the meta tag, you can find here

Use the seo rendering library to render text widgets as HTML elements

First, we need to add a RouteObserver to automatically delete the Html element MaterialApp

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

Add this dependency to pubspec.yaml

pubspec.yaml

Pick up package from Pub

flutter packages get

All text, pictures and links should be distorted like this

home_page.dart

Just pass your Text / RichText gadget and an option RenderController() can be used to refresh the content (position) in case of scrollable content/change position
Need to pass child : Widget , anchorText : String , link : String & optional RenderConroller()
Need to pass child : Widget , link : String , alt : String & optional RenderConroller()

Semantics

This widget uses the meaning description of the widget to annotate the widget tree.

Accessibility tools, search engines, and other semantic analysis software use it to determine the meaning of an application.

This semantics will provide information for accessibility services in a mobile environment.

Semantics When you only want to describe a specific widget
MergeSemantics When you want to describe a group of components. In this example, different Semantics Semantics defined in this sub-tree nodes One SINGLE Semantics a single semantic . This may be very useful to regroup the semantics, but in the case of semantic conflicts, the result may be absurd

Semantic attributes:

There are many attributes available in semantics, such as,

label : It provides a text description of a widget, which is basic semantic information
container : Whether this node introduces a new semantic node (SemanticsNode) in the semantic tree. It cannot be separated or merged with upper-level semantics, that is, independent semantics
explicitChildNodes : The default value is false, indicating whether to force the display of semantic information of child widgets. Split semantics
scopesRoute : If it is not empty, the subtree should declare the route name regardless of whether the node corresponds to the root of the subtree. Usually explicitChildNodes set it to true, and use it in the route jump, such as Page jumps , Dialog , BottomSheet , PopupMenu pop-up part

Some properties of semantics are shown here,

semantics_demo.dart

If you want to debug the semantics of the application, you can set the showSemanticsDebugger property of MaterialApp to true. This will force Flutter to generate a semantic tree covering the visualization.