All themes

Lyra Astro documentation

SEO, search and sharing

What Lyra does for search engines, social sharing and site search, and what to set before you launch.

Before you launch

  1. Domain: set site in astro.config.mjs to your address. Canonical URLs, the sitemap, RSS feeds and share images all use it.
  2. Descriptions: give every page file a description, about 150 characters saying what the page is about. Causes, campaigns, events and stories use their summary.
  3. Share image: set shareImage in site.config.ts to a photo in src/assets/images/. Pages with their own photo, such as stories, use that instead, and a page file can set image: to choose one.
  4. Legal details: fill in your registration number and address in site.legal. Donors and search engines both look for them.

What Lyra does for you

  • A canonical URL, title and description on every page.
  • Open Graph and Twitter Card tags with a 1200×630 image, so links look good when shared on WhatsApp, Facebook and LinkedIn.
  • Structured data that helps search engines understand your site:
    • your organisation as an NGO, on the home page
    • each event as an Event, with its date and place
    • each story as an Article
    • FAQ blocks as an FAQ (turn it off with schema: false on the block)
    • breadcrumbs on inner pages
  • hreflang tags linking each page to its translations.
  • A sitemap at /sitemap-index.xml, listing every language.
  • RSS feeds of your stories at /rss.xml and /es/rss.xml.
  • Clean, accessible HTML: one h1 per page, headings in order, labelled forms and image descriptions.
  • Fast pages. Speed affects ranking and donations alike, and Lyra’s pages score 98–100 on mobile PageSpeed.

Hiding a page from search

Add noindex: true to a page file. The demo does this for /thank-you/ and /search/.

After launch

Add your site to Google Search Console and submit https://yourcharity.org/sitemap-index.xml. Do the same in Bing Webmaster Tools. If you’re a registered charity, also check whether Google for Nonprofits is available in your country: it includes free Google Ad Grants.

Lyra includes site search, powered by Pagefind. It needs no account or server: npm run build creates a search index in dist/pagefind/, and the search page loads it only when someone types.

  • The search page is /search/, and the magnifying-glass button in the header opens it.
  • Visitors only see results in the language they’re reading.
  • Pages, causes, campaigns, events and stories are all searchable. The block library, style guide and noindex pages are not.

Search works on the built site, so try it with npm run build and npm run preview. During npm run dev the search page explains that the index isn’t built yet.