Branding
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 theicon.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 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.
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.
If the title, description or open graph images have been updated, but the changes are not showing up, please check the following:
- 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.