Mac SEO Blog

This tutorial has been updated to reflect Facebook’s discontinuation of FBML. Check out the new create a custom Facebook page with MapDesign video tutorial.

If you are using Facebook to connect with customers, you should definitely make your Facebook page resemble your business. This can be done in various ways, but is most commonly done by using what is known as “Boxes.” These boxes are created using an app on Facebook which allows users to add HTML and CSS to their “boxes.”

This video tutorial is going to show you how you can create these boxes. This will make it so that users navigating through your Facebook page can land on your custom box and an image, or images that resembles your website, or promotional material.

The application used to create the interactive image is called MapDesign. Follow all the steps correctly, and your custom Facebook page will be up in no time!

Video Transcript

Many business owners know the importance of having a Facebook page to connect with current customers and reach out to future customers.

What I am going to show you in this video tutorial is how to make your Facebook page look like your website. I will show you how to setup your Facebook page from the very beginning, all the way to adding a section of your page that looks like your website. The end result will look something similar to this.

Rather than code this in HTML, we are going to take a different approach. Simply put, we are going to create an image map of our website and put it on our Facebook pages. The application we will be using to do this is called MapDesign which can be downloaded from ragesw.com

So the first thing we’re going to do is setup our Facebook page. Keep in mind that the interface of Facebook changes quite often so if what you see in this video differs from what you see in your web browser, don’t worry, it still should be pretty easy for you to figure out.

On the Facebook Login page you should see something that says “Create a page for a celebrity, band or business.” Click on the link to create the page.

You should see two options, one for creating a community page, and the other for creating an official page. We are going to use the Official Page option. Select the description which best describes the page you are going to create. For this demonstration, I will select the second option which says Brand, product, or organization. Then we will need to give the page a name. This can be almost anything you want it to be, but I would recommend making it very relevant to what your page is going to be about – for example, the name of your business. Lastly, you will need to check off that you are the official representative of this person, business or brand or product, and that you have permission to create the page. Remember, do not create pages for any of the above for which you do not have permission to do so. If you are able to check the box, your next step is to click the Create Official Page button.

You will need to login with your Facebook e-mail address and password, otherwise you will need to create a new account.

When you have logged in, you should be taken to your page, which should look pretty blank like this. In order to get our website’s image map on our Facebook page, we will need to setup the ability to add HTML to our page. To do so, click on the Edit Page button, and then select Apps. If you scroll down, you should see an app under the Apps You May Like section, called Static FBML. Click on the Add App button.

When the app is added, click on the Go To App button. You should be taken to a page that looks similar to this. Leave this page open for now, and we will be coming back to it shortly.

In order to get our website on our Facebook page, we’ll first need to take a screenshot of the webpage that we want to show on the Facebook page. To do this, Press Command and Shift and 3. Next, you can see your screen shot on your desktop. Let’s open up our screenshot so that we can crop out any unnecessary parts of the image. Basically we want to crop out as much as we can as we’re going to be trying to fit a pretty large image into a pretty small area. Now I’m just going to copy what I have highlighted and then I will select New From Clipboard.

Next, and this is an extremely important step if you want the image to fit in the Facebook page, I’m going to select Tools in the menu bar, and then I am going to click on Adjust Size. Then I will change the value of the Width to 520 pixels. I don’t have to change anything else as it is done automatically for me. Then I will save this image to my desktop.

Now we’ll launch MapDesign, and drag and drop this saved image, and it should appear in the application. As of now, this is just a screenshot of this webpage. It doesn’t do much, in the sense that I cannot click on any of the links. So for example, this navigation menu allows you to click on all of these links if you were browsing this page in your web browser. But as an image, this ability is gone. This is what we are going to change with the use of this application.

The first thing I’m going to do is choose the Rectangle option. Now I will be able to create the area that will have a live link. I’m going to do this for all of the text and images that I want to have links. I’m going to fast forward through this process since it can take a few minutes depending on how many areas you are going to link.

So now that all of my link options are set, you will notice that there are now a bunch of options in the Hotspots section, which is located on the left hand side of the application. These options are labeled Rectangle 1, 2, 3 and so on. Each of these represents each rectangle that I placed on the image. For example, you saw that the first rectangle I placed was around the area that says Home. This means that Rectangle 1 belongs to that area.

