Web Stories - Snackable Content for Everyone

Web Stories - Snackable Content for Everyone

What are Web Stories?

Google Web Stories brings together images, video, and text in a beautiful and animated visual flow and provides an engaging and visual way to consume content in a full-screen experience. They combine the user experience of social media Stories with the reach and visibility of the web.

Web Stories are just like Social Media Stories (Facebook Stories & Instagram Stories), but Web Stories can be edited, displayed in the Google Search Engine, and to be shared with anyone on the web.

On the 1st of May 2020, the AMP Team decided to rename AMP Stories to Web Stories and confirm that more features are coming in the upcoming months.

We can be of service adding Web Stories to your WordPress Website: Find Out More Here

But why are Web Stories good?

They are bite-sized content - great for quickly reading or learning about a topic on the go. With mobile being a leading device in browsing the internet, these web stories help you turn a video or a long blog post topic into small, easy to use, media content. You can inform your audience or promote your products or services in a format tailored for mobile. Web stories offer tappable interaction for your reader where you can insert call-to-actions to display more information (links to other pages, websites, stories).

Plus, these stories are indexable in Google, can be shared on social media platforms, and are super fast to load onto your device.

Once Web Stories meet the criteria for Google Search, they can be eligible for display in a variety of ways on Google. Web Stories can display within Google as a single result, can be included in a grid view (US Only), can also appear in Google Images (All regions and languages), and can appear in Discover (US Only).

Visual Stories In Google Search
Visual Stories In Google Search

How can Web Stories be used?

Large news networks are using them already as another content type for sharing the latest news. But web stories are not limited to news content - you can use them for just about anything.

See a Web Story as a piece of content loosely coupled with your main content. For instance, you have a long-form content such as a “definitive” guide. You could create a short story containing the essence of your article in a few slides. Then, share the story via your social network or in your newsletter. If your audience likes it, they might continue reading the complete article.

If a user accesses the Web Story via computer or non-smartphone device, then the story will be displayed in the same format just with the hazy background covering the areas of the screen where the story is not taken up.

Inspiration from use cases and examples

CNN

CNN has short news stories to help quickly share their latest or even evergreen content.

Right now, you can view a selection of stories by heading to g.co/ampstories on your mobile browser, when you tap on the link it will open the normal Google page then type CNN and you will get the search result page with CNN stories at the top. This testing feature only works on mobile devices at this point.

National Geographic

Google shows an example of one here: https://www.nationalgeographic.com/amp-stories/travel/europe-hidden-villages/

It ranks first for "europes hidden villages" - the user experience is pretty good on mobile and desktop. This was not create with the WordPress plugin provided by Google.

L’Oreal

L’Oreal, for their product La Roche Posay, delivered a great offline-to-online experience for its customers.

By scanning a QR code in a physical shop, you are sent to the AMP Story and receive additional information about the product in the format of a story. You can then start an immersive product experience from your phone, in the store.

Boost

Boost is a Fintech company helping their customers finding, comparing, and buying mobile airtime bundles in Kenya.

Their target audience is young people consuming most of their online content through mobile.

The time spent on site went from 20 seconds with blog posts to almost 4 minutes with AMP Stories. And 87% of their readers click through the very end of their stories.

The Washington Post

Just like CNN, washingtonpost.com also have news in the Web Stories format for both recent news and evergreen content.

Portraits from the front lines of the pandemic, through the lens of the 19th century

sleepenvie.com

Sleepenvie® uses Web Stories to showcase their products such as their customizable sofas.

Are Google Web Stories Right For My Business?

Any business with a content marketing strategy could likely find a way to incorporate AMP stories into their plans – through quick tutorials, product reviews, top lists, etc. As these are new, there is very little data on what works better than others.

So far, feedback appears to be good from existing publishers like The Washington Post, who told Search Engine Land that the format is best suited for content that easily translates to “a highly compelling and visual story that you can tell in a few slides.”

We can be of service adding Web Stories to your WordPress Website: Find Out More Here

Types Of Stories
Different Types Of Stories
Web Stories Hero Dashboard
Web Stories Dashboard

How to enabled and add Web Stories to your WordPress Website?

Google has a Beta plugin for WordPress, which has a nice WYSIWYG builder feature for creating your web stories, with a range of templates to get you started.

How do I install the Stories for WordPress plugin?

