13 things developers forget when launching public websites
TRANSCRIPT
Ready for Launch13 Things Web Developers Forget When Releasing Public-Facing Websites
Jeff Julian•Chief Marketing Officer, AJi•Reformed Developer•Founder of Geekswithblogs.net•Former Microsoft XML and SharePoint MVP•@jjulian
Out-of-the-Box•Not everything you need for delivering amazing
experiences comes in the Default Template or your Content Management System
•Digital Disruptions require us to be far more proactive in our web technology efforts
1. Google Analytics•Yes I still have to mention this one•Website traffic analytics•Very flexible•Most of the time it requires customization
beyond basic script embedding
1. Google Analytics•https://google.com/analytics
2. Google Tag Manager•Online Script Management Tool•No More Calls To Update Your Layouts!•Publish and versioning features•Triggers to add custom pattern responses
2. Google Tag Manager•http://www.google.com/tagmanager/
3. Social Meta Tags / Cards•Used by: Twitter, Pinterest, Facebook, Google+
•Enhances social sharing for the customer to provide more information and media
•Fields: Title, Type, URL, Image, Description
3. Social Meta Tags / Cards<title>Page Title Around 70 Characters</title>…<!-- Open Graph Facebook --><!-- https://developers.facebook.com/docs/reference/opengraph --><meta property=“og:title” content=“…” /><meta property=“og:type” content=“article, profile, video.other, etc” /><meta property=“og:url” content=“Primary URL” /><meta property=“og:image” content=“URL for Representative Image” /><meta property=“og:description” content=“Sharable Description” />
3. Social Meta Tags / Cards<title>Page Title Around 70 Characters</title>…<!-- Twitter Card --><!-- https://dev.twitter.com/cards --><meta property=“twitter:card” content=“summary” /><meta property=“twitter:title” content=“Page Title” /><meta property=“twitter:site” content=“@Publisher” /><meta property=“twitter:creator” content=“@Author” /><meta property=“twitter:image” content=“URL for Sharable Image” /><meta property=“twitter:description” content=“Sharable Description” />
4. Meta Descriptions•Used by engine below the title to describe the
page•You can define or let the engine decide…•Should be flexible for Content Developers to
customize•Should be Unique on every page like the Title
5. XML Sitemaps•Stop making the GoogleBot guess•An XML Feed of Every URL You would like to have
crawled by an engine•URL, Last Updated Date, Change Frequency, and
Priority•Typically hosted at: https://xyz.com/sitemap.xml
5. XML Sitemap<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url><loc>https://ajisoftware.com</loc><lastmod>2015-04-15T18:36:17+00:00</lastmod><changefreq>weekly</changefreq><priority>0.75</priority>
</url>…
</urlset>
6. ROBOTS.txt•One of the oldest ways to communicate with
search engines•Simple text file in the root directory•List of User-Agents that are acceptable•Pages/Directories ok to crawl or should ignore•New(ish) – List of sitemaps
6. ROBOTS.txtUser-agents: *Disallow: /adminSitemap: https://xyz.com/sitemap.xml
7. Responsive Websites•Make Sure It Looks Good on Mobile Platforms
•Mobile Search continues to grow (> 25% Traffic)
•Google Change Mobile Search Algorithm to Boost Sites that are Mobile-Ready!
7. Responsive Websites•Responsive Frameworks
• Bootstrap - http://getbootstrap.com• Foundation - http://foundation.zurb.com/• Skeleton - http://www.getskeleton.com/• …
•Don’t Build Your Own
8. Minified CSS/JavaScript•Seconds are Critical in Web Traffic
•Minified (Remove Whitespaces, Comments, and Returns) assets will allow the browser to download and load quickly
•ASP.NET Bundling and Minification
9. Use of HTTPS as Primary•Google measures HTTPS as a ranking signal as of
August 2014
•2048-bit key certificates•Consider a Wildcard Certificate•Update your Sitemap XML and Robots.txt
10. Rel=“canonical”•Duplicate content can cause negative effects on
Search Engine Optimization (SEO)•More than one path into your content can be
seen as duplicate•This tag shows the search engines which URL is
primary for the content.
10. Rel=“canonical”<head>
<title>Unique Page Title</title>…<link rel=“canonical” href=“Primary Url” />…
</head>
11. Image Formats and Sizes•Do not publish large Hi-Res images unless you
have to or have a specific application
•Mobile devices have usage caps that cause higher cost or lower speeds
11. Image Formats and Sizes•Rules to live by:
• PNG for images with limited colors or transparency• JPG for photographs or a larger array of colors• GIF is you need animation• BMP if you are just a jerk
•Consider loading smaller images for mobile resolutions
12. Fully-Qualified URLs•Query strings are so 1990s•Using fully-qualified URLs over a single page with
parameters will give you better link sharing and SEO opportunities
•Ensure each page has a unique Page Title and Meta Description
12. Fully-Qualified URLs•DON’T do this:
http://xyz.com/search.aspx?c=cars• Page Title: “Corporate Search”• Meta Description: “Search Results Page”
•DO this instead: http://xyz.com/search/cars• Page Title: “Car Search Specific Title with Keywords”• Meta Description: “Looking for a new car? …”
13. Google Search Console•Formerly Google Webmaster Tools•Tools for Website Optimization and Review•Previous tips will be “green lighted” here•Use monthly to ensure your still following the
best practices
13. Google Search Console•Tools
• Sitemap Tester• Mobile Usability• HTML Improvements• Site links• Search Queries!!• Crawl Errors and Stats
• ROBOTS.txt Tester• Security Issues• Page Speed Test
Questions
@jjulianhttps://linkedin.com/in/jjulianhttp://facebook.com/jjulian2
https://www.linkedin.com/in/jjulian