Mac SEO Blog

Our popular tool MapDesign allows users to create images with certain areas, or hotspots, that when clicked will take the user to different destinations (links). Check out this tutorial for adding an image map to an iWeb website. Make your iWeb site even more professional with image maps made in MapDesign

Video Transcript:

In this tutorial, I’m going to show you how to create an image map, and embed it on your iWeb website. If you are not familiar with image maps, imagine that you have an image on your site that allows users to be able to click on different areas of the image and be taken to different pages.

I’m going to show you how you can easily make an image map, and place it on your website in iWeb using RAGE Software’s MapDesign.

So the first thing we need to do, is drag and drop our image onto the MapDesign canvas.

Next, we can draw the link areas around certain sections of our image. These are known as hotspots.

On the left hand side, we will see all of the different hotspot locations that we just created. For organizational purposes, we can re-name these hotspots so we know where each one belongs to. Now comes the important part. We must link these hotspots so that when our users hover over them with their mouse, they will be able to click the hotspots to be taken to the page that we linked to.

We can do this by pressing the Edit button, which will bring up the Inspector window. In the Link To text box on the Behavior tab, type in the the URL that you want this particular hotspot to link to. You can also give some alternate text if you’d like. I also want you to check off the Open In New Window option. Don’t forget this step, otherwise it won’t work correctly.

When you are all done linking all of your hotspots, we must then press the Export To Web Site button. In this popup window, make sure that Simple Image Map is selected, and then press Next and save your image to a location on your hard drive that you won’t forget. I am saving mine to my Desktop. You will see that once I save it, I will have an index.html file, as well as an images folder.

Now, open up your web browser, and go to www.imageshack.com

Press the browse button and locate the image that you just saved. It should have the exact same name as the image you see on my screen which is rage_css_imagemap.jpg. Highlight the image, and then press Open. Then press the Upload Now button.

Once your image has been uploaded, you will then need to copy the URL in the Link text field. Paste the link in your address bar, and hit enter or return.

Next, hover your mouse over your image, and do a secondary, or right click and select Copy Image Location. Then paste that URL in your address bar and hit enter or return. Now just double check that only your image is shown using this address. If it is, proceed to the next step.

Locate the index.html file and open it in an HTML editor. I am using RAGE Software’s WebDesign.

Locate the code for the image which will read images/rage_css_imagemap.jpg.

Highlight the text within the quotation marks, just like I am doing here. Press the delete key, and then paste the URL that we had copied from the previous step.

Next, highlight all of the code located within the body tags, and copy it. Next, open up your site in iWeb, and drag an HTML Snippet onto the page. Paste the code that we just copied.

You should be able to see your image, and you will be able to move your image wherever you want on your page

Your image map is now complete, and when you publish your site, you will be able to test your image map by clicking on the hotspots you created.

SEIntelligence allows you to add analytical codes such as Statcounter.com and Google Analytics using the Site Settings feature. The tutorial below will show you where you need to go to get these codes and where in the Site Settings section to paste them.

Video Transcript:

A great feature of SEIntelligence is the ability to add codes such as Google Analytics and Statcounter to a website. This is done by clicking on the Site Settings button, followed by the Header & Footer Code tab. You would then paste the code, or codes into the header code box, or the footer code box.

So which codes do we recommend you paste into these boxes, and where do you obtain them from?

We recommend placing a Google Analytics code in the header code box, and a Statcounter code in the footer code box. Let’s go get those codes.

Go to google.com/analytics. You will need to have an Analytics account, so if you do not already have one, click on the SIgn Up Now button. Otherwise, click on the button to continue.

Now I’m not going to go through the process of obtaining the code by filling out the short forms as Google changes their interface quite often. So to avoid confusion, I am just going to get to the last step which has the code generated for me. Generating the code will be pretty easy for you. If you get lost, just look for a button that says New Account as that will usually lead you to the form for generating the code.

So when you see the code, highlight the entire code and copy it. Then go to the Site Settings window in SEIntelligence, and paste it in the Header code/Google Analytics box that we mentioned earlier in the video. Then click the Apply to Entire Site button, which will stick the code on every page of your site.

Now, go to statcoutner.com and either sign up for an account, or login with your existing account if you have one.

