From Youtube


Aired October 19, 2012

This webinar provides an overview on how to design a great main page for you wiki. The video overviews how to design your main page using the appropriate tags, tips now to keep your main page up to date, and overall design best practices. The video also offers a how to on improving your main page's SEO as well as how to integrate social media sites into your main page.

Slides & Transcript

Main page Slide01
I’m Sarah Manley a Director of Community Support at Wikia and today joining me is Jorge Albor, a Wikia Community Development Associate focused on our Gaming wikis.

Main page Slide02

Today we are going to overview: What makes a great main page, Tips & tricks to creating a main page and Q&A

Main page Slide03

So lets start by talking about what makes up a great main page - what to include and what to avoid on a main page

Main page Slide04

Main page Slide05
The first place new visitor land

The Main Page is like the welcome mat of your wiki. It is the primary landing page for many of your visitors, so its important to keep this in mind. First impressions can be important and help to turn someone from a visitor to an editor.

Main page Slide06

What makes a great main page

What are the big picture things to keep in mind on your main page? We recommend your main page is:

  • Easy to read
  • Clear navigation
  • Includes description
  • Friendly tone
  • Updates from time to time

Main page Slide07
Here is an example from the Runescape Wiki. Their main page is a good mix of text and images, with rotating content such as featured image and article, upcoming events and runescape news. At the top of their main page is a content section that links visitors to the most popular parts of the wiki. Runescape has done a good job of providing a lot of information about their wiki in a clear and easy to read way.

Main page Slide08
What to start with?

So what is good to include when you are just starting up - or revamping your main page? We recommend beginning by adding:

  • A short intro paragraph that tells your readers what your wiki is about and what people can find there.
  • Links to your most important articles or sections of your wiki. This will help readers find their way to great content quickly. This is what runescape did in the top section of their main page
  • Images - Adding images from your important articles, or current events can be a great way to make your main page more attractive. You can add a one main image, a gallery with multiple images, or a slider, which will rotate between 4 images.
  • Featured content is a fun way to keep your main page with fresh content. Many wikis do featured articles, images, quotes, recent events or news relating to their topic. This is a great way for readers to learn about new content they might not find on their regular visits to the wiki.
  • And last, but equally important, are links to areas to find help, list of local users, and local wiki policies. Each wiki is a different community, and most have different policies, so its important to share these links on the main page.

Main page Slide09

Here is the main page our community wiki. You can see that we use the slider on top, with each image linking out to important news and updates. On the right we have icons that link to important parts of the wiki - including the forums, news, videos and help pages. Below that we have a feed of blog posts and links to other major parts of the wiki. Our goal is to make it easy for visitors to the community wiki to easily find links to help and find out about the latest news on Wikia.

Main page Slide10

Main pages & SEO

One important area to keep in mind when adding content to your main page is how well your main page does when searched for in internet searches. This is called SEO or Search Engine Optimazation. It is what companies like google do to rank your wiki when people search for similar topics. The better your SEO is, the higher your wiki will appear in search results. Main pages are highly considered when search bots index your wiki.

Main page Slide11

Wookiepedia example

Where is an example of Wookiepedia’s rank when someone searches for Han Solo. Having good SEO means you are likely to appear higher, and people are most likely to click on the top results. We did a full webinar on SEO a few months back and you can see a recording on our webinar page on community central.

Main page Slide12
SEO & links?

How can you improve your main pages SEO? The main area to consider is the links on your main page. We highly recommend linking to your most important keywords - such as characters, episodes, seasons, or whatever is the most popular words associated with your topic. Shoot to have about a 100 links on your main page, with the most important links towards the top of the page. Search bots start at the top of the page, so whatever is there will be indexed first. Also try not to link to the same page twice, this will dilute the rank of that link.

Main page Slide13
Here is an example from our EQ2 wiki. You can see they link to their top keywords such as Quests and Zones, and that they appear at the top of the page with other important links. This is followed by the recent news section. Overall their main page has about the recommended 100 links.

Main page Slide14
Updating content

It is also a good idea to add interactive and automatically updating content to your main page. This is an easy way to keep the content fresh without having to manually edit the page. What can you use? We recommend trying out polls, in which you can poll your visitors on what they know or their preferences. You can also insert blog post feeds, which will automatically pull in when new blog posts are created. Or if a big event is upcoming you can add in a countdown clock. Here you can see a couple of examples. The Countdown clock is from the Call of Duty Wiki, counting down until the release of their next game. The poll is from Glee, and asking users about a recent event on the show. And the blog list is from the show American Horrors Story Wiki, and includes blogs from folks talking about the upcoming season.

Main page Slide15
Social content & connections

Another great addition to a main page is to link out to other places where your wiki is active - which could be on social media sites such as facebook and twitter, or by collaborating with other wikis or similarly topiced websites.

On main pages it is possible to create a social media section where you can link or embed your facebook fans as well as your wiki’s twitter feed. This is great way to let users know where else you are active. Here you can see an example from the Twilight Wiki.

