Editing the website

Training Standard pages Course pages Writing for the web Search engine optimisation

Training

Our website is a powerful communication channel. We want to empower our community of website editors so that together we can unlock it’s potential.

We run monthly 1-hour virtual training sessions. These are available for new users and anyone who would like a refresher. To book your place please email websupport@herts.ac.uk

Standard pages

Adding different types of content encourages users to engage with not only our website, but our story.

We are constantly creating new content templates for the website, enabling access to complex functionality in a simplistic easy-to-use interface. These templates have been created and tested by the Digital Team for best performance and optimisation. We have put together this guide to demonstrate the functionality of the different content templates available to use.

Name	What's it for	How to use it
Comparison slider	This slider will allow you to compare. There is space for an image, five features and a CTA link.	Example: This is used to compare products and services.
Content	A block of content. Includes content text and content description fields.	Example: This is used for text.
Country button	These country buttons allow you to include the country name, country image and where you would like it to link off to.	Example: International pages to display specific country requirements.
CTA Buttons	Buttons to drive actions from users. Add as many as you require, and select the number of columns based on design and number of CTAs.	Example: Book an open day button or apply.
CTA External URL Buttons + Anchors	Select how many buttons you want per row from the drop down menu. Enter the text you want to appear on the button. Add in the asset number or external URL of the page you want to link to.	Example: Used when linking to different internal and external pages.
Dropdown list	Title with expandable content with max 5, 10 or 30 dropdown options. To be used when a small amount of additional information is required within lists.	Example: A list of projects with names and descriptions.
Featured boxes	Two large image boxes with a description and CTA.	Example: To be used to link to prominent relating pages.
Flickr album	Embedding a Flickr gallery into a page.	Example: When you want to break up a page of text or showcase any visual content.
Floating pod	Right hand pull out to draw attention to additional or important information.	Example: This can be used to draw out a key statistic in a case study or a CTA action.
Full Width Highlight	A full width highlight which includes a full width image, heading, description and a CTA field to link off to another asset.	Example: Used to show 'Our History' as a highlight.
Gecko Form Dropdown	This gecko form template requires a heading and a gecko form source which can be found under Forms > Share > Embed Your Form On a Website > click 'Get Alternative Code'.	Example: src="https://app.geckoform.com/public/ #/iframe/FOEU031boaQ2bBzV".
Icon Options	Select how many icons you need from the drop down menu. Click select to pick which icon you would like to display. Title and small text are optional. Contact Admin for new icons.	Example: Used to highlight key facts or as internal links.
Image Block	Use the asset number of the image you'd like to display.	Example: Use 80 width to showcase imagery and use 60 width to break up text and help tell a story.
Image dropdown list – 10	A dropdown list of up to 5 or 10, which includes a title, image, intro and then the main content when row drops down.	Example: Used when showcasing a team.
Image grid	There are 4 variations of this image grid. You can have 2, 3, 4 or 5 images side by side.	Example: Used in the brand toolkit to showcase our logo.
Image slider	Use to showcase a series of images. The size can be either 60 or 80 width.	Example: Use 80 width to showcase student work and 60 width to break up text content and to help tell a story.
Landing Boxes - 6	You can have up to 6 or 12 pods using this template. The pod displays the page thumbnail image and the page title.	Example: Used on landing pages, helping the user navigate to child pages.
Landing Page Slider	You can have up to 4 CTA slides linking to other pages. To add the image, go to the page you are linking to > Metadata and add in Landing.Subpage.Slider.Image, Landing.Subpage.Slider.Title, Landing.Subpage.Slider.Description.	Example: This can be used to highlight key courses for recruitment or pages relating to the page you are on.
Logo Carousel	Enter the logo/images you wish to use and also provide a URL for the logo to link to if clicked and also the ALT text for screen readers etc. Ideally make the images the same width (around 200px is best) so there is a smooth flow between transitions.	Example: This can be used when showcasing the partners we work with.
Step by step	A button which is positioned at the bottom right of the container. Can include text and where you want the button to link off to.	Example: Used for a 'next step' on UCAS applications.
Pod slider	A rotating carousel of asset links with title and description.	Example: This can be used to highlight relevant information. For example, news and events. It can also be an alternative to using lists. For example, equipment listings and product portfolio.
Research Biography	A biography field with space for a photo and link to RIS.	Example: To be used in research case studies.
Research RIS buttons	CTA buttons linking to RIS pages for Research Groups and Centres. To include RIS links only.	Example: To be used on research pages only.
Tabbed Content	When there is a lot of information that is related and doesn't justify needing to use another page.	Example: Used when providing information about different travel options.
Testimonial - Pod	A formatted container to make a quote stand out.	Example: This can be used to draw attention to a particular point or significant statement made by someone.
Testimonial slider	A formatted slider to make quotes stand out.	Example: This can be used to draw attention to a particular point or significant statement made by multiple people.
Video Block	Use when you want to embed a video from Vimeo.	Example: Used when a Vimeo video is required.
Video slider	Scrollable video embed slider. Paste the embed URL from YouTube or Vimeo.	Example: To embed from YouTube the URL would look like: https://www.youtube.com/embed/fHI8X4OXluQ. To embed from Vimeo the URL would look like https://player.vimeo.com/video/218771705.
Youtube - Responsive	A responsive Youtube template which requires the YouTube ID. eg: " 81UvmdVXdqI".	Example: This is used to embed YouTube videos on a page.

