Section Background

...on Google Sites pages

You can use an animated .gif image like this.

Falling snow animation on websites

The winter season and especially the time around Christmas is a thoughtful and contemplative period of the year. Many people want to express that on their websites as well and try to create an appealing atmosphere. Other holidays and events with similar desires are Eastern (Easter bunny with eggs) or Halloween (with pumpkins).

Background info

This demo page is intended as a help reference / tutorial due to this help request in this Google Sites Help Community thread:
https://support.google.com/sites/thread/248066340

Quote FreedKnight:

can we add Falling Snow effect on google site
how to add Falling Snow effect on google site

Materials and references used for this tutorial:

Image source: https://usagif.com/gif/snwflks-53/
Google Sites Help Center: Change how a section looks

You can also use HTML, CSS and JS in full page embeddings

See working demo on this page. Copy the following code and make changes according to your needs:

Update (14.01.2024) - More details about section backgrounds

... and Search Engine Optimisation (SEO)

Another often asked question like this one in the Google Sites Help Community is about not being indexed in the Google Search and what to do to get indexed.

Quote OMTC WEB_ADMIN:

Not indexed by Google even after several months

It's been almost a year since I created this site, and it still isn't indexed by Google.

I consulted this community before, and the advice I received was that there was too little content, so I tried increasing the content, but it wouldn't get indexed. Someone please give me some advice.

Additional resources and links

Learn more about the topic why your website is missing from Google Search:
https://sitesguide.perjury.info/missing-from-search

Quote Perjury:

The key to getting indexed on Google is unique and compelling content for Google Search to index for people to search for and find. Google Search only indexes text. It's not necessarily the number of words that are at issue, but fewer words mean there's less chance of your site offering something unique and compelling for Google Search to index. Google Search only indexes textual content for other people to find. If there is hardly any text, therefore, Google Search may not even bother indexing the site as there's nothing for people to search for.

About this Snow effects tutorial

Version history

Version 1.0

12th of December 2023

The first intention was to create and present a quick example I can refer to in my reply to the community thread.

So there was no SEO done and public web search not really in my mind.

A couple days later

Right before Christmas - I decided to add a property to my Google Search Console using the URL-prefix method for this mini project (as there is no custom domain, just the Google Sites URL) to see, if and how it would get indexed.

31st of December 2023

The Google bot crawled my website and added it to the Google Search index, see:

https://www.google.com/search?q=site%3Asites.google.com%2Fview%2Fsnow-effects%2F

How this version (not) appeared in Google Search result pages (SERPs)

Note: I tested this in an incognito window, while not being logged in to my account to avoid personalised search results as good as possible

Analysis

Well, for a non optimised website with very minimal textual content, I was happy it got indexed for a relatively specific topic like this. A bit disappointing were the results for some SERPs I tested.

Version 2.0 (you see and read right now)

List of actions to improve the content
...following Perjury's comment and the SEO starter guide provided by Google after I had a look at how the Google Bot sees my website with Hugo's URL viewer:

Removed the background info from the Google Sites header to put it into a sub header section further below
1. Related info: https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=en#uniquepagetitles
2. Thoughts: This content was used to create the search result's snippets which were not looking nice this way.
The <title> tag in Google Sites is created out of the 'site name' (and 'page name') you type in the input field at the top left corner
1. Related info: https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=en#goodtitlesandsnippets
  1. I checked what to avoid and concluded the <title> is OK (with given features of Google Sites), but not as optimal as it could be
2. Related forum thread: https://support.google.com/sites/thread/237308633
Quote: "A page's meta description tag gives Google and other search engines a summary of what the page is about."
1. Related info: https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=en#descriptionmeta
  1. Google Sites do not add a <meta name="description"> tag
  2. ... but added this one for Open Graph purposes:
    <meta property="og:description" content="You can also use HTML, CSS and JS in full page embeddings">
2. Learnings: It seems to be, Google Sites takes the first section on a page after the header section. So I added the introductory section "Falling snow animation on websites..." before "You can also use HTML, CSS and JS in full page embeddings" and put the "Background info" inbetween.
Use heading tags to emphasize important text / Make your site interesting and useful
1. Related info: https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=en#headingtags
2. Related info: https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=en#makesiteinteresting
3. Thoughts:
  1. I added a third section colour (light blue), to make sections more recognisable while scrolling the now longer page
  2. I have made use of more text formatting options:
    1. sub-headings, bold, italic, underlined and coloured text
    2. 'code font' passages for longer quotes, comments and HTML code parts
  3. I added alt tags (SEO and accessibility purposes)
    1. ...to the already existing animated background image
    2. ...to the newly embedded images (added captions for image carousels as well)
  4. I added a logo (with alt text) and a favicon
Provide an appropriate amount of content for your subject
1. Related info: https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=en#provide-an-appropriate-amount-of-content-for-your-subject
2. Thoughts: The starter guide and Perjury's references provide many more info on additional aspects, but these were the main points I focused on in version 2.0

And now, let's wait and hope the Google Bot recrawls my Site quickly and the Google Search ranks it a bit better.

How do you like this combined tutorial?

Open Poll