Title of the page

[guplem]

It would be nice to be able to set up the <title> of the page, (probably using the same used as the one in the AppBar), wrapping it in a Seo.title() widget.

But instead of following the same approach that the seo.text() uses, (adding the HTML content in the body), it would be necessary to create the HTML <title> in the header.

[krokyze]

Hey.

I just released 0.0.2 version which does add support for meta tags so that answers your question here: https://github.com/flutter/flutter/issues/46789#issuecomment-1352642675

For <title> tag support I would recommend using SystemChrome.setApplicationSwitcherDescription which not only changes the title tag in html but updates the browser tab title too. Example here.

If you have any more questions feel free to reopen this issue 😉

[guplem]

I just released 0.0.2 version which does add support for meta tags so that answers your question here: flutter/flutter#46789 (comment)

It kind of does... However, I do still have a question: in the README you say that Twitter, Facebook, ... do not execute JS for the meta tags. Does it mean that meta_seo package is basically useless for those tags too (even tough they even have specific method for them)?

Also, checking your code, I see support for MetaPropertyTag apart from MetaNameTag. Are those basically useless unless Server-Side rendering is used?

To finish: I never understood why the meta name and meta property are usually separated meta elements. They can be set together like this:

<meta name="description"
    property="og:description"
    content="description about the content" />

So, in your implementation of the meta tags, wouldn't it make sense to use a single type of meta tag (like MetaFullTag)? Also, since the tags are strings (easy to mistype), I'd have used an enum approach. So, the resulting code would be something like:

Seo.meta(
  tags: [
    MetaFullTag(MetaTag.description, content: 'Flutter SEO Example'),
  ],
  child: ...,
); // converts to: <meta name="description" property="og:description" content="Flutter SEO Example">

It could even be "smart" and ignore the creation of the "property" for those tags that do not have (like keywords) and vice versa. However, I don't think there is any harm in having them all "duplicated" even if they are not used by anything.

[krokyze]

It kind of does... However, I do still have a question: in the README you say that Twitter, Facebook, ... do not execute JS for the meta tags. Does it mean that meta_seo package is basically useless for those tags too (even tough they even have specific method for them)?

Well I haven't used meta_seo package but by the looks of it the open graph support is useless.

---

Also, checking your code, I see support for MetaPropertyTag apart from MetaNameTag. Are those basically useless unless Server-Side rendering is used?

Good spot. Yep it's useless, I tested it out and forgot to remove. I'll do it in the next release.

---

To finish: I never understood why the meta name and meta property are usually separated meta elements. They can be set together like this:

<meta name="description"
  property="og:description"
  content="description about the content" />

Well I'm not really with huge experience in web development but I guess people do split them because meta tag doesn't have a way to support multiple property values.

For example these would be invalid:

<meta name="description" 
    property="og:description" 
    property="twitter:description" 
    content="Flutter SEO Example">

<meta name="description" 
    property="og:description,twitter:description"
    content="Flutter SEO Example">

So it's cleaner to write like this:

<meta name="description" content="Flutter SEO Example">
<meta property="og:description" content="Flutter SEO Example">
<meta property="twitter:description" content="Flutter SEO Example">

---

So, in your implementation of the meta tags, wouldn't it make sense to use a single type of meta tag (like MetaFullTag)? Also, since the tags are strings (easy to mistype), I'd have used an enum approach. So, the resulting code would be something like:

Seo.meta(
  tags: [
    MetaFullTag(MetaTag.description, content: 'Flutter SEO Example'),
  ],
  child: ...,
); // converts to: <meta name="description" property="og:description" content="Flutter SEO Example">

It could even be "smart" and ignore the creation of the "property" for those tags that do not have (like keywords) and vice versa. However, I don't think there is any harm in having them all "duplicated" even if they are not used by anything.

Well my goal is to keep the package flexible but simple. The reason why I'm against using an enum is that there's no full answer of all the possible options what can be inside the tag name. For example there's quite a lot names here https://gist.github.com/whitingx/3840905 and is it everything, I'm not sure. To be safe against mistype I advise to create a AppMeta and use it within the project.

FYI: I'm planning a bit of rework of the Seo.meta widget. I'll refactor it as Seo.head to support not only meta but link tags too.

[guplem]

Thanks for all the information. Everything makes sense now.

FYI: I'm planning a bit of rework of the Seo.meta widget. I'll refactor it as Seo.head to support not only meta but link tags too.

I wouldn't refactor the Seo.meta to Seo.head I would add a Seo.headLink instead. However, I haven't found any need for the link tags in the head... So, I don't know why it would be necessary to add them...

[guplem]

Yep it's useless, I tested it out and forgot to remove. I'll do it in the next release.

I was thinking about this we discussed… and I wouldn't remove MetaPropertyTag either. Probably it is useless, but who knows if it will never be useful for anything… Maybe it is used under the hood by ML models of search engines, other "scrapping sites", …

[krokyze]

I wouldn't refactor the Seo.meta to Seo.head I would add a Seo.headLink instead. However, I haven't found any need for the link tags in the head... So, I don't know why it would be necessary to add them...

Here you can view the upcoming changes https://github.com/krokyze/flutter_seo/pull/18. In my opinion having Seo.head(...) which supports multiple tags (like meta, link) keeps similar naming conventions as Web so potentially it will be easier to understand.

This is one of the reasons why I added link tag support: https://yoast.com/rel-canonical/

I was thinking about this we discussed… and I wouldn't remove MetaPropertyTag either. Probably it is useless, but who knows if it will never be useful for anything… Maybe it is used under the hood by ML models of search engines, other "scrapping sites", …

I wasn't able to find any other usages of property that wouldn't be open graph tag related, so I feel having it for now would be useless and potentially misleading for some that wouldn't read through the whole README.