Issue #236 (SEO for Apps, Productivity, Text Editors, Mobile)01/25/18
If you're concerned about SEO for single page apps, here's something I discovered the hard way over the past few months. I have an info-site called CSS Click Chart that I recently overhauled and updated that suddenly lost its search engine position for sub-pages. So only the home page was indexed and nothing else.
Prior to the code overhaul, this wasn't the case. All sub-pages (which are Ajax-driven "states", rather than actual pages) were indexed individually. I used a PHP fall-back with query string URLs (e.g. css3clickchart.com/?prop=gradients) for non-JavaScript users, while the majority of users saw URLs with hashes (e.g. css3clickchart.com/#gradients).
Again, for years, this was not a problem. Google indexed the pages just fine. But after re-coding the site, I noticed this was no longer the case. So I asked about it on Google's Webmaster Central Help Forum and did some further research myself. Two key findings:
- Using hash symbols for URL fragments to navigate within the same page is fine and won't affect SEO (some people were confused about this)
- Don't use the hash symbol to represent app state to load new content. As shown by my experience, Google doesn't differentiate between css3clickchart.com and css3clickchart.com/#gradients.
Sources for the above points:
What's interesting is that Google's John Mueller claims that this is nothing new. Google has always done it this way. But in my case, I suspect that because all the in-page URLs were pointing to query string based states, Google was using those to provide indexing. It seems to me that their algorithm changed over the past year or so, and now they'll ignore those states if they're redirected to hash URLs (which is what I was doing).
Related to this is the use of the hash-bang URL (e.g. css3clickchart.com/#!gradients) , which apparently was proposed as a potential solution to this problem (you might recall Twitter using this in the past) but that's now not recommended either, as indicated by the feature deprecation message on this page.
I guess it makes sense that fragments aren't differentiated, and I probably should have figured that out. But it certainly wasn't helping that my pages had no problem being indexed in the past while using this technique. My site is now using query strings for the Ajax states and the PHP fall back, and the sub-pages have already started getting indexed.
Now on to this week's tools!
|
Productivity Tools
Pantheon
Fast, reliable hosting for WordPress and Drupal sites with HTTPS and global CDN included with every plan. sponsored via Syndicate
Y-Productive
Improve your task performance and keep track of your productivity, apps, and websites you use for work.
TrackChanges
Chrome extension. A friendly way to update code. Change, save, and share code within your browser.
Taskful
A smart to-do list and task manager app that helps you stay on track and meet your deadlines.
Markdown Here
Now at version 2+. Browser and email client extension that enables you to use Markdown to write and format rich-text emails.
PageDash
Chrome, Firefox, and Vivaldi extension that serves as your digital web scrapbook. Save web pages with just one click.
Roadmap
Beautiful, simple to use project forecasting tool. Plan your project, assign tasks, set timeline and get done within budget and on-time.
Joplin
An open source note taking and to-do application with synchronization capabilities.
Dittach
Chrome extension. A file-finder for Gmail that allows you to see, search, and manage your email attachments.
Franz
Messaging app for WhatsApp, Facebook Messenger, Slack, HipChat, Telegram and more, available on Windows, Mac, and Linux.
|
Text Editors and Code Playgrounds
AcryliCSS
Simple, online CSS editor that might be good for beginners or for a quick demo. Use a Photoshop-like toolbar to change size, position, color, background, shadows, and more.
JavaScript Object Explorer
A resource to help figure out what JavaScript object method would be best to use at any given time.
Haiku
Design, meet production. Craft imaginative UI components that snap into any app. Code optional. (Invite only, but the URL above will give the next 25 sign-ups priority.)
Ceed
A modern, web-based, code generation platform with support for nested templates, integrated functions, variable injection, conditions, schemas, and more.
Expressions
Mac app to play with regular expressions. Includes syntax highlighting, a cheat sheet, live preview, ability to save your expressions, and more.
React Food Truck
A curated collection of Visual Studio Code extensions for discerning React developers.
City Lights
A suite of beautiful dark theme goodies for Atom, Sublime, and Visual Studio Code.
Teletype
Atom plugin that lets developers share their workspace with team members and collaborate on code in real time.
CKEditor
The popular suite of rich text editors and collaboration solutions is now at version 5+.
|
Mobile and RWD Tools
React Native Typography
Pixel–perfect, native–looking typographic styles for React Native.
Swiper
Now at version 4+. Modern mobile touch slider with hardware accelerated transitions and amazing native-like behavior.
deviceframe
Put device frames around your mobile/web/progressive app screenshots.
sketch-to-react-native
Convert Sketch files into React Native components.
Weex
A framework for building high-performance mobile apps for web, iOS, and Android using a single code base.
Visual Studio App Center
Continuously build, test, release, and monitor apps for every platform.
React Native Firebase
Simple Firebase integration for React Native.
Framework7
Now at version 2+. Open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS and Android native look and feel.
Expo
A free and open source toolchain built around React Native to help you build native iOS and Android projects using JavaScript and React.
|
A Tweet for Thought
I like Amelia's suggestion for a more positive and encouraging open-source development experience.
Send Me Your Tools!
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
Since Lanyrd is no longer a thing, I'm not sure what will be the go-to place for finding tech conferences to attend, but Colloq looks like a promising front-runner.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@LouisLazaris
|
|