As soon as Google moves up from beta, the plugin will be available on WordPress.org. While the plugin in beta, the plugin has to be downloaded as zip. After that:

  1. Navigate to Plugins > Add New.
  2. Click the Upload Plugin button at the top of the screen.
  3. Select the zip file from your local filesystem.
  4. Click the Install Now button.
  5. When the installation is complete, you’ll see “Plugin installed successfully.” Click the Activate Plugin button at the bottom of the page.

A new menu item will appear in your admin menu dashboard called "Stories".

Note: You may need to flush your permalink settings for the stories to appear.

How do I create my first story in WordPress?

This could be its' own blog post (or Web Story) so I will just link to some resources:

Best Practices for Web Stories

Here are some technical guidelines that can help your Web Story succeed.

  • Completeness: Make sure that your Web Story is complete, tells the full story, and isn't overly commercial. Here are some examples of what to avoid:
    • Web Stories that require users to click links to other websites or apps to get essential information.
    • Web Stories that have more than one outlink or attachment per page. The outlinks and attachments must include the appropriate disclosures.
  • Affiliate programs: If you use affiliate links in your Web Stories, Google recommends that you only use one affiliate link per story and that you follow the Quality guidelines for affiliate programs.
  • Story length: Google recommends that the length of your Web Story be between 5-30 pages, with a suggested target of 10-20 pages. (But technically, you can have anywhere 1 to 30 pages)
  • Title length: Use shorter titles. Google recommends that your title length be less than 40 characters.
  • Text: Keep the text on each page short (less than 200 characters per page). Focus each page to a single idea.
  • Video: If you use videos in your Web Stories, Google recommends that videos be less than 15 seconds per page, and definitely less than 60 seconds per page. We also recommend that you provide captions for the video. Video size must be less than 4MB and in MP4 format. If your video is too long, cut it in smaller pieces and display a piece per page.
  • Background: Provide a background colour matching the dominant colour of your story.
  • Font: Choose a font colour with enough contrast to your images, video and background colour.
  • Images: Vertical image ratio is 9/16 and the recommended image sizes are:
    • 828 x 1,792
    • 720 x 1280
    • 540 x 960
    • 360 x 480

How do I add Google Analytics Tracking to my Web Stories?

At the moment, there is no tracking enabled within Google's Beta Web Stories WordPress Plugin (or GBWSWP for short). But looking into the plugin code there are hooks to use so Google Analytics can easily be added to the beta plugin functions.

Simply add this code to your functions.php child theme file:

add_action( 'web_stories_story_head', 'ga_output_stories_wp_head', 10, 0 );
function ga_output_stories_wp_head() {
	?>
	<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
	<?php
}

add_action( 'web_stories_print_analytics', 'ga_output_ws_wp_body', 10, 0 );
function ga_output_ws_wp_body() {
	?>
	<amp-analytics type="googleanalytics">
		<script type="application/json">
			{
				"vars": {
				"account": "UA-XXXXXXXX-X"
			},
			"triggers": {
				"default pageview": {
					"on": "visible",
					"request": "pageview"
					}
				}
			}
</script>
</amp-analytics>
<?php
}

Just be sure to replace UA-XXXXXXXX-X with your Google Analytics ID.

Later, when Google Update's their plugin, you may need to remove this code and use their new tracking system.

Enabling Web Stories on Oxygen Builder

The Web Stories Plugin seems to use the theme's functions to output the stories, and Oxygen Builder disables all theme functions and styling.

After playing around with Erix's solution (from onegreenspider.com), the below steps seem to work for me.

This is not fully tested so test this code and process before pushing it to a live site. Please leave feedback on this here.
0
Please leave feedback on thisx
.<br>Use at your own risk.

Step 1) Add The Code To Your functions.php Child Theme File

// Callback for setting the if condition where theme or Oxygen should be used.
function ote_on_these_views() {
	return is_singular( 'web-story' ); // enter your if condition here. Reference: https://codex.wordpress.org/Conditional_Tags
}

remove_filter( 'template_directory', 'ct_disable_theme_load', 1, 1 );
remove_filter( 'stylesheet_directory', 'ct_disable_theme_load', 1, 1 );
remove_filter( 'template', 'ct_oxygen_template_name' );
remove_filter( 'template_include', 'ct_css_output', 99 );
add_filter( 'template_include', 'ote_ct_css_output', 99 );


