>, SEO>SEO configuration for Flex

SEO configuration for Flex

This article describes all the SEO related settings for Flex websites.

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.

Example: Terms and conditions | Xpertise-ICT BV

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.

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:

“fixed part” “separator” “About my business” – or – “About my business” “separator” “fixed part”

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

Example: About my business | Xpertise-ICT BV

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.

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:

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.

For example: /stock-photo-african-lion-cub-wildlife-image0008281.html

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 dropdown box. 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 example:

© [headline,byline:50][sep]Stock Image[sep= / ]

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:

© [headline,byline:50][sep]Stock Image[sep= / ]

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

© [headline,byline:15][sep]News photography[sep= | ]

may output:
© Riots in London | News photography

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

[headline,byline:50][sep][sep][custom4,custom5][sep= / ]

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

[headline,byline,custom4,custom5:50][sep][sep][custom4,custom5][sep= / ]

Description and Keywords meta tags

The Description and Keyword meta tags also use macros.

Example Description macro:

Stock photo of [sep]available to buy on mywebsite.com[sep= | ]

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:

stock photography,my company name,[keywords][sep][custom4][sep][custom5][sep=,]

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.

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:

[supplier_name][sep][supplier_group][sep]My company name[sep= / ]

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:

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:

“license”: “https://www.mywebsite.com/licence?fileid=0_00338845”

and

“acquireLicensePage”: “https://www.mywebsite.com/how-to-aquire-a-licence?fileid=0_00338845”

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.

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.

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

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

Search results for [s]

will output

Search results for dogs and cats

if the user searched for “dogs and cats”.

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

Browse all the [s] photos from our photographers

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.

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).

For example: “Modern architecture | Xpertise-ICT BV”

The Description and Keywords meta tags can be specified as follows: 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.

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

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.

2021-02-09T16:46:42+01:00 February 8th, 2021|Categories: Configuration, SEO|Tags: , , , , , , , , , , , , |