Google Web Stories On WordPress

Google Web Stories On WordPress

What Are Google Web Stories?

Before covering the use of Google Web Stories on WordPress, we first need to look at what Web Stories are. If you’ve used Instagram, Facebook, or TikTok, you should be familiar with the “story” format where viewers tap or swipe between screens containing video, images, and text. Google Web Stories are a web-based version of that format, that can be hosted on your website rather than on a social media account. 

Why Use Them?

If you have a small business website then web stories may help you achieve your business goals. It’s well worth the time to learn more about these stories and all of their perks or hire a WordPress website management company like us to do it for you. 

Here are the top 3 reasons to use Google Web Stories: 

  1. Engagement. The story format has proven to be an engaging medium that people will watch and read. 
  2. Ownership. Maintaining control over your content is growing increasingly important, in this age of uncertainty – especially for businesses.
  3. SEO. Web stories give you another way to attract organic search traffic, one that is currently far less crowded than other channels. 

Google web stories open up all kinds of opportunities with images and video clips. This is one of the principal ways they aid brands that wish to showcase relevant and meaningful ideas consistent with their messaging. 

The reach of Google web stories goes beyond the website they are created on. Not only do they show up in a standard Google search, but stories are seen in the images section of Google as well. People can learn about them via both Discover and classic search. Discover is the name of an app that’s suitable for mobile applications.

Why Do They Work?

Why do these stories stand out online? They’re not exactly like Facebook or Instagram stories, but because they use a similar visual format, most viewers are already familiar with them. This short-form visual content was created and perfected on social media platforms and is highly engaging. 

Viewers are already accustomed to the format, so when a web story comes up in a Google search, it’s very familiar and easily understood. Because a majority of web searches are coming from phones these days, the story format is designed to display on mobile devices. 

If you’re a business owner who is looking to motivate the members of your audience to purchase a specific product or service, then you may use Google Web stories for all sorts of reasons. You may want to include a CTA that directs people to sign up for your mailing list, subscribe to a monthly service, or buy a product.

Examples of Google Web Stories from https://stories.google/showcase/

How To Use Google Web Stories

There are several ways to use Google web stories in your content strategy. The most common is to use the short form format of a web story to direct users to either a call to action or longer-form content. Because the stories are easy to tap, it’s the perfect medium for a mobile phone.

Web Story Best Practices

  • Video First. Use video in the 9:16 ratio to keep your content engaging. 
  • Be Concise. Keep your text as short as possible to keep it scannable.
  • Make it Readable. Use large text and contrasting colors. 
  • Be Authentic. Use your voice to keep viewers engaged.

Google Web Stories For WordPress

The easiest way to get started with Google Web Stories on WordPress is to use the official Google Plugin made by the Google web stories team. The plugin gives users the power to set up web stories without having to leave their WordPress site. This integration also makes it simple to post web stories directly onto your website.

Using the Google Web Stories editor for WordPress, you can easily create your own web stories from templates or start fresh with a blank canvas. These visual narratives allow tappable interactions and can be shared easily across the web.

By creating web stories on your WordPress website, they belong to you and your company instead of being locked inside a closed platform. 

Upon installation, the plugin also sets up a default archive for all your web stories at yourwebsite.com/web-stories. This is useful if you want to create a separate archive that puts all your stories in one place and is easily accessible from a menu. 

Web Stories Editor

The Web Stories editor for WordPress is a powerful and user-friendly creation tool. If you have used the WordPress editor, navigating the web stories editor will be similar. Because the plugin lives on your WordPress installation, users can easily access their images in the media gallery. The only exception to this is when setting the default logo, which asks for the file to be uploaded.

Some of the key features are:

  • A visually rich and intuitive dashboard, allowing you to easily navigate the story creation process
  • Beautiful and expressive page templates to you get your story creation process started quickly and smoothly
  • Easy drag-and-drop capabilities, making it easy to compose beautiful stories
  • Convenient access to WordPress’ media library, enabling you to grab your media assets right from the plugin dashboard as you create your stories
  • Customizable color and text style presets, making it easy to tailor the style of your stories to the needs of your content strategy