Once logged in, you should see a link that says Add Project. Click on that link. Fill out the information that is required. When you get to a section that asks you about a counter or a button, select the option for Invisible Tracking. This will make it so that the code generated does not include a hit coutner that would appear on your website.

You can select your preference for being emailed reports, and then click on the Add Project button. On the next page, click on the link for Default Installation Guide. Now highlight the code in in the Standard tab, and copy it. Now go back to SEIntelligence, and paste this code in the footer code box, and click on the Apply To Entire Site button.

When you publish your site, these codes will have been added. Keep in mind that it may take a few days to begin seeing anything in your Google Analytics account, but you should be able to see activity in Statcounter right away.

Do you want to create an online subscription form and send out newsletters to your website visitors?

MailShoot 2.5, our fully featured email newsletter software lets you quickly and easily create a double opt-in online subscription form to collect your visitors email addresses. Then it lets you send our personalized and targeted emails to your potential customers. No technical skills are required.

MailShoot 2.5 provides an all new user interface which makes it much easier to create and send out newsletters. It also fixes a number of bugs and provides some small improvements to various features.

Download MailShoot and try it on your website for free.

After you have made your optimizations in SEIntelligence, you may eventually go back to your website to make an update. Follow the instructions in this video tutorial to learn how to properly re-load your website back into SEIntelligence without losing the work that you previously did. The previous work I am referring to is the optimizations you made in SEIntelligence the last time you clicked the Apply or Apply All button.

Video Transcript:

When you decide you need to make an update to your website, you will need to save that website and load it in SEIntelligence once again, in order to re-apply the optimizations you previously made.

Here I have my site in iWeb that I have just made some updates to. Now, I’m going to publish the site to a local folder again. It’s important to know that I am publishing the site to the exact same location on my hard drive as it was when I originally loaded it into SEIntelligence. That location was my desktop, and I did not delete that folder off my desktop either. I have also kept the Site Name the exact same. All of this is very important if you want to ensure that your tags are not erased.

I’ll just repeat that for emphasis. Do not delete the website folder from your hard drive. Publish any changes made in iWeb back to that exact same folder. Do not change the Site Name, or the name of this folder. The site name and the folder name will have the exact same name.

After you have published the site back to the same folder, you can now open it in SEIntelligence. To do so, click on the corresponding existing profile for that website. When you do, you should see a popup window like this appear. This will indicate to you which pages on your site have been modified. All the pages will be select, and clicking the Apply Saved Tags will re-apply the optimizations that you made that last time in SEIntelligence.

Now, you can either make any changes you would like, or publish your site back to your FTP server.

Remember to do this each and every time you update your site in iWeb.

If you are making your optimizations from within SEIntelligence, this video tutorial will quickly show you how to apply those changes, and publish your website.

Video Transcript:

So now we’ve made all of the changes to our site. Our next step is to apply these changes if you haven’t’ already. Simply click on the Apply All button and all of your web pages will be updated.

Now that all the changes have been applied, it is time to publish the site. Click on the Publish button in the top right corner, and enter in your FTP details. If you are not sure what these details are, you can e-mail your web host to find out. It is very important that you know your Directory Path otherwise you will not see your changes applied to your site. After you input your server address, username, and password, it is a good idea to press the Browse button just to make sure you have everything entered correctly. You can also Browse to select the correct Directory Path. When you have everything inputted correctly, I highly recommend creating a profile for this information. You can do this by clicking the Plus sign and entering a name for your profile or account.

When you’re ready, click on the Upload button to begin publishing your site.

The video below will show you how you can incorporate an image map on your WordPress website. Image maps allow your websites users to click on different areas of your image and be taken to different links. Image maps are extremely easy to create when using MapDesign.

Video Transcript:

In this tutorial, I am going to show you how you can add an image map to a website in WordPress, using MapDesign.

Before I begin I want to mention that there is one tricky part that will require the user to do a bit of trial and error. The image that you want to use to create your image map will need to fit into the body of your posts or pages. Basically you want to make it so that your image is the same size or less than the width of the body where your posts or pages go. This might require you to make a mistake or two along the way and go back and correct it. So I will leave that part up to you and continue along with the tutorial.

So here I have my image ready on my desktop. I am going to drag it onto MapDesign. Then I will create my hot spots by selecting the Rectangle, Circles, or Polygon tools.