Course pages

Course pages act as a shop window to prospective students. They should be as exciting and informative as the courses themselves.

Course pages are the most important pages on our website. They help showcase the University's varied portfolio and unique selling points fuelling the aspirations of prospective students.

Editing course pages

Course pages are edited differently to other pages on the website as they rely on systems used throughout the University, for example the Student Record System. Access to the Course Marketing Module (also known as CMM) is limited to specified individuals and teams to ensure accuracy and consistency across our portfolio.

Different sections of a course page are owned by different departments across the University. For any changes to modules, programme specifications, application dates or course fees please refer to the contact details in our Service Agreement. You'll need to be logged in to access. Please note that the web team do not have permission to make these types of changes.

For sections of a course page highlighted red on the course page ownership diagram please email web support details of your course page amend.

New course pages

Requests for a new course page are made through the course content discovery form and sent to Marketing and Communications. The information you provide will be used to write the course page, so please provide as much detail as you can. Copy will be written in line with our style guide, tone of voice and accessibility guidance to ensure consistency.

Course pages are triaged based on their priority, depending on the point in the recruitment cycle. We aim to action requests as soon as possible. We'll collaborate with you throughout the writing process, please allow 3 weeks from submitting the form to your new course page being published.

Writing for the web

To write for the web, you need to speak to the reader directly. It must be personable and informative, yet concise.

Writing for the web involves crafting your content while considering the technical workings on websites. This guidance details how you can combine these skillsets to showcase the University's offering.

Writing style

Like all communication channels used by the University, writing on the website should follow our style guide and tone of voice guidance to ensure consistency.

However, there are certain stylistic features to remember when crafting textual content for the web.

To ensure your writing is successful for this platform:

✅ You should	⛔️ You should not
Keep pages of text short to avoid requiring users to scroll	Overload the user with information
Keep paragraphs short (around three to five lines of text) with each containing one main information point	Refer to other web pages on your site or the information they contain
Write objectively, rather than as a sales pitch as web users are generally looking for specific information	Be overtly promotional
Include a call-to-action (or CTA) or have information on what to do next (ie contact details) on each page	Be vague or abstract when using text links (eg 'click here')
Make sure each page is understandable by itself	Refer to information on other pages in your writing.
Put important information and action words at the beginning of sentences
Use meaningful words for text links (eg 'Read more about scholarships') so users know what to expect.

Structure

Structuring a webpage well can make a huge difference. It makes it easy for users to find what they're looking for. Plus, it increase our search engine rankings.

Here's how to create an effective webpage layout:

