SEO and social images

Every template page has a unique title, a meta description, Open Graph and Twitter tags, a theme colour and a favicon. Update them with your own wording before you launch.

Titles and descriptions#

• HTML: each page's <head> has a <title>, <meta name="description"> and og: tags. Edit them in every file.
• Next.js: each page.tsx exports metadata (or uses the template's small metadata helper). Shared values such as the site name live in src/app/layout.tsx or a site config file the template's guide points to.

Write titles under about 60 characters and descriptions under about 160, specific to each page.

Social images#

The sharing image is og-image.png, 1200×630 pixels, because most social networks don't display SVG. Its editable source is og-image.svg: change it in any vector editor, then export a PNG at 1200×630.

Social networks need an absolute URL for the image:

• HTML: change every og:image value from assets/img/og-image.png to your full domain, for example https://example.com/assets/img/og-image.png.
• Next.js: set your domain with the environment variable the template uses (SITE_URL or NEXT_PUBLIC_SITE_URL; see its guide) when you build. It feeds metadataBase, which turns relative image paths into absolute URLs.

Test a page with the sharing debugger of the network you care about after deploying.

Sitemap and robots#

Search engines find pages faster with a sitemap:

• HTML: create sitemap.xml in the site root listing each page's full URL, and a robots.txt with Sitemap: https://example.com/sitemap.xml.
• Next.js: add src/app/sitemap.ts and src/app/robots.ts; Next.js generates both files at build time.

Structured data#

Some templates include JSON-LD (for example a restaurant, event or article). Update the names, addresses and dates in it, or remove it if it doesn't apply. Check it with a rich results testing tool.

Performance#

The templates load no JavaScript frameworks in the HTML versions, use SVG art and lazy-load images below the fold. When you add photos, export them at the size they're shown, prefer WebP or AVIF, and keep loading="lazy" on images that aren't visible on first load.