SEO
To simplify Nextra SEO / Open Graph configuration, Aptos Nextra projects use the
docs.config.js
file for many core Open Graph functionalities.
Dynamic Open Graph Images
The Aptos Docs template takes advantage of Next.js’ dynamic opengraph images using the edge runtime to ensure low-latency SEO cards and no cold-starts.
![Dynamic Image](https://aptos.dev/api/og.png?title=Dynamic%20Image)
The Open Graph Images are generated dynamically at runtime from React
components, and served as a png image.
This is how we are able to include things like the title of the page in the SEO card.
For more details, checkout /pages/api/og.png.tsx
.
- _meta.ts
- _app.tsx
Note: You may be wondering why we use
og.png.tsx
instead ofog.tsx
as the filename. We useog.png.tsx
because after testing it extensively, we learned that Twitter renders opengraph images if their URLs end with the file extension.
Testing
You can always check the opengraph image by navigating to /api/og.png
.
(e.g., http://localhost:3000/api/og.png
)
Favicon
- favicon.ico
For other assets located in public/favicon
, you may want to customize the
website icon. You can do so easily by doing the following:
Generate Favicon
Navigate to https://favicon.io/favicon-converter/.
Upload an svg
file with the logo you’d like to generate your favicon for.
Copy assets into public/favicon
After generating the assets, favicon.ico should return a zip file containing
android-chrome-192x192.png
favicon.ico
- …so on and so forth
Copy all of these and replace the existing files in public/favicon
Deploy
Customizing Open Graph
To customize the Open Graph configuration, see theme.config.tsx
.