Beside each hotspot is an edit button. Selecting the edit button will allow us to set the URL to which we want to link each area to. So since this rectangle is surrounding the text that reads “Home,” I will link this area to the homepage. I will then need to link Rectangle 2 to the Store as that was the second hotspot that I created. We will need to repeat this process for the remaining hot spots on the image.

When we are all done, we’re going to Export the image map by selecting File in the menu bar, and then pressing the Export button. Make sure you have HTML/CSS selected. I am also going to keep the format, but I am going to change the Quality from High to Maximum. Then I will press next, and save the image map to my desktop.

The next thing we are going to do is upload the image file. You can upload it to your own server if you’d like, or you can use an image hosting website. I’m going to use ImageShack.com to publish my image. I’ll just press the browse button and locate my image, and then press the Upload Now button. Once the image is uploaded, I’m going to select the Direct Link, and copy it.

My next step is to paste this link in my address bar, and I will then click on my image and select Copy Image Address so that I can copy the address for the actual image.

Now I’ll open the index.html file for our image map with my HTML editor, and I’m going to replace this image location with the image location that I had just copied in our previous step.

Lastly, I’m going to highlight the code from Style Type all the way down to the final closing div tag, and I am going to copy it.

Now we can go back to that Facebook page that we left open, and we can paste this code in the large text box next to FBML. We’re gonna have to scroll down a bit, and we’re going to delete the closing head tag, followed by the opening body tag.

Then we’ll scroll up to the top and we can rename the Box Title to whatever we want. This is what will show up in the tabs section of our Facebook page.

Scroll back down and press the Save Changes button.

Now if you go back to your Facebook page, and click on the tab for your image map, you will see that the image is there, and if you hover your mouse over those certain sections that you made linkable, you will see that you can then click to be taken to those destination URLs.

And that’s how you customize your Facebook page so that it can have the same look and feel as your website.

If you want to learn how to make your website rank higher in search engines, be sure to check out the SEO Video Courses at ragesw.com

Macworld Expo 2011 was a great success for RAGE Software this year. The entire show was extremely well attended, it was difficult to walk through the hall at certain points. Our booth was packed for pretty much the entire 3 days, leaving very little time for rest. We heard that this year’s Expo had more companies exhibiting than last year which is a great sign for the future of the show.

Overall we are extremely happy with how the show went. We talked to existing customers, met some new ones and demoed some of our new software which will be released in the coming months. We got great feedback on our entire product line. It is always great to hear face to face stories on how our products have helped!

We have published a Macworld 2011 Photo album on our facebook page. Check it out to see how busy the show actually was. Hope to see everyone back there in 2012!

Keeping track of your website visitors is a very important way of analyzing users behavior on your website. It is also an important way of learning about the different search engines, and websites that refer users to your site. This tutorial is going to show you how you can add a Statcounter code to your website made in RapidWeaver 5. Remember to check out the SEO For RapidWeaver Video Course to learn how to make your RapidWeaver site start ranking higher in search engines.

Video Transcript

In this quick video tutorial, we are going to add a Statcounter.com code to a website made in RapidWeaver 5.

The first thing we will do, is open up our browser to www.statcounter.com. If you do not have an account with statcounter, click on the register button on the top left part of the navigation menu. Fill out all the required information and register your account. After you have registered, login with your username and password. Once you are logged in, you will need to create a new project in order to get your code. Click on the Add New Project button.

In the following form, you will need to enter a title for your website, your website URL, a category for your website, and your time zone. You also have the option of having the statcounter not count your visits to the site by blocking your IP. If you don’t care for this feature, just leave it blank.

After you click the “Next” button, you will then need to click on the Configure and Install Code button. You have a few options for which type of statcounter you want. It is recommend that you use the Invisible statcounter, that way, you are the only one who knows how many hits your site gets. Then click on the next button. The drop down menu should show have Default Installation Guide selected. If not, please make sure it is. Then press the Next button. Now we are given our Statcounter code. Again, we must highlight this code, and copy it.

In RapidWeaver, there will be a heading on the left part of the application that says STATS. Below that, is the Configure option. Click on Configure. In the text box that says Google Analytics, paste the code that we just copied.

If you already have a Google Analytics code in this same box, make sure that you are not replacing the Analytics code with the Statcounter code, but placing them both in the same text box.

To learn how to get your RapidWeaver website ranking higher in search engines, be sure to check out the SEO For RapidWeaver Video Course at ragesw.com

