https://insidegovuk.blog.gov.uk/2013/11/08/gov-uk-blogs-style-guide/

GOV.UK blogs: the user manual

We’ve published updated guidance about blogging on GOV.UK. Please go to the new guidance pages to find out how to request a new blog and how to manage a blog. You may also find it useful to read the Government Digital Service (GDS) style guide.

This guide covers points of style on the GOV.UK blogging platform. It should be read alongside our guidance on good blogging practices and our guidance on blogging on GOV.UK.

Tone of voice and style

Write like you speak. And always write as an individual - not as an organisation, or a team.

Use plain English. Government jargon is an instant turnoff for blog users, and will get in the way of your communication. (see words to avoid).

Follow the GOV.UK points of style for acronyms, abbreviations, spelling, capitalisation, dates etc.

And of course follow the basic rules of writing for the web - short sentences, 1 idea per paragraph and subheads to help users scan the text.

Titles and introductions

Keep page titles to 65 characters or fewer, to help sharing via Twitter and so that Google displays the whole title.

Make titles as specific as possible, so that readers scanning your homepage will understand the point of each post at a glance.

The first 40 words of your blogpost will be displayed on your blog homepage, and will be contained in the update emails sent to your blog subscribers. To maximise clickthroughs, introductions should summarise the issue that the blogpost is dealing with, and outline what the post will offer.

Headings, subheads and callouts

Click on the image at the bottom right to find the dropdown headings menu
Click on the image at the bottom right to find the dropdown headings menu

Use <h2> in WordPress for primary subheads.

Use  <h3> for secondary subheads (you may need to go into edit mode to see these options - see image).

To highlight something without pulling in quotes, edit the HTML to read "blockquote class=”noquotes”.

Like this!

Images

Image formats

For photos, use .jpg or .jpeg format.

For charts, graphs, graphics etc, using .png format usually gives much clearer results.

Image sizes

If you feature an image on your blog homepage it must be 620 pixels wide x 410 pixels high.

Within blogposts, as a general rule it’s okay to vary the height  of images, but:

  • main or featured images should be 620 pixels wide

  • secondary images should be 310 pixels wide

You can edit pictures to these dimensions using free tools such as pixlr.com if you don’t have graphics editing software.

Alignment and titles

Left align all full-width images (you can do this in the ‘image properties’ box when you click on the image in WordPress).

 All images that convey information, and all screenshots, should have a title (doing this will also automatically make a frame for your image).

All images should have ALT text.

Image selection and attribution

Follow our guidance on choosing the right images for homepages- they apply to blogs too. Wherever possible, use images that you or other people in your team have taken.

 If you’re struggling to find good images, look for creative commons images on http://compfight.com or advanced search on Flickr.

Embedding YouTube and social media

Embedding the following types of content in your blogpost is easy.

Just paste the page URL of the content you want to embed into a separate line on your WYSIWYG WordPress editor. (Note: make sure it's not formatted as a clickable link).

For example, to publish the below video I just pasted the YouTube page URL (http://www.youtube.com/watch?v=kvVaUBEibXo) on a separate line.

  • YouTube
  • CoverItLive
  • Storify
  • Vimeo
  • Instagram
  • Flickr
  • Speakerdeck
  • Vine
  • Audioboo

Pro tip. Embedding the following things into your blogpost is possible, but needs a few special instructions:

  • Slideshare: "edit post" and then "update" after you've pasted the URL, because the embed codes only get updated when you save a post
  • Instagram: to use Instagram videos, use embed.ly. Paste the url of the video, and copy the embed code into the 'text' tab of the WordPress editor (not the 'visual' tab).
  • Google maps: use the embed code: (open square bracket)map src="EMBED_URL"(close square bracket)
  • Tableau: use the embed code: (open square bracket)tableau src="EMBED_URL"(close square bracket). Use the first URL you find when you generate an embed code on the tableau page - it should look something like: https://public.tableausoftware.com/shared/82SBZZF8M?:display_count=no

Author profiles and guest authors 

Blogposts must display the full author name (eg Graham Francis), not their username (grahamfrancis). To fix this, edit the user profile.

All authors should also have a sentence or 2 about them on their profile page.

Create a Guest Author to attribute posts to anyone who’s not input the text themselves. Posts can have more than 1 author / guest author.

Images for authors

 All authors should have an image. You can do this in 2 ways:

  • if you’re posting under your own name, sign up to Gravatar to create a profile image

  • for guest authors, you can upload a profile picture. This should be 150x150

Templates and page layout

About this blog

The top box right-hand box should give readers some information about your blog and who it’s for (like this blog does).

Categories and tags

Capitalise the first letter of any categories and tags (eg. ‘Agile’, not ‘agile’).

Use categories as your primary navigation. Try to keep to fewer than 10 categories - otherwise they can become unwieldy.

It can help to add some text to category pages themselves, introducing what the category is about. We can show you how to do this.

Only tag if absolutely necessary (eg if there is a user need to group more than one post via tags), and if you do, minimise the number of tags. Oh, and tag clouds are horrible. Don’t use them.

Signing off blogposts

At the end of every blogpost, include

  • A call to action to follow the blog by email
  • A call to action to follow the blog author on Twitter
  • Related posts (which you can input using the 'related posts' box on the blogpost input page)

There's an example here.

Footnotes

You can do footnotes.  1

Organisation logos

If absolutely necessary (in most cases, they're not) these can be added to the right-hand side of your masthead. Size them at 370x100. Add them in Appearance / Logo Options.

Twitter feeds

Create live Twitter feeds as follows:

Social media links

To get social media icons (Twitter, Facebook etc) in the right hand column (e.g. on the DfID blog):

  • create a new custom menu called 'Follow us'
  • add custom links to the social media you have (we have icons for Twitter, Facebook, YouTube, Flickr, Google+, Foursquare, LinkedIn and Pinterest), and save it.
  • go to widgets and drag “Custom Menu” into “Universal sidebar”. Choose the “Follow us” menu.
  • add a widget title, e.g. Follow us on social media

Twitter cards

GOV.UK blogs support Twitter cards. For this to work, you need to register your blog with Twitter.

The Twitter Cards plugin has a separate tab in dashboard menu where you can edit different options. These are the ones that should be changed:
  • General - update creator and site Twitter usernames
  • General - you can change the style of cards (more about styles on Twitter documentation page: https://dev.twitter.com/docs/cards)
  • Images - change generic Twitter logo to either organisation logo or GOV.UK and update image size
There is also an option in Custom fields where you can change the default WordPress site username and description. This will only affect the Twitter title and descriptions meta data and not the default page tags. However, on the single blog post Twitter meta data will have the post title and firth sentence as description.
You have a preview of Twitter cards when you are editing a post. You can also change some settings there, like card image.

Analytics

Every blog we create gets a dedicated Google Analytics dashboard.

You need to have a Work (not personal) email address registered with Google Analytics to  access the dashboard - sign up here.

Support and contact

If you need help using WordPress, see the WordPress official user guide or WordPress Made Simple.

To ask us to do stuff for you, then raise a request in Zendesk.

Or use the comments box below to suggest additions/amends to this guide. (NB in time we'll be migrating this to the main style guide).

Footnotes

  • 1. To do footnotes, use the following code - replacing round brackets with square brackets. (footnote id="1") Text of footnote (/footnote) 

1 comment

  1. Comment by Graham Lee posted on

    Hi Graham,

    This is really useful stuff.

    Can this and the blog style guidelines and style guide be signposted from the dashboards for each of the GOV.UK blogs? A similar thing works pretty well for the 'Whitehall' Publisher.

    Thanks,

    Graham