Support us by giving us a
star on Github 🚀

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!	 		;;<hl>
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!	 		;;<hl>
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:///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>
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](https://github.com/fastn-stack/fastn/) and join our fastn community on [Discord](/discord/).

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!
[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!
[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) 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 - fastn.com