Learn full-stack web development using fastn in a week
Learn Now

Add meta-data to doc-site

In this video we will see how to implement SEO features to improve a website's visibility.

What is SEO

SEO is the practice of improving a website's visibility and ranking in search engine results pages.

It involves optimizing various aspects of a website to make it more appealing to search engines and users.

Benefits of SEO

SEO encompasses a range of techniques that helps in the following ways:

  • Increased organic traffic: SEO helps improve your website's visibility, leading to higher organic traffic from search engines.

  • Better user experience: SEO involves optimizing website elements that enhance user experience, such as page speed, mobile-friendliness, and easy navigation.

  • Enhanced credibility and trust: Higher search engine rankings instill confidence and trust in users, as they often perceive top-ranked websites as more reputable.

  • Cost-effective: SEO is a long-term strategy that yields sustainable results without requiring continuous investment in paid advertising.

SEO through the page component of doc-site

We can do SEO in the doc-site, by giving some properties to the page component.

The three properties are:
  • document-title
  • document-description
  • document-image

How to customize document title

Before we modify the document title by using the first property, we will see that by default, the page component's title, becomes the document title.
So in the browser, the document title will be the same.
document title same as page title
-- ds.page: This is page title

When we add the document-title property, the page title can have custom title, which is better for SEO.

The custom title given in this property is added as the meta-data into the tags og-title and twitter-title as well as the <title> tag.
custom document title
-- ds.page: This is page title
document-title: Welcome!	 		
And if you notice, there is no meta-data for description or image.

How to add page description

Therefore, title is one way to do SEO. Now we will add the second property document-description and give a short and eye-catching description then this description will be added as meta-data in the tags called og-description as well twitter-description, and in the description tag.
to give a social media description
-- ds.page: This is page title
document-title: Welcome!
document-description: Learn how to do SEO!	 		;;<hl>

How to add page document-image

Similarly, we can give a specific image that we want the users to see when the URL is shared on social media platforms.

For the same, in the page component of the doc-site, we add another property called document-image.

The image provided to this property will be added as the meta-data.

You can give any link of an image.

Or, if you want to add the image which is in your package, then in that case, give the https://<package-name>/path to the image with extension.

So it goes like this:
to give a social media image
-- ds.page: This is page title
document-title: Welcome!
document-description: Learn how to do SEO!
document-image: https://gargajit.github.io/optimization/images/seo-meta.png 			;;<hl>
Now, if we publish this package and share the URL on social media it will take the custom title, description, and image.


This way we have used the SEO technique and managed to make the URL noticeable and meaningful and will also improve the ranking in the search results.

Thank you guys, keep watching these videos to learn more about fastn.

Support us by giving a star ⭐ on GitHub and join our fastn community on Discord.
Copyright © 2023 - fastn.com