Next, I will link these hotspots by clicking on Edit, and typing in the URL on the Behavior tab.

When I am done creating my hot spots, I will click on the Export To Web Site button to export the image map. You will notice I have select Simple Image Map. I encourage all of you to do the same to ensure that our image maps will work properly on our WordPress sites.

I will leave the format as JPEG and the Quality as High. I will click the next button, and save export the image map to my desktop.

On my desktop, I will now have an index.html file and an images folder, which will contain my image map.

Open up the index.html file in your favourite HTML editor. Make sure you are not opening it a web browser. I am opening mine up in our HTML editor called WebDesign.

Highlight all of the code with the opening Body and Closing body tags just like I have done. Then copy this code.

Now go to your WordPress dashboard, and either add a new post, or add a new page, whichever your prefer. Make sure you are on the HTML tab and paste the code that you just copied.

Now I will open a new tab or a new window in your web browser and go to imageshack.us. You can choose to host the image on your own server, but for the purpose of this video, I am going to host it on imageshack. The choice is up to you, but it will be easier for you to follow along if you also host it on imageshack.

Click on the browse button, and locate the image map which is inside of the images folder. Highlight it and click Open. Then click on the Upload Now button on image shack.

Highlight the URL in the Link field, copy it, and paste it in your web browser. Then do a secondary click on your image, and select Copy Image Address, or copy image location. Now go back to your post in your WordPress dashboard.

At the bottom of the code that we copied and pasted, you should see a location for your image which reads images/rage_css_imagemap.jpg. Highlight that part of the code, and paste the URL that we have just copied. Make sure your URL has quotation marks around it like mine does.

Quickly click on the visual tab to confirm that everything has worked. If you are able to see your image, then you have done everything correctly and you can publish your post or page.

The Site Settings section of SEIntellgence has some very cool features that most webmaster might never think to utilize. Watch the tutorial below to learn about the Site Settings section and how to properly use the features.

Video Transcript:

On the Site Settings tab in SEIntelligence, the first tab is for our domain. If your website’s domain is not already there, then type it in. Most of yours should already be there.

Setting your preferred domain tells search engines if you prefer to use the www version of your website or the non-www version of your website. The reason this is significant is because other sites may link to your site using the www or without the www. Search engines will classify these as two separate websites if no preferred domain is specified. Specifying your preferred domain will indicate to search engines to list your website with the www or without the www in search results. The choice is yours, however, we do recommend at least choosing one of these two options.

SEIntelligence also gives you the option to forward a not found page to a different page.  This means that if someone types in one of your web page URLs incorrectly, or if one of your pages no longer exists, it will forward the user to the page of your choice, rather than showing them a Page Not Found webpage. Simply check the box to forward the page, and select the page of your choice in the drop down menu.

You can also upload a favicon. Favicons are these tiny little images that appear beside URLs in the address bar. Simply click on Select Image For Favicon and select the image you want to use.

On the robots tab, here is where you would indicate to search engines which pages on your site you don’t want to be indexed. So for example, if I had a private page on my website called users.html, I would press this Plus button and type in that page. Most of you will be able to just leave this tab blank, but if you do wish to block one of your pages, this is how you can easily do so.

If your website has a Sitemap, or multiple Sitemaps, you can specify the location of your Sitemap here. If you do not have a Sitemap, or you are not sure what a Sitemap is, I encourage you to take a look at our page for Sitemap Automator which will help you to easily create and publish an XML Sitemap.

On the header and footer code tab, here is where you will put items such as Google Analytics codes, and statcounter.com codes. Another video will show you how to obtain and add both of these codes, and where to place each of them.

When you are done with the Site Settings section, don’t forget to click the Update button to ensure your changes are saved.

Your website content is so important for making a well rounded search engine optimized website. Watch the tutorial below to learn how to use the ‘Content’ tab on SEIntellgience.

Video Transcript:

Website content is an extremely important aspect for making a well rounded search engine friendly website. Without content, a website stands little chance of ranking high in search results.

On the content tab, you’ll be able to see the code for your page. If you don’t like looking at code or don’t know how to read it, then don’t worry about it. Just look at the suggestions below.

