fastn SEO helps to boost your search engine optimization with its buit-in ftd.document features.
Add meta-data to doc-site
In this video we will see how to implement SEO features to improve a website’s visibility.
Video Title:
How to add meta-data for better website optimization
Owner:
Ajit
Audience:
Website Builders
Goal:
Helps learners to optimize their websites
Introduction
Welcome!! My name is Ajit
In this video, we will see how to implement SEO features to improve a website’s visibility.
Before that, we will briefly learn,
what is SEO
why it’s important for website creators
along with its benefits, and
how to use it to optimize your website
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 helps improve your website’s visibility, hence leading to higher organic i.e. non-paid traffic from search engines.
SEO involves optimizing website elements that enhance user experience, such as page speed, mobile-friendliness, and easy navigation
Higher search engine rankings instill confidence and trust in users
SEO is a long-term strategy that yields sustainable results without requiring continuous investment in paid advertising.
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.
To read about SEO in detail, you can check out the blog. The URL is shared in description
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 the title of the component page is this.
So in the browser, the document title will be the same.
As you can see, the document title is by default is same as the title of the page component.
If we inspect, the header of the html code, we can see the title by default takes the page title.
document title same as page title
null
-- 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
null
-- 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.
Let’s verify the same by refreshing the browser.
to give a social media description
null
-- 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
null
-- 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.
Closing Remarks
Thank you guys, keep watching these videos to learn more about fastn. Checkout the fastn website.
Support us by clicking on this link and give us a star ⭐ on GitHub and join our fastn community on Discord.
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.
fastn SEO helps to boost your search engine optimization with its buit-in ftd.document features.
Add meta-data to doc-site
In this video we will see how to implement SEO features to improve a website’s visibility.
Video Title:
How to add meta-data for better website optimization
Owner:
Ajit
Audience:
Website Builders
Goal:
Helps learners to optimize their websites
Introduction
Welcome!! My name is Ajit
In this video, we will see how to implement SEO features to improve a website’s visibility.
Before that, we will briefly learn,
what is SEO
why it’s important for website creators
along with its benefits, and
how to use it to optimize your website
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 helps improve your website’s visibility, hence leading to higher organic i.e. non-paid traffic from search engines.
SEO involves optimizing website elements that enhance user experience, such as page speed, mobile-friendliness, and easy navigation
Higher search engine rankings instill confidence and trust in users
SEO is a long-term strategy that yields sustainable results without requiring continuous investment in paid advertising.
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.
To read about SEO in detail, you can check out the blog. The URL is shared in description
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 the title of the component page is this.
So in the browser, the document title will be the same.
As you can see, the document title is by default is same as the title of the page component.
If we inspect, the header of the html code, we can see the title by default takes the page title.
document title same as page title
null
-- 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
null
-- 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.
Let’s verify the same by refreshing the browser.
to give a social media description
null
-- 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
null
-- 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.
Closing Remarks
Thank you guys, keep watching these videos to learn more about fastn. Checkout the fastn website.
Support us by clicking on this link and give us a star ⭐ on GitHub and join our fastn community on Discord.
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.
