Even though Google can usually crawl every page of your website, it is important to have a sitemap. A sitemap can improve the indexing of your site, especially if your site uses rich media content such as videos and images.

This post builds on the Rich on Rails post found here. If you don't want to build your own sitemap, you can use the Sitemap Generator gem.

To begin with, we are going to assume you already have an app up and running.


# Add a sitemap controller in your terminal:

rails g controller Sitemap index


# In routes.rb add: 

resources :sitemap, only: [:index]


# In your sitemap_controller.rb add:

  def index
    respond_to do |format|
      format.xml
  end 

# Now for our site, we listed our posts, projects categories and lists:

  	@posts=Post.all
  	@projects=Project.all
  	@categories=Category.all
  	@lists=List.all
  end

end


To make this work we also need to rename our sitemap index view from: index.html.erb to index.xml.builder. Once this is complete, open the file in your text editor and add the following:


# our sitemap - app/views/sitemap/index.xml.builder:

xml.instruct!
# Now we add the code for a traditional sitemap, an image sitemap and a video sitemap
 xml.tag! 'urlset', 'xmlns' => 'http://www.sitemaps.org/schemas/sitemap/0.9', 
'xmlns:image' => 'http://www.google.com/schemas/sitemap-image/1.1', 
'xmlns:video' => 'http://www.google.com/schemas/sitemap-video/1.1' do
  xml.url do
    xml.loc request.base_url # Our root url
   # The code below will create <image:image>
    xml.tag!("image:image") {   
    xml.image :loc, "your image link" 
    xml.image :caption, "your image caption" }
    # Video div
    xml.tag!("video:video") {
    xml.video :content_loc, "https://www.youtube.com/v/MoC6kx0eOak"
    xml.video :player_loc, "https://www.youtube.com/v/MoC6kx0eOak" 
    # Haven't figured out how to add: allow_embed="yes" autoplay="ap=1" yet.
    xml.video :title, 'your video title'
    xml.video :description, "your video description"
    xml.video :thumbnail_loc, "http://img.youtube.com/vi/MoC6kx0eOak/0.jpg" } 
    # http://img.youtube.com/vi/ + your video id + /0.jpg to get your thumbnail link
    end 
  xml.url do
    xml.loc request.base_url + "/about"
    xml.changefreq("hourly")
    xml.priority "1.0"
  end
  xml.url do
    xml.loc contact_url(@contact) # use url instead of path
    xml.changefreq("hourly")
    xml.priority "1.0"
  end
  xml.url do
    xml.loc posts_url(@post)
    xml.changefreq("hourly")
    xml.priority "1.0"
  end
   xml.url do
    xml.loc projects_url(@project)
    xml.changefreq("hourly")
    xml.priority "1.0"
  end
   @posts.each do |post|
    xml.url do
      xml.loc post_url(post)
      xml.tag!("image:image") { 
      xml.image :loc, post.img 
      xml.image :caption, post.alttag }
      xml.changefreq("daily")
      xml.priority "0.8"
      xml.lastmod post.updated_at.strftime("%Y-%m-%dT%H:%M:%S.%2N%:z")
    end
  end
  @projects.each do |project|
    xml.url do
      xml.loc project_url(project)
      xml.tag!("image:image") { 
      xml.image :loc, project.img
      xml.image :caption, project.alttag }
      xml.changefreq("daily")
      xml.priority "0.8"
      xml.lastmod project.updated_at.strftime("%Y-%m-%dT%H:%M:%S.%2N%:z")
    end
  end
  @categories.each do |category|
    xml.url do
      xml.loc request.base_url + posts_path(category: category.name)
      xml.changefreq("daily")
      xml.priority "0.8"
      xml.lastmod category.updated_at.strftime("%Y-%m-%dT%H:%M:%S.%2N%:z")
    end
  end
  @lists.each do |list|
    xml.url do
      xml.loc request.base_url + projects_path(list: list.name)
      xml.changefreq("daily")
      xml.priority "0.8"
      xml.lastmod list.updated_at.strftime("%Y-%m-%dT%H:%M:%S.%2N%:z")
    end
  end
end


As you can see, this is our sitemap, where we have added video and an image to the root path, as well as images to our posts and projects.

Here's an example of all the video tags that Google uses, you can also click here to learn more from Google.


<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"> 
   <url> 
     <loc>http://www.example.com/videos/some_video_landing_page.html</loc>
     <video:video>
       <video:thumbnail_loc>http://www.example.com/thumbs/123.jpg</video:thumbnail_loc> 
       <video:title>Grilling steaks for summer</video:title>
       <video:description>Alkis shows you how to get perfectly done steaks every            
         time</video:description>
       <video:content_loc>http://www.example.com/video123.flv</video:content_loc>
       <video:player_loc allow_embed="yes" autoplay="ap=1">
         http://www.example.com/videoplayer.swf?video=123</video:player_loc>
       <video:duration>600</video:duration>
       <video:expiration_date>2009-11-05T19:20:30+08:00</video:expiration_date>
       <video:rating>4.2</video:rating> 
       <video:view_count>12345</video:view_count>    
       <video:publication_date>2007-11-05T19:20:30+08:00</video:publication_date>
       <video:family_friendly>yes</video:family_friendly>   
       <video:restriction relationship="allow">IE GB US CA</video:restriction> 
       <video:gallery_loc title="Cooking Videos">http://cooking.example.com</video:gallery_loc>
       <video:price currency="EUR">1.99</video:price>
       <video:requires_subscription>yes</video:requires_subscription>
       <video:uploader info="http://www.example.com/users/grillymcgrillerson">GrillyMcGrillerson
         </video:uploader>
       <video:live>no</video:live>
     </video:video> 
   </url> 
</urlset>

To view your sitemap you can visit localhost:3000/sitemap.xml. Once you have it up and running you can push your code to Heroku or any other hosting provider. Now simply submit your sitemap to the Google Search Console and Bing Webmaster Tools.

Thanks for reading!