This article describes all the SEO related settings for Flex websites. This page was updated on 29 October 2021 with information about localisation in Flex 32.11 or later.

Recommended reading

• XML sitemaps

Setting up the defaults

Defaults for browser titles and the title meta tag

First, configure the default settings for browser titles and the “title” meta tag.

Go to “Site configuration”, “SEO, Meta tags, Social, Rich” and then open the section “Browser title and Title meta tag”.
Many of the standard pages have browser titles that are made up of a fixed and a variable part. The variable part depends on the page that you’re viewing, which is explained in the following paragraphs. The fixed part is what you enter in the settings. The separator symbol that you enter will be used to separate the fixed value and the variable value. You can use e.g. a dash, a slash or a pipe symbol as a separator. Finally, select if you want the browser titles to start or end with the fixed part.

Titles are showing in the browser, and embedded in the page head with the tags:
<title>…</title>
<meta name=”title” content=”…” />

Defaults for the description and keyword meta tags

Open the section “HTML meta tags Description & Keywords”. Enter a description and keywords that will be used
1) if no other data is available for any given page and,
2) that will be appended to automatically generated descriptions and keywords on certain pages.

HTML meta tags Category, Description & Keywords Localisation (32.11 or later)

If your website uses more than one locale, then you can configure localised default values for the Category, Description and Keywords meta tags. Values must start with the locale number (e.g. 1 for English, 2 for Dutch and so on) followed by = and then your text. Multiple locales are separated with a pipe (|) symbol so that you can use commas in your Keywords and other tag values.
Note that you must not use enters/line breaks. Also, to enable localisation make sure that you start with 1= always, even if you don’t want a text for the English locale.

For example:

And an example for the Keywords tag:

Pages

HTML pages that you create with the “Pages” function give you full control over the meta tags that are used.
To edit a page, go to “Pages” in the admin dashboard or admin pulldown menu.
To be able to edit a page, you’ll need to lock it first; click the lock button on the right hand side of a row, then click anywhere on the page’s row in the overview to edit the page.

Title/H1

The “Title/H1” field is the title that is displayed on the client facing pages (note that this can be changed by editing the template used for your pages). If there is no separate value in the “SEO title” input box, then the Title/H1 value is also used as the browser’s title and the title meta tags.

Page slug

Note that when you change the Title field, the “slug” will automatically change too. You can however edit the slug field separately after you’ve changed the title. The “slug” is the URL part after your domain name and it’s how the page is accessed via the browser’s address bar. For example www.mywebsite.com/about-my-business, where about-my-business is referred to as the “slug”.

Title meta tag

The SEO field Title is embedded in the title meta tags of the page and it’s used as the browser title. If you leave the SEO Title field empty, then the page title/H1 value will be used and the default settings as configured via “Defaults for browser titles and the title meta tag” are applied. If SEO title has a value, then that value is used literally and the default settings are ignored.

So if SEO title is empty and the page title/H1 is “About my business”, then the tile will output as either:

If you have selected a separator value, then spaces are automatically added.

Other meta tags and og:image

Enter values for the Description and Keywords fields. If empty, then the defaults (as described in the first paragraph) are used.

Enter the name of an image (og:image) that you have uploaded for this page. It is used for the embedded Rich/Structured data as explained further down. You can click the folder icon next to the input box to open and upload/select an image for this field.

Changes to pages are always saved as “Draft” so that you can preview your changes without affecting the “live” client facing pages. When you’re done, click the “Publish” button to make your changes “live”, this will also automatically unlock the page.

Removing the Title/H1 from your template

The standard template has a tag (<?xs(‘title’) ?>) that will insert the page title in the client facing HTML. When editing a page, click on the “Page template” tab to see this (example code below). If you don’t want this, for example because you want to be able to enter the H1 in every page yourself – then you can use the code editor to edit the template. You can then enter the title in the page HTML yourself.

<?xs html('mainmenutopflex.inc') ?>
<div id="contentwrapper" class="pagecontainer">
    <!-- begin: remove this from the template -->
    <div class="banner pagetemplate281">
        <h1><?xs page('title') ?></h1>
    </div>
    <!-- end: remove this from the template -->
    <div class="page pagetemplate281">
        <?xs page('page') ?>
    </div>
</div>    
<?xs html('pagefooterblockflex.inc') ?>

Rich/Structured data in your HTML pages

HTML pages that are created with the “Pages” function have “Rich data” in the head of the HTML page. For example:

