This section contains information about how to customise the metadata of the website including favicons, logo, title and description, open graph images (images for social media) and Twitter, so that it matches your brand.
Favicon
You can create a favicon by using an online tool like favicon.io to convert it from .png
to .ico
.
Inside the codebase, go to the app
folder and replace the icon.ico
file with a new favicon.
Title and Description
Inside the codebase, go to the seo.config.ts
file.
You will see a metadata object. This is where we can customise the metadata of the website.
Open Graph Images (Social Media)
Inside the codebase, go to the app
folder and replace the opengraph-image.jpg
and opengraph-image.alt.txt
file with a new open graph image and alt text.
Go to the seo.config.ts
file and replace the existing ogImage.url
with a new open graph image.
It’s recommended to use a size of 1200x630
for the Open Graph and Twitter images.
Twitter Graph Image
The Twitter Graph Image will use the existing opengraph-image.jpg
file. If that’s not desired then:
app
folder and replace the twitter-image.jpg
and twitter-image.alt.txt
file with a new Twitter image and alt text.You can use a tool like Opengraph to check if all open graph images, metadata, etc. have been added / updated.
If the title, description or open graph images have been updated, but the changes are not showing up, please check the following:
This section contains information about how to customise the metadata of the website including favicons, logo, title and description, open graph images (images for social media) and Twitter, so that it matches your brand.
Favicon
You can create a favicon by using an online tool like favicon.io to convert it from .png
to .ico
.
Inside the codebase, go to the app
folder and replace the icon.ico
file with a new favicon.
Title and Description
Inside the codebase, go to the seo.config.ts
file.
You will see a metadata object. This is where we can customise the metadata of the website.
Open Graph Images (Social Media)
Inside the codebase, go to the app
folder and replace the opengraph-image.jpg
and opengraph-image.alt.txt
file with a new open graph image and alt text.
Go to the seo.config.ts
file and replace the existing ogImage.url
with a new open graph image.
It’s recommended to use a size of 1200x630
for the Open Graph and Twitter images.
Twitter Graph Image
The Twitter Graph Image will use the existing opengraph-image.jpg
file. If that’s not desired then:
app
folder and replace the twitter-image.jpg
and twitter-image.alt.txt
file with a new Twitter image and alt text.You can use a tool like Opengraph to check if all open graph images, metadata, etc. have been added / updated.
If the title, description or open graph images have been updated, but the changes are not showing up, please check the following: