How your site looks when a link is shared

When someone pastes a link to your site into Facebook, Messages, WhatsApp or Slack, the app shows a small preview: a title, a sentence or two, and often a picture. A search engine shows much the same in its results. None of them opens your site the way a person's browser does. They read a few lines at the top of the page your site sends, and make the preview from those.

Since version 1.6.12 those lines are your choir's own. Before it, every site was sent out titled "Choir", with the description "Choir website and member portal", and your name only appeared once the page had loaded in a browser.

There is no separate screen for this. The preview is made from three settings you already have.

Where each part comes from

Part of the preview	Taken from	If you have not set it
Title	Site Settings → Choir → Choir name	The name is required, so there always is one.
Description	Site Settings → Choir → Description for search engines	No description is sent. The app or search engine shows the title alone, or picks some words of its own.
Picture	Site Settings → Home: Hero → Background photo	No picture is sent, and the preview is a small card of words.
The small icon some apps show beside the title	Site Settings → Choir → Favicon	The Choir Master CMS mark.

The title, description and picture are the same for every public page of your site: the home page, Tickets, Donate, Auditions, Gallery, Past Events, Past Directors, Resources and pages of your own. Each page is sent with its own address, so a link to your Tickets page still opens the Tickets page.

The description

Write one or two plain sentences that say who you are and where, in at most 300 characters: "Harmony Community Choir is a community choir of sixty voices in Riverton, giving three concerts a year." See Your choir's name, place, currency and time zone.

A new site starts with the sample choir's description in the box. As long as it is still exactly the sample's wording and your choir has a name of its own, it is left out of what is sent, so that the sample choir is never described under your name. Write your own and it is used from the next time the page is fetched.

The picture

The picture is the Background photo of the top of your home page. See The top of your home page. On your home page it is shown faintly behind the words; in a preview it is shown as it is, at full strength, so choose a photo you are happy to see on its own. A wide photo of the choir works best, since most apps crop the picture to a wide rectangle.

• With no background photo, there is no picture. Nothing else stands in for it.
• Your logo is never used. It is made to sit on a dark colour, so it is usually white or pale, and would be invisible on the white card most apps draw. It is also often an SVG, which previews do not show.
• A photo that is an SVG file is not used, for the same reason. Use a JPEG, PNG or WebP.

Check how it looks

Paste your site's address into a message to yourself, in the app you care about.

The apps keep a copy of a preview once they have made it, sometimes for days. If you change your description or photo and an old preview still appears, that is the app's copy, not your site. Your site sends the new wording from the moment you select Save. Facebook and LinkedIn each have a tool for developers that fetches a page afresh; searching for "Facebook Sharing Debugger" or "LinkedIn Post Inspector" finds them.

A search engine takes longer still: it comes back to your site in its own time, and decides for itself what to show. The description is a suggestion to it.

Pages kept out of search results

Some pages are not for the public. Your site asks search engines not to list them, and sends no description, picture or address for them:

• the admin panel, including its login page;
• the member portal, including its login page;
• pages that are one person's, reached by a link they were sent: a buyer's tickets (/tickets/order/…), a giver's thank-you page (/donate/thanks/…) and the page where someone stops a kind of email (/unsubscribe).

This is a request to search engines, which the well-known ones honour. It is not what keeps these pages private: the admin panel and the member portal need a login, and a personal page needs the private code in its link. All the addresses are listed in Addresses on your site.

An address that is no page of your site at all is sent with your name and icon and nothing more.

Your site's one proper address

Each public page also says what its own address is, so that a search engine which reaches your site by two routes (with and without www, say) counts them as one page.

On a site we host

There is nothing to set. The address is your site's main address: its .cmcms.org address, or your own domain once you have made it the main address. See Bare domains, two domains and the main address.

On a self-hosted site

The address is written from SITE_URL, using its https:// and host name only, and never from the address a request arrived on. If SITE_URL is not set:

• no page says what its address is (no <link rel="canonical"> and no og:url);
• a background photo you uploaded to the site is not offered as the preview picture, because its address (/files/…) cannot be written in full. A photo whose address already starts with https:// is still used.

The title, description and icon are sent either way.

A site on a server of its own (Node or Docker) needs nothing else: update to 1.6.12 or later and it is done. A site on Cloudflare Workers needs two lines in wrangler.toml, and is titled "Choir" in previews until it has them: see Your choir's name in the page.

To see exactly what your site sends:

curl -s https://choir.example.org/ | grep -iE '<title>|rel="(icon|canonical)"|name="(description|robots|twitter:card)"|property="og:'

For a home page with everything set, the answer is like this:

<title>Harmony Community Choir</title>
<meta name="description" content="Harmony Community Choir is a community choir of sixty voices in Riverton." />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="canonical" href="https://choir.example.org/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Harmony Community Choir" />
<meta property="og:title" content="Harmony Community Choir" />
<meta property="og:description" content="Harmony Community Choir is a community choir of sixty voices in Riverton." />
<meta property="og:url" content="https://choir.example.org/" />
<meta property="og:image" content="https://choir.example.org/files/hero.jpg" />
<meta name="twitter:card" content="summary_large_image" />

Without a picture the last line reads summary and there is no og:image. For /admin/login or /member the answer is the title, the icon and <meta name="robots" content="noindex" />.

To write these lines the server reads your site's settings once for each page it sends. If they cannot be read, or have not arrived after a second and a half, the page is sent as it was built, titled "Choir", and your name appears when the page has loaded, as it did before 1.6.12. The log then has a line starting The page was served without the site's own title:.

Whether a page is switched off, or whether a page of your own with that address exists, is not checked when these lines are written: /gallery is described as a public page even while the gallery is off, and the visitor is then taken to the home page as usual.