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.

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

docs.config.js

theme.config.tsx

package.json

Note: You may be wondering why we use og.png.tsx instead of og.tsx as the filename. We use og.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

docs.config.js

theme.config.tsx

package.json

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.

Docs Config Analytics

SEO