Read the recommendations and make the applicable changes to your site. Please note that these changes are not made here in SEIntelligence, but rather in your website builder or HTML editor.

Just a quick note for users who are using drag and drop editors such as iWeb, or web based builders such as WordPress. Some of the recommendations you will not be doing. For example. this recommendation states to add an address tag to each page. You would not do this recommendation as your website builder does not allow for it.

SEIntelligence also makes it incredibly easy to add alternative text, or alt text, to your website images. Watch the following video to learn more about alt text, and how you can easily implement it on your website through SEIntelligence.

Video Transcript:

A picture may say a thousand words, but to search engines it doesn’t say much. Because of this, and a few other reasons, the alt attribute exists. On the Images tab, you will see the Alt Text and Image columns. Under the image column, you will see the file name of your images. If you click on each of them, you should be able to see previews for your images.

So why do we create alt text. As stated earlier, search engines are not really able to see an image the same way a human is able to. For search engines, the alt text can be a helpful way to understand what an image is. The alt text is also helpful when an image does not show up in a browser. This might happen when the image doesn’t load properly, or the user is using a non-visual web browser. In it’s place, the alt text will typically appear.

To add, or change your alt text, click in the alt text area and type your alt text. Your alt text is almost like a brief sentence, or a few words describing your image. Avoid using one word descriptions, but also avoid writing excessively long sentences.

Be brief, and to the point, while trying to include high quality key-terms that users would actually search.

For example, this image shows a set of men’s left handed golf clubs. This is exactly what I will type in. It contains good keywords, and describes the image perfectly. It wouldn’t be enough if I typed in golf clubs as that doesn’t really describe the photo well. It would be too much if I typed in left handed golf clubs that are nice and shiny and super expensive to buy.

When you type your alt text, it can be exactly like you see here. Almost like you are writing a sentence. No hyphens or commas are needed to separate the words.

Adding header tags to an iWeb site has never been easier. Follow the instructions carefully in this video tutorial to learn how you can properly add header tags to your iWeb website.

Video Transcript:

Being introduced for the first time ever, iWeb users will now be able to add header tags to their websites, without having to hand code it in the HTML. Header tags are another way for you to demonstrate to search engines which keywords are important on your page.

So what is a header tag, and how do we make one?

Basically, a header tag is a block of text that can be compared to a title, or a headline for a larger body of text. Think of a newspaper article. There is a headline which indicates what the entire article is about. Then there is a subheading which gives a bit more insight into the article.

Our websites are similar to the structure of a newspaper article. A headline can contain our primary key term for each page, and an optional subheading can contain our secondary key term for each page.

In HTML, there are six headers that you can use. Those headers are h1 through h6. I am only going to demonstrate adding an h1 header since that is what most of you will be doing. If you want to add an h2 as well, then feel free to do so. h1 and h2 are the most popular headers, so use those if you have room on your site. Trying to add all headers to your site is not generally a good idea, unless your site is structured in a way that makes sense to do so. Also, the rule of thumb is to only have one h1 per page.

So to do this in iWeb, simply click on the Text Box button, and type in this code you see here.

The area where I wrote ‘This is my header tag’ is where you should type in your header tag. The HTML here should look identical to mine. But the text part should contain your header tag which could be anything you want it to be. I recommend putting the main key-term you are targeting for this specific page.

Before we move on to the next step, I want to point out that you can also change the font of this text like you normally would with any text, by highlighting the text and clicking on the Fonts button.

Now when you publish your site to a local folder, and load the site in iWeb SEO Tool, you must check the box to Convert header tags in text boxes to HTML code, and then press the Apply To Entire Site button. What this will do is strip the HTML code from the site, so that only the actual text is being shown. Remember, your header tag should be visible on your site. If you can’t see it, or if you still see the HTML code, it means you did not do this process correctly, and you will need to try again.

Some of you can expect to run into some issues when adding header tags. For example, you will notice that the header tag does not always end up in the same place online as it did in iWeb. This is normal. You may need to play around with it a bit until you find the right spot. To make things easier on yourself, try not to place the header too close other items on your page. This will leave you with a bit of a buffer for when the header ends up in a slightly different location.

Also, if your site has a black background, you most likely won’t be able to see your header. If that is the case, just send us an e-mail read this knowledgebase article on how to alter the font color.