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! ;;<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://<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>
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/).