Creating a Google Web Story on WordPress

Making a web story is super simple. If you haven’t done it before, the easiest thing to do is use a template. This still affords you full control over typography, colors, images, animations, and links, but you don’t have to figure all those out before starting. 

The main elements for each story are: 

  • Background
  • Title
  • Text

After you get comfortable creating and editing these elements, you can start to incorporate: 

  • Buttons
  • Links
  • Animations

Links are one of the best features of web stories. Viewers like the visually engaging content, but some topics need more than an image to explain. In this case, you can use a web story as an introduction to a topic, and link to longer-form content. 

Links can be added to a variety of elements from titles to text and backgrounds.

Web Stories Buttons

Adding a call to action is similarly simple to adding links. This is a great option if you are using web stories to attract potential customers for a product or service. 

Google Web Stories + Google Site Kit = ❤️

If you are using the WordPress Google Web Stories plugin, installing the Google Site Kit plugin makes it super easy to connect your Analytics, Search Console, AdSense, Optimize, Tag Manager, and PageSpeed Insights. If you already have the Site Kite plugin installed, the Google Web Stories plugin will automatically detect and import the settings. 

Download the Google Web Stories Plugin Here: https://wordpress.org/plugins/web-stories/

Download the Google Site Kit Plugin Here: https://wordpress.org/plugins/google-site-kit/

Monetizing With Web Stories

Because Web Stories is a Google product, it integrates tightly with other Google services like AdSense. Including ads on your web stories is super simple once connected. This visual, mobile-friendly design of web stories is a great way to integrate ads into your content.

Google Web Stories For Small Businesses

If you’re a small business owner, Google web stories can help attract more visitors to your website. If done well, these stories can materially increase the effectiveness of your marketing efforts and lead to more revenue. Search Engine Optimization is one area where small businesses can compete with larger companies, and Google Web Stories are a relatively new format that isn’t nearly as competitive as other channels. 

How to Make Better Business Decisions

How to Make Better Business Decisions

How to make better decisions

A repeatable way to make better business decisions.

Do you have a systematic “process” for making better business decisions?

I built a tool to help organizations, first for the company I was at, then more broadly for clients, to gain deeper clarity into diverse perspectives, better understand and articulate your own point of view, and when combined with a healthy dialogue, surface better solutions to whatever challenge your company faces.

Use it, change it, and share it if you like, but please give me feedback so we can continue to make it better.

I currently use a combination of a website form, Google Sheets, and some Zapier magic to organize the responses, but you could use other tools to get it done – even a pen and paper! 

If you’d like a PDF version of the questions, let us know where to send it. 

[fluentform id=”1″]

A Post About How to Make Better Business Decisions

My form is organized into five sections with questions clustered around topics to stimulate responses that might otherwise go unexplored and help you make better business decisions.

Section 1

Decide what you are hoping to make a better business decision about.

Question:

What is the decision you are considering?

Section 2

What are you trying to accomplish or avoid with this decision?

Questions:

  1. What are we trying to accomplish?
  2. What is the primary reason for doing this?
  3. What outcome are we trying to get by doing this?
  4. Is there a phase or time where this decision will be more or less needed? Does it need to happen now? 

Section 3

How does this decision align with our mission, objectives, and KPIs?

Questions:

  1. How does this align with our mission long term?
  2. How does this align with our objectives over the next quarter?
  3. How does this align with our objectives over the next year?
  4. Why should we do this?
  5. What opportunities do we create by doing this?
  6. How is this good for our company?
  7. What results would this decision achieve to cause us to look back a year from now with hell yes! appreciation?  

If you’d like a PDF version of the questions, let us know where to send it. 

[fluentform id=”1″]

Section 4

What risks are we exposing ourselves too? The idea here is to play devil’s advocate even if you are in favor of the decision. What could go wrong if it doesn’t go right?

Questions:

  1. How could this decision harm us?
  2. What are the risks you’ve identified with this decision?
  3. What are the risks you’ve identified with this decision?
  4. What are other areas of our business could this impact?
  5. What would happen if we didn’t do this?

