1
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 theicon.ico
file with a new favicon.
2
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.
3
Open Graph Images (Social Media)
-
Inside the codebase, go to the
app
folder and replace theopengraph-image.jpg
andopengraph-image.alt.txt
file with a new open graph image and alt text. -
Go to the
seo.config.ts
file and replace the existingogImage.url
with a new open graph image.
It’s recommended to use a size of
1200x630
for the Open Graph and Twitter images.4
Twitter Graph Image
The Twitter Graph Image will use the existing
opengraph-image.jpg
file. If that’s not desired then:- Inside the codebase, go to the
app
folder and replace thetwitter-image.jpg
andtwitter-image.alt.txt
file with a new Twitter image and alt text.
Troubleshooting
You can use a tool like Opengraph to check if all open graph
images, metadata, etc. have been added / updated.
- Check if the file names are correct
- Clear the cache inside the hosting provider where the project is hosted, e.g. AWS, Digital Ocean, etc.