The H1 SEO title is sentence case but no end stop, aim for 20-70 chars

This visual style guide has been created to show how text and media components should be used to create article pages for the Wales.com and VisitWales.com websites. The best practice guidance below should be followed to ensure quality and consistency across our content.

Please also refer to the content editorial style guide for tone of voice and target audience guidance and the language and style guidance when creating editorial content.

Index of contents

• Standard article components
• Metadata
• External / On site promo text
• Topic tags
• Author profile
• Location tag
• Editorial title
• Intro text
• Region map image
• Theme style
• Article content
• Rich text
• Product links and link formatting
• Headings
• Images
• Parallax and zoom on scroll functionality
• Image display styles
• Animation
• Article carousel
• Image credit information
• Image captions / descriptions
• Header image description
• Embedded external video
• Embedded social media posts
• Spotify embed
• Quotes
• Maps
• Product strip
• Product Discovery
• Embedded search results
• Download files
• Related content
• Partners
• Block embed
• Calendar button

The Wales Gateway CMS uses a number of text and media content blocks or components to build articles pages. Examples are used below with some best practice guidance on how to use them.

The component build approach allows flexibility to use different combinations of components to display content in a number of ways but items marked with * are the minimum requirements for every article page published.

Meta page title*

This text displays in the title bar of a visitor's web browser when they view the page. It may also be used as the title of the page when a visitor bookmarks or favourites the page, or as the page title in a search engine result.

The format should always be - Page title | Sitename

The title may be made up of one or two parts in order to describe the page better - 

Insider guide to Aberystwyth | Visit Wales

 or

Travel Wales | How to get to Wales | Wales.com

The full title including the site name should be in sentence case and no more than 66 characters, including spaces.

Meta description*

The meta description is used by search engines to display a snippet about the page in search results. It needs to be a brief, concise summary of the page's content so a user is clear what to expect on if they click through to visit the page. The description should be no more than 160 characters, including spaces.

The H1 is used by search engines to understand what the content is about, so needs to include keywords and use descriptive language.

The H1 appears on page within the colour banner, above the intro text. Aim for 20-70 characters, including spaces.

The H1 must work with the Editorial title but must not duplicate it, as both appear on the article page together. It must also work together with the External text, without duplication, as both appear together in search results and on automated Topic pages (generated by tags).

Appears on the homepage, section pages and related article listings. Used to promote the article. Aim for 70-100 characters.

Copy should be persuasive, using a call-to-action and descriptive keywords e.g. "Discover how the green mission of Riversimple is aiming to change the way we drive."

Keep tagging of content to a maximum of five tags, picking the most relevant tags that describe the page.

When articles are authored in the first person an author profile should be included. This is created separately in the CMS and is displayed within the colour banner at the top right hand side of the page.

Author profiles consist of:

• a headshot image - a colour, close up head, or head and shoulder shot. Where no image is available the 'Noprofileimage.jpg' should be used;
• name - include title only if relevant - Professor/Dr, first and surname. Use sentence case to input but this will display on page in caps;
• short biog -  a description of one or two sentences - aim for 30-40 words -  explaining who the author is, focusing on the experience or skills that make them an authoritative voice on the subject matter. Avoid duplicating the name within the biog copy.

If your article relates to a specific location, select the one location from the dropdown list. 

e.g. if you have an article about Cardiff, then you pick Cardiff, if it's about areas in Cardiff and the Vale of Glamorgan, choose South Wales.
Be as specific as possible in order to provide a sense of place. E.g. For Snowdonia, choose Snowdonia Mountains and Coast, rather than North Wales.

There is no option for pan-Wales or multi location content. If your article is pan-Wales or multi location, then leave this field blank.

There is a currently a bug in this section on Wales.com ONLY so locations do not appear in the previously mentioned dropdown. This is being addressed and will be updated once the fix has been applied.

The editorial title should be intriguing, enticing and make the user want to read more but not so obscure as to confuse. It appears on page over the lead/hero image at the top of the article. Aim for 20-50 characters, including spaces. Always use sentence case but do not add a full stop at the end.

The intro text appears in the colour banner under the H1 title, at the top of the article page. It should be a standfirst for the article, setting out what the article is about. If the copy includes the name of a featured person it should be bold, but not italicised. Links cannot be included. Aim for 180-250 chars.