function ote_ct_css_output( $template ) {

	// Array of All Options
	if (  ote_on_these_views()  ) {
		return $template;
	}

	$new_template = '';

	if ( get_page_template() !== $template && get_index_template() !== $template ) {
		global $ct_replace_render_template;
		$ct_replace_render_template = $template;
	}

	if ( isset( $_REQUEST['xlink'] ) && stripslashes( $_REQUEST['xlink'] ) === 'css' ) {
		if ( file_exists( plugin_dir_path( __DIR__ ) . 'oxygen/component-framework/csslink.php' ) ) {
			$new_template = plugin_dir_path( __DIR__ ) . 'oxygen/component-framework/csslink.php';
		}
	}
	else {
		if ( defined( 'OXYGEN_IFRAME' ) ) {
			$new_template =  plugin_dir_path( __DIR__ ) . 'oxygen/component-framework/oxygen-iframe-template.php';
		} elseif ( file_exists( plugin_dir_path( __DIR__ ) . 'oxygen/component-framework/oxygen-main-template.php' ) ) {
			$new_template = plugin_dir_path( __DIR__ ) . 'oxygen/component-framework/oxygen-main-template.php';
		}
	}

	return $new_template;
}

add_action( 'wp_print_styles', 'ote_dequeue_oxygen_assets', 100 );
/**
 * Dequeue Oxygen's files conditionally.
 *
 * Hooked to the wp_print_styles action, with a late priority (100),
 * so that it is after the file was enqueued.
 */
//
function ote_dequeue_oxygen_assets() {
	$oxygen_theme_enabler_options = 'use-oxygen-mostly'; 

	if ( ote_on_these_views() ) {
		wp_dequeue_style( 'oxygen' );
	}
}

add_action( 'wp_enqueue_scripts', 'ote_disable_oxy_print_cached_css', PHP_INT_MAX );
/**
 * DO NOT output all Oxygen generated styles: number of cached CSS files or dynamic xlink
 */
function ote_disable_oxy_print_cached_css() {
	if ( ote_on_these_views() ){
		remove_action( 'wp_head', 'oxy_print_cached_css', 999999 );
	}
}

add_action( 'wp_enqueue_scripts', 'ote_dequeue_theme_assets2', 20 );
/**
 * Unload theme assets on views where Oxygen is enabled.
 */
function ote_dequeue_theme_assets2() {
	if ( ! ote_on_these_views() ) {
		global $wp_styles;
		global $wp_scripts;

		$wp_get_theme = wp_get_theme();
		
		$child_theme  = $wp_get_theme->get_stylesheet();
		$parent_theme = $wp_get_theme->get_template();

		foreach ( $wp_styles->registered as $key => $value ) {
			$src = $value->src;
			if ( strpos( $src, "themes/$child_theme/") !== false || strpos( $src, "themes/$parent_theme/" ) !== false ) {
				unset( $wp_styles->registered[$key] );
			}

			if ( strpos( $src, "/uploads/$child_theme/" ) !== false || strpos( $src, "/uploads/$parent_theme/" ) !== false ) {
				unset( $wp_styles->registered[$key] );
			}
		}
		
		foreach ( $wp_scripts->registered as $key => $value ) {
			$src = $value->src;
			if ( strpos( $src, "themes/$child_theme/") !== false || strpos( $src, "themes/$parent_theme/" ) !== false ) {
				unset( $wp_scripts->registered[$key] );
			}

			if ( strpos( $src, "/uploads/$child_theme/" ) !== false || strpos( $src, "/uploads/$parent_theme/" ) !== false ) {
				unset( $wp_scripts->registered[$key] );
			}
		}
	}
}

Step 2) Create a Blank Template for the Post Type Stories

Head over to Oxygen's Templates and create a new blank template with only "Stories" selected under Where does this template apply? and a Template Priority of 100 or more (should be the highest priority possible). This template should not Inherit design from other template or have any Inner Content within it. A completely 100% blank template.

Step 3) Visually & Technically Check Your Stories

Clear your website cache (if you have it) and your browser cache, and navigate to your testing story.

Then head over to Google's AMP testing tool and put in your stories URL. That should tell you any other issues to work on if needed.

Service: Adding Web Stories To Your Website

We can be of service adding Web Stories to your WordPress Website: Find Out More Here

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Reading

The Power of Voice (In A Website)

Voice. The sound we make by vibrating air that allows one person to share thoughts with another for better understanding. But what happens when websites take on this trait?

Read More

cogheartenvelopelaptop-phone
0
Would love your thoughts, please comment.x
()
x