Section 5

Anything Else? An open question for anything not covered in the other sections.

Questions:

  1. Anything else you’d like to say or ask about the decision?
  2. Who else should answer these questions on this decision?

 

Conclusion

This is what I’ve used to help my companies and coaching clients make better decisions. What do you think? Is this a format you would use? If not, how can we make it better?

 

If you have a WordPress website (or want one) check out our WordPress Website Management service. We can do thing like turn these questions into a form on your website that automatically gets emailed to all the people you want to have it!

Not only is it a great way to stay focused on your business, our team will keep your website updated and running fast and secure.

If you’d like a PDF version of the questions, let us know where to send it. 

[fluentform id=”1″]

How to Make YouTube Videos Look Great

How to Make YouTube Videos Look Great

Make YouTube Videos Look Great

YouTube does a lot of things well, and most of the time it’s a handy way to get a video on your website. One area where they fall short, is the way embedded videos look. As designers, we spend a ton of time making sure a web site looks great, then BAM! embed a video and it all goes to hell. Colors, controls, fixed widths, and settings (like showing related videos of your competition at the end of a video) all conspire to ruin a beautiful thing.
The standard YouTube embed looks like this:

How to make YouTube look great

Fortunately, there are ways to modify the way embedded videos look and function. The only thing we can’t do with YouTube parameters is make the video embed responsive, but that can be handled with some clever CSS (Here’s a post by Rachel McCollin that will explain how to make iframes responsive).

Another key detail to make YouTube videos look great

It would be lame to go through all the trouble to make your embedded YouTube player look good, then roll with the standard cover image that YouTube selects. Make your own custom cover photo. Not only will it look better, but it’s also an opportunity to include additional information like titles, a call to action, and your own branding.

Skip the details

If you don’t care why it works and just want the code to make it look good, add this text string to the end of the src url:  ?modestbranding=1;controls=0;showinfo=0;rel=0;fs=1
With the modified YouTube video parameters

This will hide everything and give you the cleanest looking embed by hiding the controls, eliminating the video title from the header, and removing the related videos from the end.

For those of you that like to know why

There are lots of parameters YouTube provides that allow us to modify the way videos function and are displayed, but there are 5 in particular that will handle most of what you’ll use.  A complete list can be found here: https://developers.google.com/youtube/player_parameters

One last thing

One last note before diving in to the parameters; there are two important connectors that need to be included for this to work. First, you must add a ? after the last character of your url before adding the parameters. Second, separate each of the parameters with a ;. For example, the standard url for our Hosting Deficiency Syndrome Video is:
www.youtube.com/embed/CFHW7jkQsZc,
to that we added the string:
?modestbranding=1;controls=0;showinfo=0;rel=0;fs=1,
giving us a combined string that looks like this:
www.youtube.com/embed/CFHW7jkQsZc?modestbranding=1;controls=0;showinfo=0;rel=0;fs=1

The Big 4

Now for the parameters, with a brief explanation of how each one works.
Modest Branding – This parameter controls the display of the YouTube logo. The options are 0 or 1, we almost always set it to 1.
modestbranding=1
Controls – This parameter indicates whether the video player controls will display. Our options are 0, 1, or 2. Default is 1. We almost always change it to 0. If you have a video where you want the viewer to have more control leave this at 1.
controls=0
Show Info – This parameter controls the display of information like video title and uploader. Value options are 0 or 1, set the value to 1 to remove the information from the video.
showinfo=0
Related – This parameter indicates whether the player should show related videos at the end of your video. If you have a lot of related content, sometimes this is a good idea. More often than not it will display videos from other YouTube users, you’ll have to decide what is best for your situation.
rel=0

In Closing

Whether you just want the code or the particulars, fixing how your YouTube videos are displayed goes a long way to keeping your website looking great. Hopefully this info will help make your YouTube video embeds more attractive and suck less.

5 Important Steps To Optimize Images For The Web

5 Important Steps To Optimize Images For The Web