If an article relates to one region of Wales use the relevant regional map image. The map image displays at the top right of the header banner, above the tags.

Use either the white or the black version of the map to match the colour of the title text and ensure optimised contrast for accessibility.

There is no pan-Wales map image, if your article is pan-Wales, do not include a Hero meta image.

The theme style selected for the banner should compliment the hero image, picking out an accent colour, rather than using the main colour from the image.

There are 12 theme style colours to select from. 

• Fagddu black
• Dry slate (grey)
• Wet slate (brownish)
• Portmeirion Blue (light blue)
• Penclawdd Marsh (pastel green)
• Plynlimon Green (charged green)
• Dolgellau Gold (orange)
• Epynt Purple (vibrant)
• Penrhyn Purple (deep purple)
• Abereiddi Blue (deep blue)
• Portdinllaen Orange (vibrant)
• Dragon Red

The main article copy displayed on the article page is 'built' using component blocks. 'Rich text' components can be supplemented with a variety of components , including 'H2/H3 subheadings', 'Quotes', 'Map' (single location pinpoint only), and embedded social media posts (Twitter, Facebook and Instagram), embedded video, a product strip and embedded search results. There is more detail on each below.

Articles can use running copy, statement headings followed by explanatory para, follow a question/answer or a listing format. Article length and formatting will depend on the type of content and article subject matter. Refer to the 'Working with the Wales.com editorial strands' or 'Working with the VisitWales editorial formats' guidance articles for further detail.

Maps, images, video, quotes and social embeds, should always come after a rich text block, not straight after a heading/sub-heading.

The 'Rich Text' component is a text block used to add body copy to an article. The Rich Text component allows use of basic formatting including

• bold (B icon)
• italic (I icon)
• bullet points (bullet list icon)

1. numbered bullets (numbered list icon)
2. xx
3. xx

and adding of anchor links (A icon).

Cymru font can be applied to Welsh words but on the Visit Wales site this should be applied to Welsh words in H2 headings, but not H3 headings and never in body copy. On the Croeso.Cymru site Cymru font should be applied all headings but removed from any English words if used. It should never be used in body copy.

Do not use the drop cap option at the start of paragraphs.

There is also the option to change text direction from left to right (default), to right to left if creating content in language which reads this way.

Please refer to the language and style guidance to ensure consistent use of language style and formatting.

In order to ensure quality and safety. we must ensure that businesses have the necessary accreditation, grading or industry standards to be included in our content. All accommodation, activities, attractions and events listed on the Visit Wales search database meet the required criteria, so check products using the on-site search function before including in editorial content.

When linking to products, ALWAYS link to the internal product listing page first rather than the providers external website. Links included later in the article can link to the providers external site in order to give users more detail than is included on the product listing page.

• Accommodation must be accredited with Visit Wales or the AA star quality grading.
• Activities must be accredited through Wales Adventure Tourism Organisation (WATO)
• Attractions - preference should be given to those accredited as part of the Visitor Attraction Quality Scheme (VAQAS) and so have a product listing page. Other attractions may be included, and their external website linked to directly, if they have been checked for a quality visitor experience, either by personal recommendation or via review sites.
• Events must meet our Events Criteria.

Food and Drink eateries must have a Food Standards Agency Food Hygiene rating of 4 or 5. Our approach is to promote anywhere that is considered strong for tourism marketing purposes, but we should make a point of featuring places with a Welsh food and drink offering whenever we can.

Link formatting:

Internal and external in-line links should be added to rich text copy, using the following conventions:

• Products - link to product listing pages (/product/xxxxxx)
  E.g. You'll get a brilliant understanding of what it was like to work in dark and dangerous conditions deep underground at A Welsh Coal Mining Experience.
• Internal - link between pages by using the node (/node/xxxxxx)
  E.g. Find out more about the highlights and adventures along The Coastal Way.