A great way to promote your wiki is to pair up with wikis who are similar to yours by setting up affiliations. What does that mean? Affiliate wikis share links with each other, often in a webring or list on their wiki. Here you can see a webring from thle Animanga Wiki which spotlights different anime and manga wikis monthly. Sharing links is a great way to not only show your wiki to new people, but also to help your SEO as well. Don't feel like link sharing should stop at the edge of Wikia, reach out to other fan sites around the internet and see if they want to affiliate with you as well.

Main page Slide16
Add Videos

A final tip on what can make your main page more attractive and interactive is to add videos. Wikia recently created our own video library at where you can access legally licensed videos to use on your wiki. Adding a feature video on your main page is a great way to showcase your wiki’s topic. Here you can see an example from the dishonored wiki.

Main page Slide17
Now you might be wondering, this all sounds great but how do I actually add these to my wiki? Jorge will now walk us through how to edit your main page to include many of these elements.

Main page Slide18

Main page Slide19

New wiki main page

Hi All I’m Jorge. I have been on Wikia since March and a lot of my job here involves creating and helping users to update their main pages. Here you see a screenshot of the main page you get when you start a wiki. It include just a few basic prompts, including a welcome space, a description section, an automatic activity feed and a place for an image.

If you want to start basic, just hit the edit button and our visual editor will load - from here you update all of the basic elements listed. This a great place to just get started.

Main page Slide20

Main pages tend to be fairly complex and as your build out your main page you will likely need to use our source mode editor. The source editor allows you to add tags that will will pull in content or apply specific design to the text, which you can not do from the visual editor. Here is a screenshot of the same main page but in source mode.

Main page Slide21

Before you make further adjustments to the main page, it’s important to know the sizes of elements on most wiki pages - this will help your main page to maintain consistency with the rest of your wiki as well as ensure that your main page works well with advertisements. Wikia uses a grid layout which appears in different arrangements on different pages, but has a standard pixel width that you can design around. These standard sizes are as follows:

  • 10 pixel margin at the left edge
  • 670 pixels of space for article content
  • 10 pixel margin
  • 330 pixels right rail
  • 10 pixel margin at the right edge

Main page Slide22
Main page pixels sizes

Here you can see a visual representation of the grid layout. The most important one to remember for the main page is the main column for article space which is 670 pixels. On main pages this is referred to as the left column. The right column, which will contain the main page ad and on content pages the right rail modules, is 330 pixels.

Main page Slide23

So how are those columns defined? You need to add them. Here you can see the basic HTML tags that are used to define them. Each column has a unique start tag, such as <mainpage- leftcolumn-start /> but both use the same end tag, <mainpage-endcolumn /> . We suggest you start one column, put everything you want there, then close that column before starting the other one. In a couple slides I will show you a step by step how to do this.

Main page Slide24
Main page tags

As Sarah mentioned earlier there are lots of content that you can pull automatically onto your main page. To do this you also use HTML tags. Each different type of content has a different tag associated with it. Here you can see a table of the most popular tags:

  • Activity feed, which shows the most recent editing activity on your wiki
  • Blog list, which pulls in recent user blogs,
  • Gallery, which can be used to display images in numerous different ways,
  • polls, that you can use to create community polls, and
  • createbox, which can be used to give users a quick way to create new pages.

Main page Slide25
Content tags

And last but not least, if you have ever looked at a complicated page on Wikia, such as a page with lots of templates or tables, you may have seen these 3 important HTML tags: div, br, and verbatim.

  • Div tags allow for you to apply styling to the content - these can be used for text, images, galleries or other elements. You will often see divs used to help make text bigger or define alignment
  • Br stands for break, and is used to create a line break on the page. This can be helpful to use after an image, table or gallery.
  • verbatim essentially applies the HTML code on the MediaWiki page with the same name directly on the page where the tag is used. This is like a template. The only difference is, <verbatim> can use all HTML that is not allowed normally.

Main page Slide26
Other helpful tags

Wow that is a lot - I know! But don’t worry we will show you these in action and next take you step by step on how to get started on using these tags on your wiki. Here you can see an example from the Summoner Wars Wiki. At first this may look a little daunting, but if you just read line by line you should start to recognize the tags we just discussed. On the first line you can see <mainpage-leftcolumn-start />, designating the start of the left column. This is followed by a div tag, which sets the style of the introductory text. Within this tag is the text that will be styled. As you can see, for most tags, you must open and close the tag, so you will see div listed at the start of the section, then at the very end. This tells the system what section of the page to apply this exact styling to.

Main page Slide27
Tags in Action

Now if we look at the main page of the  Summoner Wars Wiki, you can see the tags in action. There is a clear left column, and the intro text stating the wiki name is larger and centered. This is all controlled by the HTML tags that have been added.

Main page Slide28

One design element you may notice on most main pages are colored lines that break up sections of the wiki. On the Summoner wiki this is used to define the About and Factions sections. These elements are templatescalled header templates that have been added to the page. They act as all templates do. A template was created in the template namespace, which includes its’ style, and when you add the template code, this style is pulled into the main page. You can define the specific words that appear, such as the example here. The same template can be used multiple times on a main page, but contain different titles, as you saw on Summoner wiki. The example here requires you to only write {{Header|title=Navigation}}, and the template with the text Navigation is generated. Many wikis have these types of templates, so if you see one you like, ask the admin of that wiki about it. You can learn more about templates in our template videos on the help wiki.

