{"id":3295,"date":"2018-05-17T17:00:12","date_gmt":"2018-05-17T16:00:12","guid":{"rendered":"https:\/\/blogs.kent.ac.uk\/webdev\/?p=3295"},"modified":"2018-07-20T16:19:44","modified_gmt":"2018-07-20T15:19:44","slug":"seo-for-designers-and-content-creators","status":"publish","type":"post","link":"https:\/\/blogs.kent.ac.uk\/webdev\/2018\/05\/17\/seo-for-designers-and-content-creators\/","title":{"rendered":"SEO for designers and content creators"},"content":{"rendered":"<p class=\"lead\">SEO has had a tricky past. Search engines like Google have always tried to evaluate websites in the same ways as humans. It\u2019s just that they were relatively simplistic, and could be tricked to try to get a website higher up the rankings. Things have matured a lot in recent years, and good SEO is about good user experience. If a website works for people, it\u2019ll do better in Google\u2019s rankings.<\/p>\n<p>This blog post shows how designers and content creators can improve the usability and visibility of their pages. A lot of this blog post is inspired by <a href=\"https:\/\/www.smashingmagazine.com\/2018\/05\/things-designers-should-know-about-seo-2018\/\">Myriam Jessier\u2019s excellent Smashing Magazine article on SEO<\/a>.<\/p>\n<p>Key themes:<\/p>\n<ul>\n<li>Mobile first is best for Google.<\/li>\n<li>Think about user intent and micro-moments.<\/li>\n<li>Create a clear content structure.<\/li>\n<li>Don\u2019t be afraid about writing lots of text (just break it up with images and keep in mind why people might want to continue scrolling).<\/li>\n<li>Descriptive internal linking is important.<\/li>\n<li>Use images alt text, and optimise image size.<\/li>\n<li>Think about voice search.<\/li>\n<\/ul>\n<h2>Mobile first<\/h2>\n<p>Google has started focusing on mobile sites as a <a href=\"https:\/\/webmasters.googleblog.com\/2018\/03\/rolling-out-mobile-first-indexing.html\">primary means of indexing<\/a>. They\u2019ve only just begun this process so there\u2019s no need for immediate panic. But the message is clear: eventually Google will see your website as if it were using a phone.<\/p>\n<p>Kent\u2019s new design is <a href=\"https:\/\/alistapart.com\/article\/responsive-web-design\"><em>responsive<\/em><\/a>: it works as well on mobile devices as it does on large screens. Each part of the Kent website will become responsive as it moves over to the new theme. So we\u2019ll be covered by Google\u2019s new way of seeing sites.<\/p>\n<p>Our <em>content<\/em> also needs to be mobile-friendly. We need to stop thinking about ourselves, and start thinking about who\u2019s viewing our pages and why they\u2019re looking at it.<\/p>\n<ul>\n<li><strong>Avoid a big wall of text<\/strong>. Content should be interesting enough that people will want to scroll to find out more. A big wall of text puts people off.<\/li>\n<li><strong>Don\u2019t think just in terms of text<\/strong>. Videos work well on mobile and can do far more than lots of text, depending on what you\u2019re trying to say.<\/li>\n<li><strong>Keep your headlines short<\/strong>. You need to convince people to click on links and continue reading.<\/li>\n<li><strong>Each page should have a primary goal<\/strong>. Everything on the page should help someone get to that goal in a way that makes sense to them. Don\u2019t ramble.<\/li>\n<\/ul>\n<h2>User intent and micro-moments<\/h2>\n<p>We need to think about user intent because that way we can find out about the what our users want to do. What immediate problems are they trying to solve?<\/p>\n<p>Google\u2019s content marketing team &#8211; <em>Think with Google &#8211;<\/em> uses the concept of <a href=\"https:\/\/www.thinkwithgoogle.com\/marketing-resources\/micro-moments\/\">micro-moments<\/a> to focus on user intent. Micro-moments describe all the many times every day someone searches for something online because they have an immediate information need.<\/p>\n<p>These might be moments like finding a good local restaurant for lunch, or finding reviews about an espresso machine for your new kitchen. All these moments might be part of a bigger goal &#8211; which perhaps ends up with some kind of purchase &#8211; but people might not be totally clear what that goal is or what they\u2019re looking for at each moment. It depends where they\u2019re at.<\/p>\n<p><a href=\"https:\/\/answerthepublic.com\/\">Answer The Public<\/a> is a great way to see what search terms people are using on Google. It can help you work out what people are really trying to do when they search for something. You can try to tailor your content to match the sorts of questions people generally have.<\/p>\n<h2>Content structure<\/h2>\n<p>The easier content structure is to understand &#8211; and the better it relates to common user goals &#8211; the better pages will rank in search results.<\/p>\n<p>In HTML we give structure to a page with heading tags (H1 to H6). We should use primarily H1, H2, and H3 tags to help a search bot on a path through our content.<\/p>\n<p>It\u2019s best to avoid giving false prominence to generic page headings and menus. A search bot might think your \u2018about us\u2019 heading is important on a page about a French degree because it\u2019s listed prominently with a heading tag.<\/p>\n<p>It will probably only be important when someone is researching the organisation generally, so it could be made more prominent on the homepage. People searching for entry requirements for a degree in French won\u2019t be expecting to see anything to do with \u2018about us\u2019.<\/p>\n<p>We use tools like <a href=\"http:\/\/wave.webaim.org\">WAVE<\/a> to help check document structure in our templates. This means the key thing left for our content authors to do is think about what section titles to give to their own content. Section titles should be descriptive, and should be used fairly often to help guide the user through the content.<\/p>\n<h2>Long-form content<\/h2>\n<p>Long-form web content is text in the region of 2000 words long. The blogging platform <a href=\"https:\/\/medium.com\">Medium<\/a> found that of all the blog posts on their site, those with <a href=\"https:\/\/medium.com\/data-lab\/the-optimal-post-is-7-minutes-74b9f41509b\">a reading time of 7 minutes were most popular<\/a>. Longer text tends to mean pages rank higher, and users engage with it better.<\/p>\n<p><a href=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2018\/05\/16nX_PYNpn0Ajc0tardzIkg.png\"><img loading=\"lazy\" width=\"700\" height=\"500\" class=\"size-full wp-image-3299\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2018\/05\/16nX_PYNpn0Ajc0tardzIkg.png\" alt=\"Graph showing a great length for blog posts is about 7 minutes reading time\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2018\/05\/16nX_PYNpn0Ajc0tardzIkg.png 700w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2018\/05\/16nX_PYNpn0Ajc0tardzIkg-300x214.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>This doesn\u2019t mean writing long pages is a silver bullet. It means a good story is a good story, and the writer has the luxury of a couple of thousand words (and some good pictures) to flesh it out. In a world of social media and quick blasts of information, people appreciate a deeper analysis of a topic.<\/p>\n<p>Of course not all pages need be so long. It depends what your user intent is. A couple of paragraphs and key links to further reading might be all people need in that instance (for example a quick diagnosis of the signs of chickenpox in your child on a medical website).<\/p>\n<p>Pages therefore need to be engaging and the design and layout need to encourage people to keep scrolling:<\/p>\n<ul>\n<li>white space helps make content easier to read and scan (our designs deliberately give space for content to breathe).<\/li>\n<li>use images at key points in the narrative to keep interest.<\/li>\n<li>use clear typography, milestones and headings.<\/li>\n<\/ul>\n<h2>Page meta information: title, description, URL<\/h2>\n<h3>Titles<\/h3>\n<p>Probably one of the first things you do when you search is scan quickly down the first page of results, looking at the titles. Do any of them match the kinds of things you were looking for?<\/p>\n<p>The page title is the first thing a user sees in the search results. It\u2019s your shop sign. It helps Google determine your page\u2019s topic.<\/p>\n<p>If you\u2019re searching for French degrees at a university, you\u2019ll likely be expecting titles like \u2018Study French BA\u2019 and not \u2018Modern languages\u2019. You\u2019re more likely to click on the link with a useful-looking title.<\/p>\n<h3>Description<\/h3>\n<p>If a title is your shop sign, a page description is your sales pitch. It\u2019s the chance you have to tell people in a few words what your page is about. Does it match what they\u2019re trying to find out or get done right at this moment?<\/p>\n<p>Google <em>may<\/em> use your description on its results page, although often Google uses its own techniques to work out a description from your page content.<\/p>\n<p>Still, entering a good description is important in case Google does use it. It\u2019s a good idea to write a description anyway because it makes you focus on who the page is for, what the page is about, and what kinds of things people will be trying to achieve when they go to it.<\/p>\n<h3>URL<\/h3>\n<p>Your <a href=\"https:\/\/moz.com\/blog\/15-seo-best-practices-for-structuring-urls\">URL is important<\/a> because Google shows it in search results. Someone scanning through search results may look at the URL to work out if your page is likely to be useful to them.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2018\/05\/54daf2683e1285.94585673.gif\"><img loading=\"lazy\" width=\"650\" height=\"535\" class=\"wp-image-3296 size-full\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2018\/05\/54daf2683e1285.94585673.gif\" alt=\"Figure describing why human-friendly URLs are better than more complicated URLs\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>A good URL is also useful outside search engines. People may copy and paste the link on social media, or just notice the URL in a link on another web page.<\/p>\n<p>Try to make your URL relevant to the topic of the page. Use relevant keywords. Our new CMS generates the URL based off the title you give the page, but publishers have to option to override this.<\/p>\n<h2>Internal linking<\/h2>\n<p>Generally links in a piece of content are better than links in footers or sidebars. They\u2019re highly contextual and have more weight for users and search engines.<\/p>\n<p>Always be descriptive when you choose link text. Avoid things like \u201cread more\u201d and \u201cclick here\u201d. They don\u2019t tell anyone &#8211; including Google search bots &#8211; what the link is about. It\u2019s like labelling a big red button in a car \u2018press here\u2019 and hoping people will be able to figure out what it does.<\/p>\n<p>Of course links in text may not stand out, so important call-to-action links can be shown in callout boxes or buttons. Our new designs allow content creators to do this easily, in the flow of text.<\/p>\n<h2 id=\"images\">Images<\/h2>\n<p>Your choice of image can be crucial for user engagement. As far as Google are concerned there are three really important things about images:<\/p>\n<ol>\n<li><strong>Image title<\/strong>. You have a page promoting a French degree course. You\u2019ve worked hard getting the page title and description right, great text, and a nice image. But you name the image \u2018IMG001234.jpg\u2019. Google won\u2019t know that \u2018IMG001234.jpg\u2019 has anything to do with French degree courses. But if you\u2019d named the image \u2018french-degree-kent-university.jpg\u2019 Google will have a much better idea.<\/li>\n<li><strong>Alt text<\/strong>. This is a description about an image hidden in the HTML which most people never see. One of its primary uses is to help blind people using screenreader technology. They can hear the description being read by their screenreader. Google also uses it to index an image properly. Well-written alt text will help people find your page based on an image search, and it\u2019ll help people who can\u2019t see your image at all.<\/li>\n<li><strong>Image filesize<\/strong>. Smaller images load faster. This makes your page load faster, so is better for users. It\u2019s also something Google pays particular attention to. Our website will load smaller images where needed (on a mobile device), and bigger images on desktops. It also loads images progressively, which means it loads a very low quality image first, then the normal quality one. If you\u2019re interested you can read more about how the blogging site <a href=\"https:\/\/jmperezperez.com\/medium-image-progressive-loading-placeholder\/\">Medium does progressive image loading<\/a>.<\/li>\n<\/ol>\n<h2>Accessibility is for everyone<\/h2>\n<p><a href=\"https:\/\/4.bp.blogspot.com\/-lxYdOZ6knwI\/VD2RJ8udfOI\/AAAAAAAAPeM\/XfQGUOTCF24\/s1600\/Voice1-p01.jpg\">Over 55% of teens and 41% of adults<\/a> use voice search. This is a very recent trend, but I find it incredibly interesting.<\/p>\n<p><a href=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2018\/05\/Voice1-p01.jpg\"><img loading=\"lazy\" width=\"300\" height=\"298\" class=\"aligncenter wp-image-3298 size-medium\" src=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2018\/05\/Voice1-p01-300x298.jpg\" alt=\"image showing 55% of teens and 41% of adults use voice search more than once a day\" srcset=\"https:\/\/blogs.kent.ac.uk\/webdev\/files\/2018\/05\/Voice1-p01-300x298.jpg 300w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2018\/05\/Voice1-p01-150x150.jpg 150w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2018\/05\/Voice1-p01-768x762.jpg 768w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2018\/05\/Voice1-p01-1024x1016.jpg 1024w, https:\/\/blogs.kent.ac.uk\/webdev\/files\/2018\/05\/Voice1-p01.jpg 1600w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Web designers tend to think that the non-visual element of their websites is for people with accessibility needs using screen readers. Accessibility was wrongly seen as an add-on for a small percentage of users.<\/p>\n<p>Now increasingly we\u2019re seeing people ask Alexa or Google Home for information. It gets read out to them. Accessibility is for everyone, because everyone accesses web content in different ways.<\/p>\n<p>Does our content work well in this way? Is it likely that anyone will ever find it by voice search alone? Are we conveying key information in clear, concise ways that lend themselves to voice search? This is clearly an emerging area and one which will be really interesting to see evolve.<\/p>\n<h2>Summary<\/h2>\n<ul>\n<li>Google is about to start indexing and ranking websites based on a mobile rather than desktop experience. Designers have been chanting the mobile-first mantra for years. Now it starts to get more real. Our new designs are mobile-friendly.<\/li>\n<li>Craft content based on user intent and what Google call \u2018micro-moments\u2019.<\/li>\n<li>A clearly understandable content structure which reflects user intent is going to help your rankings. We try to make sure that page headings always follow a clear path through the relevant content.<\/li>\n<li>Clear and well-written internal links tell users and Google what your most valued pages are.<\/li>\n<li>Images need some love. High-impact, attractive images help keep people scrolling and engaged with your message. Good image alt descriptions help users and Google alike in image searches. Smaller images load faster. Your users will love you, as will Google. Our new theme will optimise images, and force you to think about alt descriptions.<\/li>\n<li>Voice search is becoming more of a thing. Increasing numbers of people will never access your pages visually. We\u2019ve tried hard to make our pages work well in terms of accessibility, although making text easy to understand and listen to is no small task on a large website such as ours.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>SEO has had a tricky past. Search engines like Google have always tried to evaluate websites in the same ways as humans. It\u2019s just that they were relatively simplistic, and could be tricked to try to get a website higher up the rankings. Things have matured a lot in recent years, and good SEO is about good user experience. If a website works for people, it\u2019ll do better in Google\u2019s rankings.<\/p>\n","protected":false},"author":2,"featured_media":3301,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[79395],"tags":[79464,521,998,23153],"_links":{"self":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/3295"}],"collection":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/comments?post=3295"}],"version-history":[{"count":7,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/3295\/revisions"}],"predecessor-version":[{"id":3307,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/3295\/revisions\/3307"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media\/3301"}],"wp:attachment":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media?parent=3295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/categories?post=3295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/tags?post=3295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}