<script type="application/ld+json">
{
	"@context": "https://schema.org",
	"@type": "WebPage",
	"mainEntityOfPage": {
		"@type": "WebPage",
		"@id": "https://www.mywebsite.com"
	},
	"headline": "Some page on my website",
	"image": [
		"https://www.mywebsite.com/someimage.jpg"
	],
	"datePublished": "2021-12-04T17:08:00+01:00",
	"dateModified": "2021-12-05T12:58:00+01:00",
	"author": {
		"@type": "Organization",
		"name": "My company name"
	},
	"publisher": {
		"@type": "Organization",
		"name": "My company name",
		"logo": {
			"@type": "ImageObject",
			"url": "https://www.mywebsite.com/siteowner/logo/logo.png"
		}
	}
}
</script>

SEO for preview pages

This explanation applies to the full screen preview pages, not the modal previews. If your website uses modal (windowed) previews, then open a preview and press enter with your cursor in the browser’s address bar to load the full screen version of your preview page. This is the page that search engines/bots will see.

Canonical URL’s

Every preview page has a unique canonical URL. These URL’s are how a specific preview page can be accessed directly. To configure how the canonical URL’s are created, go to “Site configuration”, “SEO, Meta tags, Social, Rich” and open the section “Preview page canonical URL”. The URL’s have a significant part which is the last part: imagennnnnnnn.html where nnnnnnnn is the 8 digit unique number.

If you would type other information before the significant part, the same page will still load.

The canonical URL’s are important if you want to use XML sitemaps. For more information, please read seo-automatically-generated-xml-sitemaps on this website.

Preview page titles and meta tags

Go to “Site configuration”, “Preview page” and open the section “Browser titles, Meta tags and H1 title tag”.

Title/H1

The HTML title/H1 and the browser title and title meta tags can be changed separately.
To change the H1, select a field to use in the drop down box.
If you want to use the macro that you have defined in the section “Preview Alt and Title text”, then select “Title macro” in the drop down box instead of a field. You may want to use this option if you want to use different fields depending on the active UI language/locale.
Enter a default text to use if the selected field has no value.

Browser titles and title meta tags

The browser title and title meta tags are configured by use of a macro. Macro values can have fixed and variable values (for information about localisation, scroll down to the paragraph about this subject).

For example:

The above example will output a title value by taking data from the “headline” field. If this field is empty then it will take the data from the “byline” field. If the result is longer than 50 characters (the :50 parameter) it will be truncated at the last word and three dots are appended. If the result is not blank, the macro will append a forward slash as a separator and finally the literal text “Stock Image” is appended.

For example:

may output:
© Riots in London 2021 / Stock Image
Or

may output:
© Riots in London | News photography

Note that you can use a maximum of two fields in a condition.
This is ok:

This is not (specifically [headline,byline,custom4,custom5:50] because it uses four fields in the condition):

Description and Keywords meta tags

The Description and Keyword meta tags also use macros.

Example Description macro:

Which will output the fixed text (“Stock photo of “), followed by either the caption or custom8 value truncated to a maximum of 50 characters, followed by a | and finally the literal text at the end of the macro (“available to buy on mywebsite.com”).

Example Keywords macro:

The above example will output the literal keywords “stock photography” and “my company name”, followed by the words in the “keywords”, “custom4” and “custom5” fields. Words are separated by commas ([sep=,]). Duplicate keywords are automatically removed. Field values can be limited in length with the max length parameter as shown above. E.g. [keywords:100].

Preview Alt and Title text

Scroll down and open the section “Preview Alt and Title text”.

For more information and recommendations with regards to the Alt text property – which is important for SEO – it is recommended that you read moz.com/learn/seo/alt-text.

You can use macros for both fields as described in the previous paragraphs.

Localisation for the macros (32.11)

The macros that you can use for the alt and title tags et cetera, support localisation for both variable values (i.e. data from fields) and fixed text.

The above example will output the value for field “headline” if the active locale is English, or the value for field “byline” if the active locale is German.
And it will output the fixed text “English text”, or “German text” depending on the active locale (1 or 4, i.e. English or German).

You can use the maximum field length parameter for localised fields as described above. For example:

Embedded meta data in your preview images

Meta data is injected into your preview (and other) images too. To configure what’s injected click on “IPTC injection” in the side bar. Embedded meta data is important for SEO. You can find instructions on the configuration page.

Besides being able to assign database fields to IPTC fields, you can have field values prefixed or suffixed with literal text.

You can further more use the following macro codes in the fixed value fields:
[ordernr] [userid] [useremail] [username] [useripaddress] [websiteaddress] [previewpageurl] [dd] [mm] [yy]
Some of these macro codes are relevant for downloaded files only.