Getting Google and other search engines to find all of the pages on your website can sometimes be difficult. In order to get these search engines to be aware of your website, it is a good idea to create an XML Sitemap and submit it to these search engines. The following video tutorial will teach you why we do this, and how it can be done easily with Sitemap Automator. Remember to check out the SEO For RapidWeaver Video Tutorial to learn how to make your RapidWeaver website more visible to search engines.

Video Transcript

In order to get your RapidWeaver website listed in search engines, I am going to show you how to create an XML Sitemap, and submit it to the major search engines such as Google, Yahoo, Bing, and Ask. We will also take it one step further by verifying our website with Google Webmaster Tools. The verification process is necessary so we can let Google know that we are the website owner and any confidential information is going to the right person or people.

First off, what is an XML Sitemap? An XML Sitemap is basically a blueprint of your website, made specifically for search engines. The Sitemap will contain the links to all visible pages on your website, so that search engines can be made aware of these links, and then index them in their search results.

To some, this process might sound somewhat complicated, but is simplified when we use a third-party tool. For this demonstration, I will be using our tool called Sitemap Automator. Sitemap Automator is available for download at www.ragesw.com
So to create your sitemap, first click on the New Sitemap button, and then type in your website URL. Next, you’ll need to click on the Create Sitemap button. Depending on how big your website is, this scanning process can take up to a few minutes. I will fast forward through this process.

When your site has been fully scanned, you can now click the Generate Sitemap button to proceed to the next step. The next thing we have to do, is upload our sitemap. Select Publish to FTP and press the Publish button. Fill in your server URL, followed by your username and password. For the Root Directory field, many of you can leave this blank, but for those who do not publish to the root directory, or have multiple websites on your hosting account, you will most likely need to type something in. For example, those who use RAGE Web Hosting, you will need to type in public_html. You can also choose to browse your server to locate the right folder to publish to. When you are done filling out all the fields, press the upload button.

After the sitemap has been published, we must then go to our Google Webmaster Tools account so that we can manually submit our sitemap. If you do not have an account, you can create a free one by going to http://www.google.com/webmastertools.

Once you are logged in, you will need to add your site by typing in the URL and pressing the continue button.

After you’ve typed in your URL and clicked continue , the next page will show us the verification method. As mentioned earlier, Google requires us to verify that we are the owners of the site so that we can be safely provided with information regarding our websites.

The first thing you want to do, is select Upload an HTML file as your verification method. Then click on the download link to download the verification file. You must know where this file is being saved in order to use it in our next step.

After you have downloaded the file, go back to Sitemap Automator, click on file in the menubar and select Publish Verification File. Then click on the Select Verification File and find the file that you just downloaded. The next step is to publish the file.

Your next step is to head back to Google Webmaster Tools and click the verify button. Once verified, you must now tell Google Webmaster Tools where it can find your sitemap. Click on your site URL, then click the plus sign next to Site Configuration. and then click on Sitemaps. Next, click the Submit a Sitemap button, and in the text box, type in sitemap.xml as you see here. Then click Submit Sitemap.

Finally, our last step, back in Sitemap Automator, click on the notify search engines button, and your sitemap will be submitted Google, Yahoo, Ask, and Bing.

Google’s campaign to make the web faster puts some web masters in a tricky situation. When optimizing our sites for search engines, we are very used to doing the basic things such as having lots of great content and getting many high quality links. Now we must also consider another thing, and that is the speed of our websites. But how do you know how fast your website loads? And how do you make it load even faster

The video tutorial below will touch upon these two questions and give you the answers you need. When you are done watching, you can read up more about WebCrusher and see first hand how it can give you a faster loading website.

Video Transcript

Did you know that one of Google’s criteria for ranking websites involves the speed of a website. Many websites can load very slowly, and as a result, can be penalized by search engines. There is a great way to check to see if your website is slow loading or not.

For those of you who have a Google Webmaster Tools account, you can get a good idea of what your website’s current speed is. In your Dashboard, press the plus sign next to Labs and select Site Performance. Here you will see the speed performance of your website.

Google believes that anything that falls below 1 and a half seconds is considered to be fast. Anything slower than 1 and a half seconds is considered slow. The faster your site is, the better off you will be.

So how can you reduce the load time of your website? RAGE WebCrusher will do this for you automatically, in the easiest way possible. Simply drag your website folder into WebCrusher, and at the click of just a few buttons, you can greatly reduce the size of your website. Be sure to check out WebCrusher and see how it can help speed up your website.

For a full tutorial on using WebCrusher, please see the video tutorial available in the iWeb SEO, SEO Video, and RapidWeaver SEO video courses.

