Flutter Web – Meta Data below website name

Issue

Hey there,

how is it possible in Flutter to add “metadata” to a website (Green and red lines on the picture)? Probably the name metadata isn’t correct, sorry for that.
I already tried modifying the

<meta name="description" content="some content...">

in the index.html, but am not sure if this is the right way doing it.

Do you have any suggestions how to do this?

Example Image

Solution

In HTML, there are at least two tags which allow you to control how your website appears in search results.

The first one is the title tag of your page. This title will of course appear in your browser tab, but it will also appear in the search results. Make sure to use an accurate title which reflects the content of your page. The <title> tags should be placed inside de <head> tags of your HTML code.

The second one is the meta description tag, which will show the user a short description of the content. This is the part marked with a green line in your question. The <meta> tag also goes in the head tags of your HTML code, usually just after the <title> tag.

Example of the mentioned tags with correct syntax:

<head>
  <title>Stack Overflow - Where Developers Learn, Share, & Build Careers</title>
  <meta name="description" content="A public platform building the definitive collection of coding questions & answers..."/>
</head>

The part marked with a red line in your question, is what we call sitelinks. They are generated automatically and depend of your website’s navigation, the titles and headers you used, etc. This may sound obvious, but you should use different titles and descriptions for each individual page.

The way sitelinks are generated and how you can improve them is very well explained on Google’s page about sitelinks.

Answered By – Thomas L.

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.