For the supplier (photographer) name, supplier group values, use e.g. the following macro in a fixed value field:

For an explanation about embedded data, please read iptc.org/standards/photo-metadata/quick-guide-to-iptc-photo-metadata-and-google-images/.

Rich/Structured data for preview pages

Preview pages automatically include “rich data” in the head of your pages. This data has information that e.g. Google may use to display licensing information for your images when shown in Google search results. For example:

{
	"@context": "https://schema.org/",
	"@type": "ImageObject",
	"contentUrl": "https://www.mywebsite.com/cache/pcache2/00338845.jpg",
	"license": "https://www.mywebsite.com/licence?fileid=0_00338845",
	"acquireLicensePage": "https://www.mywebsite.com/how-to-aquire-a-licence?fileid=0_00338845"
}

For more information about this topic, please visit //developers.google.com/search/docs/guides/intro-structured-data.

Licencing templates

If a website visitor ends up on your website by clicking one of the “licencing” links in Google, a HTML page will load.
The URL /licence opens the page for id 173. This page is intended to display licencing information.
The URL /how-to-aquire-a-licence opens the page with id 174. This page is used to explain the process of acquiring a licence.
Both templates must exist (and can be changed) in the code editor.

See the structured data above, specifically the properties:

and

which are used to tell Google what to display if your file is found in Google (the fileid parameter value is of course just an example id).

SEO for thumbnail pages

Alt and Title text for thumbnails

Click on “Thumbnail pages” in the side bar of the Site configuration page. Then click on “Thumbnail Alt and Title text” to configure the values for the thumbnail images. Please read above (paragraph “Preview Alt and Title text”) for more information. These settings apply to all thumbnails on all pages, e.g. search results, galleries, orders, lightboxes and so on.

Text to display on thumbnail pages

The text that can be shown for your thumbnail images on various client facing pages (i.e. underneath thumbnails or when hovering over thumbnails) is configured separately via the section “Thumbnail metadata fields”. Note that the macro that you create for this can only use fields that you have selected in the “Cacheable metadata columns for your thumbnail pages” box. Localisation is supported as described in a separate paragraph.

Titles and meta tags for search results thumbnail pages

Titles and meta tags are generated using the default settings (first paragraph) and variable data.

To have more control, create “page meta tags” rules. Go to “Site configuration”, “SEO, Meta tags, Social, Rich”, then open the section “SEO Page meta tags”. This section lets you create rules for any page, except for HTML pages that are created with the “Pages” and “Posts” functions as described in the previous paragraphs.
Note that the rules that you create (32.11 or later) are locale specific. I.e. you can create rules for “blog” in English, Dutch, German and so on separately.

To create a rule for search results pages, click on “Add new page data” to open the properties dialog.

Select a locale in the drop down box (e.g. EN for English). In the “page” box enter “search”, which is a “special” name that makes sure that this rule will automatically be applied to all dynamic pages created for search results. The page shows a list of all the “special” names that you can use.

Other relevant names for search results pages are:
“latest” – a catch rule for search results for the “latest” function, e.g. “Browse our most recent news photos”.
“cbrowse” – a catch rule for search results for “browse files from a specific photographer/artist”, e.g. “Browse uploads from photographer [s]”.

In the “Page & Browser title” box enter the title that you want to use. The value that you enter can have the code [s] which will be replaced with the execute search query. For example

will output

if the user searched for “dogs and cats”.

The Description value can also use the [s] code. For example:

Fields that are left blank will get default values. You can create rules to just change the browser title and title meta tag without changing other values/fields.

Search result pages for categories

Categories that you create with the Gallery manager display search results. For example:

will display search results for the query that you have defined for the category “Mamiya C220” – as opposed to displaying a gallery page.
FYI the query to use for the category is determined by looking up the category “Mamiya C220” in the category group “Camera”. The system executes a look up because the URL starts with “/category/”.

If no entry for “category” is found in the “SEO Page meta tags” list, then the category title is used for the page & browser title meta tags. The description and keywords meta tags are read from the category information that you have entered in Gallery manager. If no info is available then the defaults are used. This is the same for categories as it is for actual galleries (described in the following paragraphs).

You can however create a page title macro by clicking on “Add new page data”. Then add “category” in the “Page” box, and add a text in the “Page & Browser title” box. The latter can have the [s] and [g] tags. [s] will be replaced by the category name (e.g. “Mamiya C220”) and [g] by the category group title (e.g. “Film”).
For example:

The description and keywords meta tags (for your SEO) are read from the category. If the SEO description field is blank, then the description is used instead. If this field is also blank, then the default is used (configured via the section “HTML meta tags Description & Keywords”).

If you have created an entry for ‘category’ as described above, and you have also entered text in the Description box then the resulting value for the Description meta tag is created from both the text in the category properties and the text that you enter in the box. The same is true for the Keywords meta tag.

For example:

Note that “Mamiya C220” and “Camera” are also in the keywords because the category and group titles are always added.

If you want to use only the SEO description that you have entered for your categories in Gallery manager, then leave the “SEO Description box” blank. The same is true for the Keywords meta tag.

Titles and meta tags for gallery thumbnail pages and gallery group pages

The meta tags that are created for gallery thumbnail pages can be specified for each gallery and gallery group separately by editing the properties with the Gallery manager.

The title meta tag is the gallery or group title – the default rule for fixed text is applied to (i.e. it’s either prefixed or suffixed with a fixed part and a separator as described in the first paragraph).

The Description and Keywords meta tags can be specified as follows in Gallery manager:
Edit the properties for a group or gallery and then click on “More fields” at the bottom of the properties panel on the left. Enter the values and click Save at the bottom. If no values are entered, then the defaults are used (section “HTML meta tags Description & Keywords”).
Note that you can edit the SEO properties of many galleries from a single dialog too.

Overriding the gallery manager settings for specific galleries or groups

You can override the browser title and title meta tags for specific galleries or groups by creating a “page meta tags” rule as described in the previous paragraph. For example, if you have created a gallery group called “contemporary architecture”, it’s URL will be “/contemporary-architecture.html”. To create a rule for this group via “SEO Page meta tags”, click on “Add new page data” and enter “contemporary-architecture.html” in the page box. Then add e.g. “The best contemporary architecture photography on the web” in the title box.

Rich data for gallery group pages

The gallery group pages have "Rich/Structured data" in the head of the html. For example:

<script type="application/ld+json">
{
	"@context": "https://schema.org",
	"@type": "BreadcrumbList",
	"itemListElement": [
		{"@type":"ListItem","position":1,"name":"Galleries","item":"https://www.mywebsite.com/galleries"},
{"@type":"ListItem","position":2,"name":"Architecture","item":"https://www.mywebsite.com/architecture.html"},
{"@type":"ListItem","position":3,"name":"Bridges","item":"https://www.mywebsite.com/architecture/bridges.html"}
	]
}
</script>

SEO for standard HTML pages

To create browser titles and meta tags for the standard/system template based pages, you can create “SEO Page meta tags” via “Site configuration”, “SEO, Meta tags, Social, Rich”, section “SEO Page meta tags”. Add a new rule for a page by clicking “Add new page data”.

The “page” edit box is used to create a catch rule for a specific page. To know what to enter here, go to the client facing page for which you want to create a rule. For example, www.mywebsite.com/register (the page where new users sign up). The part after the forward slash that follows the domain name is what you need to enter in the “page” box. So for this example “register”.

Note that if a rule exists for a page and you have specified a value in the “Title” box, then the default settings (i.e. suffixing or prefixing a fixed value and a separator) are not applied.

You can specify an image (og:image) that you want used if someone shares a page on e.g. social media. This image may also be used by search engines such as Google as a representation image.

Don’t create rules for html pages that you have created with the “Pages” or “Posts” function. Such rules will be ignored as the properties are configured separately as described in the above paragraphs.

Twitter cards and Open Graph (Facebook) meta data

If you want to embed meta data for Twitter and/or Facebook, the configure the settings via “Site configuration”, “SEO, Meta tags, Social, Rich”. These tags are intended for sharing pages, but certain search engines also use OG data for indexing purposes. For further information, please visit https://ogp.me.

Google Analytics & Tag Manager

Google analytics script with analytics.js is still supported but this is for backward compatibility purposes only as Google marks this as legacy code. If you already have a GA code, then you can simply select the option “Analytics with Google Tag Manager script (gtag.js)” and your analytics will work as before after you have entered the GA code in the appropriate field. The required script et cetera is automatically added to your pages.

If you use Google Tag Manager, then it is recommended to select the option “Analytics with Google Tag Manager script for GA4 (gtag.js)”, to leave the “Universal Analytics Tracking ID” field empty and to configure Analytics with Google Tag Manager. For more information, read the information on Google’s website regarding these subjects. It’s best to consult a specialised SEO company.