Allowing your website visitors to search your site to find exactly what they are looking for could be the difference between a happy customer and a frustrated customer. If your visitors want to find something on your site but are having a hard time, a search box can be a good incentive for them to stay on your site and continue browsing. This tutorial is going to show you how you can put a Google search box on your iWeb website. Be sure to learn how to get your iWeb site to rank higher in search engines with the iWeb SEO video course.

Video Transcript

Adding a Google custom search box to your website will allow your websites visitors to quickly find what they are looking for, using Google’s search technology.

Adding the search box is pretty simple. First, open your web browser to http://www.google.com/cse . Next, press the ‘Create A Custom Search Engine’ button.

On the following page, fill out the required information. In the ‘Sites to search’ box, list the sites that you want to appear in the search results. Usually this will just be your one website.

There are two editions of the custom search engines you can use. The standard edition is free, and has ads shown on the results page. If you want no ads, you can purchase that for a minimum of $100 per year depending on how many searches are performed on your site. For this demonstration, I will stick with the free edition as that is what i think most of you will be choosing.

Next, you will be able to customize how you want the search results page to appear. Choose whichever option you like best, and then press the Next button.

The third step will show us a code for our search box. Highlight that code and copy it.

Then open up iWeb, and drag the HTML snippet to your page. Paste the code that you just copied. Your search box will now appear and you can place it wherever you want on your page. If you want the search box to be on multiple pages of your website, you will need to copy and paste it onto those pages.

Learn how to get your iWeb site ranking higher in search engines with the SEO For iWeb Walkthrough Video Tutorial, by visiting ragesw.com

This quick tutorial will show you how you can obtain a Google Analytics code and add it to your website made in RapidWeaver 5. Remember to check out the SEO For RapidWeaver Video Tutorial to learn how to make your RapidWeaver website rank higher in search engines.

Video Transcript
To add a Google Analytics code to your website made in RapidWeaver 5, the first thing you will need to do is get the code from Google Analytics.

Open your web browsers to google.com/analytics and press the Access Analytics button, and sign in with your username and password.

If this is your first time getting an analytics code, you will need to press the Sign Up button, otherwise, click on the Add New Account button, and follow the same procedure.

On the signup page, you will need to enter your website’s URL, give the Account a Name, and enter your country and time zone. Fill out the remainder of the signup form until you get to the fourth step of the process.

The fourth step will show you a code that says “Paste this code on your site.” Highlight that code and copy it.

In RapidWeaver, there will be a heading on the left part of the application that says STATS. Below that, is the Configure option. Click on Configure. In the text box that says Google Analytics, paste the code that we just copied.

When you publish your site, the Analytics code will be present. You may need to wait a few days until you start seeing stats in your account.

To learn how to get your RapidWeaver website ranking higher in search engines, be sure to check out the SEO For RapidWeaver Video Course at ragesw.com

Once again we will be exhibiting at Macworld Expo 2011 in San Francisco from Jan 27 – 29. Come stop by our booth (#448) to take a look at some of the great new products we have lined up for 2011.

If you have questions about our SEO Software, SEO Training Courses, or Web Hosting stop by and we would be happy to help!

We are very excited for this year’s Macworld and hope to see you there!

If you have an iWeb website and always wanted to start a mailing list, now you can with MailShoot, the fully featured newsletter and email management software.

MailShoot will let you instantly create an online sign up form for your iWeb website without any technical skills on your part. MailShoot can publish a signup form to your website with just a few clicks.

Once your sign up form is on your iWeb website you can start collecting emails. Then you can send email updates to all, or certain segments of your list. Check out this video tutorial which shows you exactly how to create your sign up form and publish it on your iWeb website.

If you have just started an iWeb website and are looking to get more visitors to your site, check out our SEO for iWeb Walkthrough tutorial.

When you have a website and you have visitors, how do you ensure that they come back to your website? An email newsletter is a great way for you to keep in touch with your website visitors and make sure they are kept up to date with all your latest news and announcements.

MailShoot, our fully featured newsletter and mailing list manager, can help you instantly set up an online sign up form on your website. In just a few clicks you can start collecting email addresses as well as any other information that you choose on your website.

Once you have the email addresses, you can use MailShoot to send out periodic emails to your entire list, or a segment of your list that match a certain criteria. Check out this preview of MailShoot or download the free MailShoot demo and try it out for yourself.