Join Dani Beaumont for an in-depth discussion in this video SEO optimization, part of Muse Essential Training.
- Well now that all of the page content is in place, I'd like to focus on a few finishing touches to improve search engine optimization, or SEO for the site. If I go the live finished site, I've added something known as a favicon. And it's an icon that shows up in a tab of the browser. It's a professional way to finish out the site. There's something else I've done here. Notice that this is the home page. If I click on the preparation page, the title of the page says Preparation, but it also restates the name of the company, the name of the product, Matcha Goodness.
This best practices for search engine optimization. Search engines like when you restate the name of the company in your page name. It'll help in searching for your company, your product. So let me show you how you can go about adding that within Adobe Muse. So back within the Muse application, what I want to do is pull down under File, to Site Properties. And in the Site Properties window, this may seem somewhat familiar to you, we came in and defined the size of the page and such.
Clicking on the content tab, this is another way to access the hyperlink styles that we defined with those different states for those link styles. In this same tab, in the lower right-hand corner, you'll see something called Favicon Image. Now I'm going to go out to the browser real quick, and go to our exercises folder. What you'll notice here is I've given you a .png file, so an image file. It's set with a transparent background, so the background is actually transparent. It's not white.
Basically the rule here is it's an image file that's square. It's perfectly square. It can be 64x64. It can be 16x16. It can be 200x200. But make sure that it's transparent and that it is an image file and that it's square. And saved out as .png. Also important. When you have that icon file created, what you want to do is come to the favicon area here, click on the folder icon, and go ahead and browse for that file, and click open.
That favicon will now appear in the tabbed panel on all pages. Now if you want to be really fancy, you can apply that not necessarily at a site property level, but you can do it on per page level if you'd like. So that each page in your site has a unique favicon. Consider that a bonus. Another thing that you can do is affect the page names that you work with. I'm going to come to the master page here, and right click to select page properties.
And notice here I've got metadata options. This is important. HTML for the head, if you are of the coder bent, or if you work with someone who is of the coder bent, it is possible to put HTML in the head of a site. It's also possible to embed HTML using an embed feature. We're not going to touch on it in this essentials course, but it is something you're able to do on a per page basis, a per master page basis. And you're able to add that here.
You can also add what's known as a prefix and a suffix. What I want to do is add that name Matcha Goodness, but I'm going to be a bit tricky about it. I'm going to hit the space bar, and then I'm going to hit shift. I don't even know what this is called, but it's a separator thing. I'm going to hit the space bar. I'm going to put Matcha Goodness. And I'll click OK. Now when I come to an individual page, if I right click on that page and bring up page properties.
Notice I can come in add some SEO details. If you don't know anything about SEO, there are some terrific search engine optimization beginner for graphic designers, things of that sort out there on the web. There are lots of tips and tricks about how to add a description on each of your individual pages to increase the searchability or the findability of your page. Keywords, there's a lot of different opinions whether or not keywords matter, but you can learn about that in the world of SEO.
And here's where you can add HTMl in the head of an individual page. I can also come into the options tab here, and notice that I have control over the name. This is something you may want to experiment with. But you can come in and have the name in your site. It may say Home. That may be what I name it. But in the browser, the title might say Welcome to the Home of Terrific Tea. Something else. You can change what your name is as compared to the name in the browser by unchecking this box and making it different.
Muse is going to require that the file name of your landing page always be Index. So you can't override that on this first page, but you can on other pages. Notice this is where I can vary out that favicon as well. So you can continue to have different names in the title if you'd like. We've done that suffix that we want to take a look at now. So I'm just going to hit cancel for the moment. And pull down again on File. Let's go ahead and preview just one page in the browser.
I'll come on into the preparation page. I kind of want to prove this to you. File, Preview Page in browser. And I don't want to really render the whole site. Here we are on that preparation page. Notice I now have an icon here. And I have the work Preparation with a space, the heavy separator bar and Matcha Goodness.
- Creating a site plan
- Working with master pages
- Adding elements from CC Libraries to master pages
- Adding web fonts
- Creating and overriding text styles
- Placing images
- Working with image blocks and hyperlinks
- Configuring slideshows
- Adding new sections
- Creating a contact form
- Adding breakpoints
- Creating a responsive master page
- Publishing and exporting your Muse site