Images are essential to an effective website. Quality photos can mean the difference between a successful website and an ugly website that burns the retinas of it’s viewers.

Photos are especially important for websites that need to communicate anything visual; such as products, artwork, or services.

Here are a couple of websites that do a great job communicating visually with images:
www.spotify.com
www.littleco.com

Not only is it important to be posting big beautiful photos, it is equally important that they are properly optimized for the web. Not having properly optimized photos means you are probably missing out on potential visitors and sales.

Do your images provide Google and other search engines with the relevant information they need to be properly indexed? If not, how are people going to find them?

Are your photos too big? If so, they could be taking longer than necessary to load on phones and other mobile devices.

Why optimize your images?

Google can’t read photos… at least not very well. This is why you need to tell Google what the image is so that Google can correctly index and organize it.
Is that another photo of your cat with sunglasses? Or is that a photo of your Grandma’s famous green jello recipe? Google doesn’t know. You need to tell it.

Here are 5 important steps to optimize images for the web:

1. Image sizes

Before your photo is posted to the world wide web, it’s important that it be the right file size. If your images are too large, your visitors are not going to wait around for your website to load; especially mobile visitors. Images that are small in file size are essential for fast page load times. Unless you have access to expensive image editing software such as Adobe Photoshop, there are plenty of free online tools to help optimize image size; here is a great one.

2. Image Title Tag

Give your image a good title tag. The title tag is what the visitor is going to see when they highlight over the image with the cursor. Wordpress makes uploading and tagging images a piece of cake. Simply type in the title tag after uploading your image:

Example of how optimize images for the web
If you’re not using wordpress, and are updating your website like a dinosaur, the format goes like this:
<img src=”cat.jpg” title=”My Cute Cat”>

3. Image Caption

Add a caption tag to give your visitors a nice description or insight about your image. In WordPress, the caption is added directly underneath your image. Image captions are not used by Google, so only add if you want to give your visitors additional information.

Optimize your images for the web

4. Image Alt Tag

The Alt tag is especially important for SEO and Google indexing. Make a habit of always putting relevant keywords that describe your image in your alt tags. The alt tag will also be displayed in place of the image if the image link breaks and cannot be displayed. WordPress also has a handy field to add an alt tag:

how to add alt tags to optimize images for the web

<img src=”cat.jpg” title=”My Cute Cat” alt=”cute brown cat”>

5. Image File Name

When uploading any image, make sure it has a descriptive file name. A year from now when you or a visitor are searching for a particular image, which one do you think will be easier to find?
IMG_8692.jpg or cute-brown-cat.jpg?

These are 5 great ways to help optimize your website and get more traffic. Interested in more information on maintaining an effective website, sign up for our newsletter in the right sidebar.

Have any more image optimization tips? Please leave them in the comments below!

Day 15: Your Website is Hurting Your Business

Day 15: Your Website is Hurting Your Business

Is your website costing you sales?

5 slides, 3 questions, 1 answer.
Now a presentation on SlideShare:

Your website is hurting your business

Day 12: Putting a “face” to a Name

Day 12: Putting a “face” to a Name

A website can truly be an interactive portal into your business.  However, there are millions of websites out there, so how do people find yours?

Facebook_Like_ButtonThe answer is, they may not need to. One way to put a face to a name is by using facebook.  Facebook is the modern day version of “Word of Mouth”.  By engaging in social media, businesses suddenly become more trustworthy, approachable and friendly.  This personal interaction enables you to provide information that is both relevant and up to date to an audience that has already asked for it!

If people have liked your page, it is a place to present your goods and services to an audience who already trusts you and it’s free.  Also, with more and more analytics available to businesses, it’s a user friendly and almost immediate source to see what is working with the public and what isn’t.

When you are using facebook effectively, you may be able to eliminate the need to drive traffic to your website and maybe even tap into a market that you may not have been able to crack before. All this without them having to move a virtual muscle!

While there is no one tool that works for every business, facebook is a way for people you know and who know you (or know someone who knows you) to find your needle in the proverbial haystack.