Overview
Design
Frontend
Fullstack
Create Website
Blog
Create Website
Create Website
->
Add meta-data
Create Website
Featured Components
Deploy
Install
On Windows
On MacOS/Linux
Hello World
Basic UI
Publish a package
Understanding sitemap
Create clean URLs
Create rounded border
Using images in documents
Add meta-data
Markdown in doc-site
Redirects

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
Lang:
ftd

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!
Lang:
ftd
Output:
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!
Lang:
ftd
Output:

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
Lang:
ftd
Output:
Now, if we publish this package and share the URL on social media it will take the custom title, description, and image.

Example

Discord:
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.

Support fastn!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!
⭐️

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!
💻️

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Join us

We welcome you to join our Discord community today.

We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.
Copyright © 2023 - FifthTry.com