• External - link to an external site using the full url (https://xxx) and select 'Open in new window/tab' from the 'advanced' options.
  E.g. Visit AdventureSmart UK for information on how to stay safe whilst exploring Wales.

Links to the product database should not be used on the Croeso.Cymru site but all products included and linked to in editorial content must still meet the accreditation, grading or industry standards required for a VW database listing.

The 'Subheading' component is a text block used for adding H2 and H3 sub headings to an article,

Always use sentence case for titles (Editorial and SEO H1), headings and subheadings.

Use the following H2/3 convention for consistency and accessibility:

• Use H2 for headings
• Use H3 for any sub-headings beneath a H2 heading

The Cymru font is used across all titles on the Croeso.Cymru site. On our other language sites it should be applied to Welsh words in H2 headings. It should not be used for H3 headings on these sites, or in body copy.

The 'Image' component is a media block for adding an image from the media library into a page. Images must be added to the CMS media library before they can be added to a page.

Images are extremely important to our content. We aim to 'show' rather than tell with both words and images and video.

All images must comply with the Wales Brand Photography Guidelines and be delivered to the image support team, along with a completed copyright clearance and metadata form, to be stored and indexed on the Cymru Wales Digital Asset Library, before they can be used in web articles.

Articles require a strong, high quality, ‘hero’ image (hero image) that will be displayed at the top of the article, along with supporting imagery for the body copy. The hero image will be displayed on a section page/homepage, along with the editorial title and external text copy, to showcase the article on section pages and in search results, so should demonstrate the essence of what the article is about.

Images for use on the website must be;

• Minimum of 1280px (width or height, depending on orientation)
• Maximum file size is 4mb but always aim for under 2mb to reduce page weight and load time.
• Download the 'web version' of assets from the Assets.Wales library. This version is optimises quality but keep filesize to a minimum - around 500-700kb per image.

Articles should include a minimum of three supporting images – ideally more, distributed throughout the article copy to illustrate the ‘story’ adding interest and additional depth to the copy.

Don't use dated photography as this will quickly lower the quality of the article.

Ensure the best focal point has been selected, using the focal point selector tool within the CMS, to ensure the best view of the image on all screen sizes. 

Use a good mix of single, portrait, landscape and full bleed where appropriate. There are 10 different image display styles, an example of each can be seen below.

Parallax functionality can be used on the two largest 'Full Bleed' image sizes to showcase a feature article. It won't work if applied to smaller sizes, or groups of images. It should only be applied to the best images for impact, rather than just applied anywhere.

Parallax is enabled on individual images. You can select to just enable parallax on the header image, just on one or more full bleed images in the main body copy, or both. It works well to retain engagement on long read articles, but used too much it can be distracting. Use editorial judgement or seek opinions from others.

To enable parallax tick the radio button box beneath the image display style dropdown.

Zoom on scroll functionality can be used when a single image is used. It won't work if applied to groups of  2 or 3 images.

There are two animation effects that can be added to images within the body of an article page.  

1. Scrolling text on static image
2. Stacked images using transitions

The scrolling text on static image effect allows copy text to scroll over single image. It can be left, right or centre justified.

Optional description text can be added beneath the image. 

The stacked images using transitions effect allows up to 3 images with 2 types of image transition - fade or swipe.

Optional description text can be added beneath each image. The descriptions do not change with the images but instead display all together on separate lines.
You can therefore choose to add description text to just the first image and this will remain static beneath the images as they change.

The article carousel can be used to host multiple images from the media library. It can be used for a short form ‘photostory’ article format but can also be included in a long form article as an illustrative item when there are a good range of images available.
 

Images must be added to the CMS media library before they can be added to a carousel item.

A short line of copy can be added beneath each image to tell a story and provide context and further info. The copy can include links.

All Cymru Wales owned images should use a bilingual credit in the following format:

© Hawlfraint y Goron / Crown Copyright

Photographers should not be credited on Crown Copyright images and the text should not be bold or italicised.

If images are not Crown copyright, the copyright information must include the copyright symbol followed by the name of the copyright owner. The copyright owner may be a photographer, or a company name. Non Crown/third party owned images should use the following format:

© copyright owner

Where there is a requirement to credit a photographer but they are not the copyright owner, photographers should be credited followed by the copyright symbol, followed by the copyright owner, as follows:

Photographer name © copyright owner

In all cases the copyright symbol should precede the copyright owner

All images must have alt text descriptions for accessibility.

A descriptive caption that will appear on page is also required for both images and embedded YouTube video. Include location wherever possible to provide context and a sense of place.

The description displayed over the header image is taken from the description of the image in the media library. Descriptions should not be bespoke to the article. They should be kept short and provide information/detail about the location in the image and where applicable, the name of the attraction, activity, or event. Aim for 40-60 characters incl spaces.

the 'External Video' component is a media block used for adding a video to a page. Video must be hosted on YouTube or Vimeo and added to the Drupal media library before they can be embedded within an article.

Cymru Wales video must have accurate closed-captions added for the user to enable on either platform.
It is easier to apply closed captions to video on the YouTube platform, so this option should be used where possible. Vimeo may be used as an alternative if accurate closed captions have been added.
Third party video content may not have closed captions added, or may use auto-generated captions which may contain inaccuracies. Vimeo should only be used if the content is not hosted on YouTube by the provider.

When embedding video in an article, include it either:

• beneath the relevant item within a list or;
• near the start of the article/above the opening paragraph (if it relates to the whole article).

Description text is not automatically pulled in from YouTube so should be added in the CMS. Aim for 70-100 characters including spaces and use an end stop.

The 'Social Media Post' component is used to embed a post from Twitter, Instagram and Facebook into an article by using the URL of the individual post.
Social Media embeds can add additional depth and interest to article content.

Do not use the 'Social item embed' component, this is a legacy component which no longer works properly.

Do not include any additional embed code. The url should be in the following format:

Twitter: https://twitter.com/accountname/status/postid  e.g. https://twitter.com/visitwales/status/1192523378479058945
Instagram: https://www.instagram.com/p/postid/ e.g. https://www.instagram.com/p/B4k37dWhsMw
Facebook: https://www.facebook.com/accountname/postid/ eg https://www.facebook.com/visitwales/photos/a.437077346784/10158364650946785

• Ensure Facebook posts have ''Public' permissions - indicated by a globe icon next to the post time/date stamp;
• Choose posts from verified or official organisation/events/product accounts; wherever possible, rather than accounts from individuals;
• Check comments on posts to ensure they are not inappropriate;
• Avoid using images of children where we don't have specific permission from parent/guardians;
• Use blocks of rich text between embeds to provide space and distinction between posts/channels.

The 'Calendar button' component is a content block used to add the details of an online event (name, date and time, location and description) to a page to enable users to easily add these details to their personal digital calendar (Apple Calendar, Google Calendar, Outlook Calendar, Yahoo Calendar etc).

Sub heading and rich text components should be used above the calendar button with information about the event. The name, date and time of the event, location and description text should be added in the fields of the calendar button component.
The detail is added into the users calendar when they click the button to add the event to their calendar. 

Music playlists and podcast episodes can be added to articles to illustrate content by using the Spotify Embed component.

Examples of VW articles with Spotify Embeds:

• Welsh Language Music Day
• Comedy travel podcast Pod of Wales

The 'Quote' component is a text block for adding a stylised quote to a page in order to highlight direct quotes in first person, or Wales voice (3rd person) articles.

Quotes should be kept short and limited to one or two sentences. The quote component should be used to illustrate the article, not be part of it. Quoted text should repeat copy from the rich text in the quote component, not be used as part of the running copy.

The design of the quote component includes an opening double quote mark. A closing double quote should be added using the standard keyboard " at the end when adding the text being quoted. A byline should also be added for every quote.

You will also need to select a style/background colour for the quote. This should match, or complement, the theme style/colour chosen for the hero banner.

Maps add a 'sense of place' and are a good way to provide users with useful geographical context to an article.

There  are two map components;

• Map (single location)
• Interactive map

The Map (single location) component is used to embed a Google map showing a single point. It requires the latitude and longitude coordinates of the location to locate the pin point. A  zoom level must be also be selected. The zoom level helps provides context to the location pinned. Zoom Level Scales are: 6 (England, Wales and Ireland), 8 (Mid Wales), 12 (City of Swansea), 18 (Down to street level)

Only add one map to a page as they contribute significantly to page weight and load speed.

When using a map in an article, include it either:

• beneath the relevant items within a list, or;
• near the start of the article / above the opening paragraph (if it relates to the whole article).

The Interactive map component is used to embed a Google map showing multiple map marker points. The marker points can be connected to highlight a joined up journey, or unconnected to highlight several locations with a theme in common but that are not part of a journey/route/itinerary.

Each marker point must have a title and description copy and can also be illustrated with an image and one or more icons to signify that the location has activities, an attraction or accommodation there.

Examples of VW articles with interactive maps:

• Things to do along The Coastal Way (unconnected marker points)
• Things to do along The Cambrian Way (unconnected marker points)
• Things to do along The North Wales Way (unconnected marker points)

The 'Product strip' component is a content block used on article pages on the Visit Wales consumer and B2B sites, to highlight and direct users to specific tourism product pages, usually those mentioned/referred to in the content copy.

A minimum of two products can be used in the product strip and a maximum of four.

Examples of two and three products in the strip can be seen in the Accessible accommodation in South Wales article and an example of four products in the strip can be seen in the Farm stays in Wales article.

There are two types of 'Product discovery' component blocks.

One is a content block that is used on section pages of the Visit Wales consumer site with four predefined links highlighting and directing users to the main product search pages for accommodation, activities, events and attractions.

The second 'Product discovery' component is a content block that can be used within article pages. 

On Visit Wales sites with product search it can be used on article pages which have a number of topics grouped into content, to link to custom search results, or relevant section pages of the site, rather than/or in addition to, using multiple in-line links. This provides a visually engaging way for users to link directly through to relevant products/sections. E.g.: Summer holiday ideas for family breaks

The 'Product discovery' component can also be used to increase article completion of long articles, by using anchor links to direct users to the part of the article most relevant/useful to them, in a visually engaging format. E.g.: Visit our UNESCO World Heritage Sites.

The 'Product discovery' component has four link blocks. All four MUST be used in order to save/publish. There is currently no option to use less, or more, search or anchor links in the component.

For consistency of user experience, types of links included within each block of 4 should be consistent – all to search results, all to section pages, or all as anchor links, not a mixture within the same block.

The 'Embedded search results' component is a content block used on the Visit Wales site to embed the results of a product search in a hybrid article page. Only one Embedded search results' component should be used per page.

Examples of Visit Wales hybrid pages using the Embedded search results component are:

• Pet friendly accommodation
• Coastal cottages In Wales
• Coasteering providers in Wales
• Stand up paddleboarding in Wales

The 'Embedded search results' component will display the first 10 results of a search query. It should only be used when there are at least 5 results to display. Results must not include products that are not relevant to the search term.

The 'Download files' component is a media component used to link to accessible documents for the user to download and read, save or print.

Up to 4 documents can be linked to per component. 

Document files need to be added to the Drupal media library before they can be embedded within an article.

To use the Download files component you will need to confirm that all files linked to conform to the Web Content Accessibility Guidelines version 2.1 AA standard, in accordance with the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018.

The 'Related articles' component is a content block used to select specific related content items to be included in the 'Related stories' block, which appears at the bottom of all article pages.

The 'Related stories' block is automatically populated with internal/same site articles with the same topic tags. The auto population can be overwritten with editorially selected articles using the 'Related articles' component.

Internal related links can be selected from the drop down menu.
External related links can be added, but these must be created in the CMS first in the Manage menu by following the steps: Manage > Content > Add Content > External Article.

A maximum of four articles can be selected and should be added in the following logical and consistent order:

• most relevant internal/same site articles;
• most relevant internal-sister site articles;
• most relevant external site articles.

Where less than four articles are editorially selected the remaining spaces will automatically populate with internal/same site articles with the same topic tags.

If possible, avoid repeating links from the body text in an editorial selection.

The 'Partners' component is a content block used to add the name, logo image and a link to a 3rd party/external partner site, usually used on prize draw or campaign pages.

The 'Calendar button' component is a content block used to add the details of an online event (name, date and time, location and description) to a page to enable users to easily add these details to their personal digital calendar (Apple Calendar, Google Calendar, Outlook Calendar, Yahoo Calendar etc).

Sub heading and rich text components should be used above the calendar button with information about the event. The name, date and time of the event, location and description text should be added in the fields of the calendar button component.
The detail is added into the users calendar when they click the button to add the event to their calendar.