✅ You should	⛔️ You should not
Use clear headings and subheadings to break up information	Repeat information
Use page names which clearly describe and signpost what your page is about to users	Use bullets and numbered lists excessively
Front-load important information by starting with the information most important to your audience	Use heading and subheading formatting to make text appear a certain way.
Use the correct formatting options for headings, subheadings and paragraphs
Use bullets and numbered lists to break up ordered and unordered lists
Visually separate information using white space and multi-media assets (ie images and videos).

Search engine optimisation (SEO)

Good SEO not only enables a better user experience (UX) but it will also make your pages rank higher in search engine results.

This guide won't provide any secrets that will magically rank your pages first on Google results (sorry!), but following the best practices outlined below will make it easier for search engines to understand and prioritise your content.

What is SEO?

Simply put, Search Engine Optimisation (SEO for short) is the process of making your website better for search engines.

SEO is often about making small changes to parts of your web page. When viewed individually, these changes might seem like small incremental improvements, but when combined, they will have a noticeable impact on the user experience and performance in organic search results. You're most likely already familiar with many of the topics in this guide, because they are the usual ingredients that serve any web page, but you may not be making the most out of them.

This guide separates SEO into two sections, content and technical.

The content section will help in your day to day role when producing or editing web pages alongside our writing style guide. The Digital Team have already implemented the technical changes required for a great SEO rating, but this guide will still give you an overview so you can see how it all combines into one SEO package.

SEO for content editors

✅ You should	⛔️ You should not
Include appropriate LSI* keywords within the content that users would typically search for to find that page	Use heading and subheading formatting to make text appear a certain way
Use the correct formatting options for headings, subheadings and paragraphs. Headings should be used in the correct order	Make the page name too long. This automatically generates the page title which should not be greater than 80 characters in length
Include internal and external hyperlinks to relevant content	Open internal and external links in new windows as it hinders accessibility
Fill in the metadata description field which should accurately and concisely describe the content on the page with a max of 150 characters	Add images to the page without entering a descriptive ALT tag
Enter descriptive ALT tag descriptions for all images.	Add images that aren't optimised for the web. A data heavy image will increase page load time resulting in a lower SEO score
Make sure to link back to the web page from respected websites	Upload an image in the wrong dimensions. Adding a larger image than the max-width of the parent container can cause a negative score.
Regularly update the content to make sure it is relevant and up to date
Before making a page live, check for spelling mistakes and make sure all links work correctly
A correct use of font size throughout the site.

* LSI (Latent Semantic Indexing) keywords are conceptually related terms that search engines use to deeply understand content on a webpage. In the early days of SEO, Google and other search engines would figure out a page’s topic based 100% on the keywords they found on the page. But search engines are a lot smarter these days. Google will still scan your page to see if you use the term in your title tag, content, image alt text, etc. But it will also search your page for LSI keywords. As an example, if you sold iced coffee, LSI keywords could be 'filter', 'cold water', 'beans' etc. It is important to keep this in mind when creating content for the page.

SEO for developers

✅ A valid Sitemap listing all page URL's of the site, submitted to all relevant search engines.

✅ A valid robot.txt file listing what URL's search engines should crawl/not crawl.

✅ Make sure the website has the correct meta tags in the head of the page such as the description and the viewport.

✅ HTTPS - use a secure http(s) connection.

✅ An easy to use URL structure with words that are relevant to your site's content and structure.

✅ A valid title tag that reads naturally and effectively communicates the topic of the page's content.

✅ A fully mobile responsive design.

✅ No use of Flash throughout the site.

✅ The page load speed is quick and optimised.

Related Guidance

Style guide Tone of voice Top 10 writing tips

Get in touch

If you have any questions please contact a member of the team:

Contact	Email
Web and Digital team, Marketing and Communications	websupport@herts.ac.uk
Jak Kimsey, Head of Digital and Creative Experience (he/him)	j.kimsey1@herts.ac.uk
Marketing and Communications Business Support	marketinguh@herts.ac.uk