Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Google AMP: Code Snippets

DZone's Guide to

Google AMP: Code Snippets

It has happened to all of us. The standards change, we look at some older code we want to re-factor, and all of a sudden it's not compliant! Well, something happened with Google AMP. Here's one compliance issue that was easy to fix.

· Mobile Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

As I've been going through the site and optimizing it for Google AMP, I've experienced some interesting requirements from Google over the past months.

But it hasn't been in vain.

Google AMP Index Results

Based on the feedback from the Google Search Console, Google is starting to index my site for mobile pages.

Good news, right? Well, kind of. Here's the rub...

You may notice that I still have a lot of pages that aren't indexed. I finally figured out why.

My Code Is NOT Compliant

To my readers, I provide a lot of ASP.NET MVC code examples on DanylkoWeb.

Every time I post a code technique, I provide code samples even with full-source projects. When I copy code from Visual Studio, I use the Productivity Power Tools 2015. It has a feature called Copy As HTML. I've been posting code samples for a long time. Actually, since my site was revived in 2014.

But I've been doing it wrong...

...for almost two years. Let's get to the problem at hand instead of reminiscing.

Copying Code is NOT Copying Code

When you copy your code from Visual Studio, you make sure the code runs (not theoretically), highlight a section of code, and use the Copy As Html under the Edit menu. When you paste, your code becomes HTML readable for your readers.

Let's look at an example. When I use "Copy As Html" and paste this simple class into my editor, I get this:

HTML of MyClass

<pre class="csharpcode"><span style="color:blue;">public</span>&nbsp;<span style="color:blue;">class</span>&nbsp;<span style="color:#2b91af;">MyClass</span>{&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">public</span>&nbsp;<span style="color:blue;">string</span>&nbsp;FullName&nbsp;{&nbsp;<span style="color:blue;">get</span>;&nbsp;<span style="color:blue;">set</span>;&nbsp;}}</pre>


Looks like a mess, doesn't it? But did you notice the HTML?  In-line styles! Oh, the horror!

According to Google AMP's style requirements, inline styles are a no-no. So how do we fix this?

Well, from this point on, we need to make our code AMP-compliant.

  1. In Visual Studio 2015, Select Tools -> Options (or go to Quick Launch and type 'tools options' and hit Enter).
  2. Click and expand the Productivity Power Tools option.

    Productivity Power Tools - Copy As Html Desired Settings

  3. Set the EmitSpanClass to True
  4. Set the EmitSpanStyle to False

What we did was change the pasting of your code to use CSS classes instead of inline styles.

Here's what we get now:

MyClass

public class MyClass
{
    public string FullName { get; set; }
}

HTML of MyClass

<pre class="csharpcode"><span class="keyword">public</span>&nbsp;<span class="keyword">class</span>&nbsp;<span class="class name">MyClass</span>
<span class="punctuation">{</span>
&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">public</span>&nbsp;<span class="keyword">string</span>&nbsp;<span class="identifier">FullName</span>&nbsp;<span class="punctuation">{</span>&nbsp;<span class="keyword">get</span><span class="punctuation">;</span>&nbsp;<span class="keyword">set</span><span class="punctuation">;</span>&nbsp;<span class="punctuation">}</span>
<span class="punctuation">}</span>
</pre>


Notice the classes? Definitely a better way of writing HTML.

Now, your CSS can be color-coded easily.

Conclusion

Today, I explained another piece of the Google AMP puzzle by showing you how even pasted code could cause issues with HTML validators like Google's Structured Data Testing Tool.

As I continue to tackle Google AMP pages, I've come to realize that this will be the hardest part of converting my site to become Google AMP-compliant.

I'm thinking that a good chunk of that 282 pages (pictured above) are code-related pages (Ugh!). It will be a long and tedious task.

It may take me a while to convert them, but I wanted other developers who blog about code to understand the changes required to make their own pages Google AMP-compliant so they don't make the same mistakes as I did.

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:
google amp services ,mobile deployment ,html

Published at DZone with permission of Jonathan Danylko, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}