Main page Slide29

OK so I know this has all been a lot of information, so lets now walk you through starting with a default main page and building it out to include some of the design elements we discussed. So here you see the default main page you get when you start a wiki

Main page Slide30
Walk through

The first step you should take is to add main page column tags. Remember, there are two types, left and right, and each needs a start and end tag. Here at the very top I added the left column start tag, then the welcome and wiki description text, followed by the end column tag. Next the right column is started, then the default image, followed by the end column tag.

Main page Slide31
Column tags

As you can see here, adding these tags does not make a huge visual change yet - the published mode still looks the same, but now has the basics set to expand the page.

Main page Slide32
Now lets start to add some color and content to this main page. Lets starts by styling the welcome message and adding a template. We will do this in the left column, so in between the left column start and end tags. Almost all tags have a start and end to them which you need in order for the tag to work.

So lets start by looking at the line with the orange arrow. The text on the line says Welcome to the Main Page Wiki. Around it are the div tags I introduced earlier. You can see within the div tag I have set the style to align the text to the center and enlarge it to 150% of its current size. Here you could also change the color, add padding as well as a number of other elements. Below this the green arrow is pointing to a header template that I added and will define the About section

Main page Slide33
Templates & DIV styles

Here you can see the results of adding that code. You can see the welcome to the wiki is larger and centered, and how there is a defined about section header. These are both in the left column.

Main page Slide34
Ok now lets get some pictures on this main page. I really like the way slideshows look, so lets add one into the left column. To do this click the slideshow button in the editor and add the images and captions you would like.

Main page Slide35
Adding images

Once this is added, you can also adjust in source mode. This is a quick way to make size and other adjustments. Slideshows are galleries, which you can see at the green arrow. The code states that those images are to appear in a slideshow, positioned to the center, and at a width of 660 pixels. The is our recommended width for main page galleries. The orange arrow here is also pointing out some helpful links I added to the main page. Many wikis add these links under their welcome message, since it helps new visitors to find links to important pages. One thing to note here is that I added a new div style for these links since i do not want them to appear as big as the welcome text. So lets see what this looks like.

Main page Slide36

Here you can see the results - the slideshow is below the About section and the new links appear above it. Now lets move to focusing on the right column.

Main page Slide37
To work on the right column, we need to move to the area between the start and end tags of the right column. Lets add more interactive and updating content such as blogs and polls.

To automatically add links from recent blog posts, you use the blog list tag. If you look where the orange arrow, you can see I added the blog list tag, and have defined a couple of parameters relating to what will be shown. Just like you can define style, with blog lists you can define what category to pull from, the length of the summary and the title. Here we are pulling just from the blog post category, titling it community blogs and giving a 200 character summary. Below that at the green arrow is the poll tag - this is very simple. You simply add the poll tag, list first the title of the poll, then the options for voting. Once you are done, you use the close poll tag. Remember that this is all in the right column, so lets see how it looks with the left column.

Main page Slide38
Blogs & Polls

Now you can see both the left and right column have interesting content!

Main page Slide39
One of the elements Sarah highlighted was adding featured content - an image, quote, user or article. This is great way to give recognition to an aspect of your wiki. To do this you can use the same header template to call out the featured content. Here I added a featured image, in this case a screenshot of the main page of the Dota wiki, into the right rail. I simply went to the right rail section, added the header template with the title “Featured Main page”, then added an

image below. I made the image 320px so that it fit in well within the right rail.

Main page Slide40
Adding videos

Here you can see the results of adding that section.

Main page Slide41
Now lets add one last element - a featured video. As Sarah mentioned Wikia is working hard to offer more video content for our wikis, which can all be found in the Wikia Video Library on the video wiki. Once you find a video from there or one of the other supported video providers, click the add a video button and insert the url of the video. You will be prompted to decide the size, caption, etc

Main page Slide42
I recommend adding it to the left column so that you can made the width bigger. Centering the video with a width of 500px has worked well. I also recommend adding a header template above it, as we did with the featured image. OK lets now take a look at how the whole page looks!

Main page Slide43
Here is a screenshot of our new main page! You can see all of the elements that we added - which is just the start!

Main page Slide44
We know editing can be tough, but don’t be afraid to experiment, talk to other wikis and try out new things. Main page should be updated regularly and include recent news, events and happenings on your wiki. Remember, you can’t break a wiki, so try out new things and have fun!

Main page Slide45

Main page Slide46

Other Webinars

This image was uploaded by FANDOM Staff.

Appears on these pages

File history

Click on a date/time to view the file as it appeared at that time.

current23:40, October 19, 2012Thumbnail for version as of 23:40, October 19, 2012480 × 269 (22 KB)Sarah Manley (wall | contribs)created video
23:38, October 19, 2012Thumbnail for version as of 23:38, October 19, 2012480 × 269 (22 KB)Sarah Manley (wall | contribs)created video