Menu / lists

[BenoitDuffez]

Often times the navigation menu is an HTML ol/ul with li.

My app has bottom tabs, I think it would make sense to advertise it as such for SEO / crawlers.

How about adding a TextTagStyle as li (with a boolean ordered to switch between ol and ul) so that we can output the list in the crawler DOM?

[krokyze]

👋

I may be wrong but I don't feel like it will add any value. From my understanding and what I'm reading here GoogleBot simply searches for <a href=""> links, so having them inside <ol/ul> or <p> tags doesn't make any difference.

[BenoitDuffez]

Alright, makes sense. Thanks.

Edit: I thought it could be used to show the site structure below the result entry on Google search:

• result 1
  • section a
  • section b
  • section c
• result 2
• result 3
• ...

[BenoitDuffez]

OK I'm reopening because you opened my eyes, my menu wasn't rendered as links in the DOM! This is catastrophic. I'm using a bottom navigation bar, which can't use Seo.links as the items is strongly typed (they must be BottomNavigationBarItem).

What would be your recommendation?

[krokyze]

OK I'm reopening because you opened my eyes, my menu wasn't rendered as links in the DOM! This is catastrophic. I'm using a bottom navigation bar, which can't use Seo.links as the items is strongly typed (they must be BottomNavigationBarItem).

What would be your recommendation?

Hey. As a quick solution you can do something like this:

return Stack(
  children: [
    Seo.link(
      anchor: anchor,
      href: href,
      child: const SizedBox(),
    ),
    Seo.link(
      anchor: anchor,
      href: href,
      child: const SizedBox(),
    ),
    Seo.link(
      anchor: anchor,
      href: href,
      child: const SizedBox(),
    ),
    BottomNavigationBar(items: items),
  ],
);

I'll think about how to make this usage bit cleaner.

[BenoitDuffez]

Well I initially thought it was a smart idea, but I'm not smart enough to implement it. I'm new to flutter so I'm not sure how to wrap the bottom nav bar:

return Scaffold(
      appBar: ColoredAppBar(title: title, hasIcon: true, actions: actions),
      body: navigator,
      bottomNavigationBar: BottomNavigationBar(
        items: bottomTabs,
        currentIndex: _getCurrentTabIndex(),
        selectedItemColor: Colors.tealAccent,
        onTap: _onBottomTabTapped,
      ),
    );

Should the stack wrap the scaffold? or the navigator in the scaffold body? or something else?

Thanks

[krokyze]

Well I initially thought it was a smart idea, but I'm not smart enough to implement it. I'm new to flutter so I'm not sure how to wrap the bottom nav bar:

return Scaffold(
      appBar: ColoredAppBar(title: title, hasIcon: true, actions: actions),
      body: navigator,
      bottomNavigationBar: BottomNavigationBar(
        items: bottomTabs,
        currentIndex: _getCurrentTabIndex(),
        selectedItemColor: Colors.tealAccent,
        onTap: _onBottomTabTapped,
      ),
    );

Should the stack wrap the scaffold? or the navigator in the scaffold body? or something else?

Thanks

The trick is that bottomNavigationBar: doesn't need to be a BottomNavigationBar typed class it can be whatever Widget.

So this should work:

return Scaffold(
    bottomNavigationBar: Stack(
      children: [
        Seo.link(
          anchor: anchor,
          href: href,
          child: const SizedBox(),
        ),
        Seo.link(
          anchor: anchor,
          href: href,
          child: const SizedBox(),
        ),
        Seo.link(
          anchor: anchor,
          href: href,
          child: const SizedBox(),
        ),
        BottomNavigationBar(
          items: bottomTabs,
          currentIndex: _getCurrentTabIndex(),
          selectedItemColor: Colors.tealAccent,
          onTap: _onBottomTabTapped,
        ),
      ],
    ),
);