Join Steve Harris for an in-depth discussion in this video Best practices for search engine optimization, part of Designing a Portfolio Website with Muse (2012).
Search Engine Optimization is a key part of marketing your site on the web and by following a few simple guidelines you can ensure that your Muse site is easily indexed and recognized by Google or any other search engine that you use. The first and most important aspect of SEO is to write high quality, keyword rich text that can be used throughout the site. You can see on our Red 30 site here, we've included words such as Website Design, Branding and identity design. These are words that we might want to come up on Google for potential searches, so it's good to include them in the content on your site.
Next, we need to make sure that this text is actual real HTML text. If we highlight a block of it, click into our Text dropdown here, and look at the Fonts we're using, we need to make sure that we're not using the fonts that say "System Fonts (exports as image)". If we select one of these fonts, you can see that the small image icon appears in the bottom right of this box. And what this means is that Muse is going to output this text as an image or create an image from it. If the text on your site is contained in an image, Google is not going to be able to read it, and that's going to really hurt your SEO efforts.
So just make sure you're using real text throughout your site, for everything from menus, to buttons, and headings. With Web Fonts now included in Muse, there is almost no reason to not use real text for any aspect of the site. The next thing we need to look at is our site's metadata. By going up to our Page>Page Properties box, and then clicking the Metadata tab in the top, we can see a few options here. If we mouse over any of the titles in this box, Muse will bring up a description of what they all mean, but I'll give you a quick explanation right now.
In the Description box we need to include a brief description of the particular page on our site. If we click into Firefox and type a company name in Google, such as visual arms, you can see that we get the listing in this format; we have a title here; and then we have this description down below. Now, this is actually the description that I included in this Meta Description box on my site, so you can see how powerful it can be on Google. The next option is the Keywords box. This is somewhere that we can include a couple of different keywords that might be related to our site.
So we might want to include something like website design, branding & identity, etcetera. You can just separate those with a comma. Now, stuffing the keywords box full of a thousand keywords really isn't going to help your ranking, so I'd recommend you just include a couple of really important ones. The HTML for <head> section is where we can embed things like Google Analytics or other additional code snippets; we're not going to be using that for SEO. Lastly, we've got our Page Name and our Page Title. While these may appear to be the same, they're definitely not.
The Page Name is what Muse is actually calling this page in our site Plan view, so that's what we entered in our Plan view. The Page Title however is what's going to show up in the top of our browser window. If we jump back to Firefox, we can see that the title here is what I've entered for the Page Title, and if we click into this link, you can see at the top of the browser window that Visual Arms | Calgary Graphic Design by Steve Harris is the actual title of the page. If we go back to Muse, we need to uncheck this, Same as Page Name option, and we can enter a Title for our page; let's just call this Website Design by Red 30 and click OK.
Now when we export this site, that page is going to have a much more descriptive name and Google is going to understand what you're including on it. Next, we need to talk about Headings. This heading here that says "Thanks for stopping by!" uses a style called Heading 1, that's what we've named it. However, if we select Heading 1 by double- clicking on it, we can see that the Style Options dialog tells us it's mapped to a Paragraph Tag, and in this case it's mapped to the h1 tag. This is the right way to do it. If for example, this name was mapped to the default or a Paragraph Tag, Google wouldn't know that this was a prominent heading.
So mapping styles appropriately is really important for search engines to understand how your site fits together and the hierarchy of all of the information. Lastly, we need to talk about images. If we click on this banner image that we've included above and look into our Assets panel on the right, we can see that that image is selected. If we right-click on the image and click onto Edit Image Properties, we have a few blank boxes here that we'll need to fill in. First of all, we have our Tooltip. Your Tooltip can basically be thought of as the title for your image, so we might just want to call this The Main Dish Banner.
The Alternative Text is a description of the image. This might be used on users who are visually impaired and can't actually see the image and need to read what the image is all about. So here we want to write a more extensive description of what this is going to be. So this might say something like photo of the menu for the main dish, scan to view our menu online, etcetera. Once these are filled in, try and repeat this throughout all the images on your site. Search Engine Optimization is an ongoing process and you should always be working to improve the quality of your Meta descriptions, your page titles, and your site content.
Just remember that nothing improves the ranking of a website better than quality content that's updated regularly. You can't fool Google by stuffing your site full of hidden keywords or text. If you could, it wouldn't return quality results and nobody would use it as a search engine. If you want your site to rank high for a particular keyword, you should focus on making sure that it truly deserves to be there.
- Planning the site with a wireframe
- Creating master pages
- Building and placing graphics from Photoshop, Illustrator, or InDesign
- Creating buttons and button states
- Adding a header, footer, and navigation widget
- Creating a slideshow
- Setting up a contact form
- Publishing to a third-party hosting solution
- Tracking site traffic with Google Analytics
Skill Level Intermediate
Q: This course was updated on 7/24/2013. What changed?
A: We added new movies on mobile and tablet layouts, the new sticky footer, working with a content management system (CMS), the Layers panel, and the Scroll Motion effect, which allows for parallax scrolling.