How to deal with SEO for CustomPainted text and content accessed from navigation?

[colbymaloy]

Luckily I have my exact project for this discussion here : https://app.theforestmap.app/

I was able to make a basic landing page in webflow to get ranking on Google homepage with theforestmap.app, however, when actually using the web app, im not certain how to make sure my actual content gets indexed, i think MOSTLY because i dont know how a robot/crawler works and what it can do to interact with my app.

You can click the link to check it out yourself otherwise ill use images to describe my problem.

Home page i think is pretty easy to solve. Just use the Seo image to add the desired alt text

main problem is on the map view after the user picks a game.

im using named routes so the url will change to https://app.theforestmap.app/#/game/sotf (maybe i need to figure out how to remove the # too but a separate problem)

My interactive map uses a CustomPainter to paint the items on the map for performance reasons, its not practical to render 200 Widgets in an InteractiveViewer, so i use a single CustomPaint to paint the 200 items. Visual Example:

the user has to tap one of these items to get to the ContentView, in which i can then use the SEO widgets again since they are widgets, again url changes to https://app.theforestmap.app/#/item/$itemID

Can the crawler tap on an item? whats the proper way to ensure these items get the proper SEO treatment? please help, this will be a gamechanger for me and google rankings.

[krokyze]

Hey.

I was able to make a basic landing page in webflow to get ranking on Google homepage with theforestmap.app, however, when actually using the web app, im not certain how to make sure my actual content gets indexed, i think MOSTLY because i dont know how a robot/crawler works and what it can do to interact with my app.

First and foremost, robots will only analyze the HTML content and will not interact with or see anything rendered by Flutter.

Home page i think is pretty easy to solve. Just use the Seo image to add the desired alt text

Both images should be wrapped within Seo.link(child: Seo.image(child: ...)), ensuring that bots can recognize the URLs these buttons lead to.

im using named routes so the url will change to https://app.theforestmap.app/#/game/sotf (maybe i need to figure out how to remove the # too but a separate problem)

As mentioned in the Getting Started:

Use usePathUrlStrategy() to ensure that Google recognizes each URL as a distinct page. Failure to do so may result in Google perceiving all URLs as the same page. For additional details, refer to this video.

void main() {
  usePathUrlStrategy();
  runApp(App());
}

My interactive map uses a CustomPainter to paint the items on the map for performance reasons, its not practical to render 200 Widgets in an InteractiveViewer, so i use a single CustomPaint to paint the 200 items. Visual Example:

the user has to tap one of these items to get to the ContentView, in which i can then use the SEO widgets again since they are widgets, again url changes to https://app.theforestmap.app/#/item/$itemID

Can the crawler tap on an item? whats the proper way to ensure these items get the proper SEO treatment? please help, this will be a gamechanger for me and google rankings.

This is a bit of a gray area. The first thing I noticed is that when I open the map, even after it’s already drawn, it still takes a few seconds to load the content. While I can’t guarantee it, I don't think that bots will wait for the spinner to finish.

What you can try doing is, after all content is loaded, still using the Seo.link, Seo.image, and Seo.text widgets below the map, similar to how I recommended here: comment.

While I haven’t explicitly mentioned it in the README, this project is more suited for static websites.