ic_banknote_smile_128ic_business_128ic_business_128ic_checkmark_128ic_client_team_manager_128ic_code_file_128ic_code_files_128ic_corporate_cloud_platforms_128ic_crossplatform_apps_128ic_developer_128ic_development_team_128ic_enterprise_128ic_faster_timeframe_128ic_graph_down_128ic_graph_down_128ic_information_finder_128ic_junior_developer_128ic_managed_team_128ic_message_128ic_mobile_app_startups_128ic_mobile_development_128ic_mobile_development_up_128ic_mobile_devices_128ic_multiplatform_128ic_multiplatform_white_128ic_pricetag_128ic_project_checklist_128ic_project_management_128ic_project_management_team_128ic_research_and_development_team_128ic_scalable_team_128ic_senior_developer_128ic_smaller_codebase_128ic_smaller_price_128ic_startup_128ic_team_manager_128ic_three_times_faster_128Arrow_Dropdownic_001_google+_16ic_002_xing_16Group 2ic_003_facebook_16ic_004_linkedIn_16Groupic_005_message_16ic_006_upload_16ic_007_remove_16ic_008_email_16ic_009_attachment_16ic_010_file_16ic_011_name_16ic_012_arrow_left_16ic_013_arrow_right_16ic_014_arrow_down_16ic_015_arrow_up_16ic_016_dropdown_arrow_down_16ic_016_dropdown_arrow_leftic_016_dropdown_arrow_rightic_017_K&C_dropdown_arrow_up_16ic_018_language_16ic_019_Quote_16ic_020_+_16ic_021_=_16ic_022_phone_16ic_023_twitter_16ic_024_position_16ic_025_company_16ic_026_search_16ic_027_mobile_16ic_028_fax_16ic_029_location_16ic_030_enlarge_16ic_031_downscale_16ic_032_contactic_download_normal_16pxic_033_skype_16ic_006_download_16 copyK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxic_Interest_based_64ic_acrivate_card_64ic_api_client_64ic_application_architecture_64ic_application_architecture_ white_64ic_application_development_user_64ic_arrow_down_64ic_automated_backups_64ic_automated_infrastructure_provisioning_64ic_automated_infrastructure_provisioning_white_64ic_automated_storage_64ic_automated_storage_64ic_automation_64ic_avaliability_across_the_world_64ic_avaliability_across_the_world_white_64ic_brackets_64ic_brackets_64ic_build_64ic_build_64ic_business_64ic_business_partnership_64ic_business_partnership_white_64ic_business_64ic_calculator_64ic_calendar_64ic_car_rent_64ic_card_renewal_64ic_chat_64ic_chat_bubbles_64ic_chat_bubbles_64ic_chat_white_64ic_checklist_64ic_checkmark_64ic_checkmark_white_64ic_clock_64ic_clock_white_64ic_cloud_media_64ic_cluster_64ic_cluster_white_64ic_code_base_optimization_64ic_coding_64ic_coding_white_64ic_commenting_widget_64ic_commenting_widget_64ic_containers_64ic_containers_white_64ic_continious_64ic_continious_delivery_64ic_continious_delivery_white_64ic_continious_release_64ic_continious_release_white_64ic_continious_white_64ic_cost_saving_64ic_cost_saving_white_64ic_cpu_load_64ic_credit_card_64ic_crossplatform_app_development_64ic_crossplatform_app_development_white_64ic_custom_crm_64ic_custom_crm_64ic_independence_consulring_64ic_database_calls_64ic_database_calls_white_64ic_dedicated_teams_64ic_dedicated_teams_64ic_desktop_application_user_64ic_desktop_application_user_64ic_desktop_code_64ic_desktop_code_white_64ic_developer_64ic_developer_white_64ic_development_64ic_devops_64ic_documents_64ic_documents_graph_64ic_documents_graph_white_64ic_documents_white_64ic_download_presentation_64ic_education_64ic_email_open_64ic_email_open_white_64ic_environment_healthcheckic_euro_64ic_euro_white_64ic_failure_solved_64ic_globe_outlines_64ic_good_quality_64ic_high_load_websites_64ic_high_load_websites_white_64ic_hotel_booking_64ic_inability_64ic_inability_white_64ic_increase_64ic_increasing_team_64ic_independence_64ic_integration_64ic_it_outsourcing_64ic_it_outsourcing_64ic_knowledge_sharing_64ic_mobile_devices_64ic_laptop_user_64ic_laptop_user_64ic_launch_64ic_launch_white_64ic_learning_64ic_learning_two_white_64ic_lighthouse_64ic_link_64ic_load_balancer_64ic_load_balancer_64ic_load_card_64ic_lock_64ic_lock_white_64ic_low_cost_64ic_low_load_websites_64ic_maintenance_tools_64ic_maintenance_tools_white_64ic_media_player_64ic_messaging_platforms_64ic_microservice_architecture_64ic_microservices_64ic_microservices_64ic_mobile_app_64ic_mobile_content_64ic_mobile_development_64ic_mobile_development_white_64ic_mobile_devices_64ic_mobile_devices_white_64ic_mobile_payments_64ic_mobile_social_media_applications_64ic_mobile_workflows_64ic_money_transfers_64ic_multimedia_sharing_64ic_multimedia_sharing_white_64ic_my_garage_64ic_no_access_64ic_no_access_white_64ic_no_oldschool_64ic_online_marketplaces_64ic_online_trading_64ic_pair_device_64ic_parallels_64ic_parallels_white_64ic_passcode_64ic_performance_64ic_performance_issues_64ic_performance_issues_white_64ic_performance_white_64ic_plane_64ic_plane_white_64ic_plus_64ic_pricetags_64ic_product_64ic_product_search_64ic_product_white_64ic_productivity_tools_64ic_productivity_tools_64ic_project_delivery_64ic_project_delivery_white_64ic_project_management_64ic_project_management_collaboration_64ic_project_management_team_64ic_project_risks_reduced_64ic_quality_mark_64ic_quality_mark_white_64ic_question_64ic_react_native_64ic_response_time_64ic_response_time_white_64ic_rest_api_64ic_retail_64ic_transparency_consulting_64ic_scale_up_64ic_scale_up_white_64ic_self_healing_64ic_self_healing_64 copyic_send_money_64ic_server_64ic_server_white_64ic_shopping_64ic_sleep_mode_64ic_small_is_beautiful_64ic_smaller_price_64ic_social_benefits_64ic_social_connections_64ic_socket_64ic_spare_parts_for_cars_64ic_spare_parts_for_cars_white_64ic_speedometer_64ic_performance_consulting_64ic_speedometer_white_64ic_startup_64ic_target_64ic_team_64ic_testing_64ic_testing_checklist_64ic_testing_checklist_64ic_testing_white_64ic_three_times_faster_64ic_touch_64ic_touch_id_64ic_touch_white_64ic_transparency_64ic_ui_design_desktop_64ic_ui_design_mobile_64ic_ui_design_mobile_white_64ic_umbrella_64ic_umbrella_white_64ic_up_and_down_scaling_64ic_up_and_down_scaling_64ic_users_64ic_users_white_64ic_ux_design_64ic_ux_design_desktop_64ic_ux_design_white_64ic_vehicle_64ic_web_based_search_64ic_web_based_search_white_64ic_web_browser_code_64ic_web_browser_developer_mode_64ic_web_browser_user_64ic_web_development_64ic_web_development_white_64ic_web_portals_64ic_web_portals_64ic_web_user_64ic_web_user_white64ic_workflow_64ic_workflow_steps_64ic_workflow_steps_white_64ic_workflow_white_64ic_working_environment_64

SEO Tips & Tricks for Single Page Web Applications

Over the past few years, single page web applications and their frameworks have gained immense popularity. And no wonder – the advantages for end users and web developers are substantial. These solutions are fast and user-friendly, support ReSTful APIs and enable distributing the processing workload between the server and client computers. Finally, it is much easier to convert such web application into a mobile one.

BUILDING SITEMAP.XML

The Sitemaps protocol allows us to inform search engines about pages on our website that are available for crawling. A Sitemap is an xml file that lists URLs for a site. There you can specify information about each page: last update time, change frequency, and how important it is in relation to other URLs on the site. Search engine web crawlers like Googlebot read this file to more intelligently crawl your site.

SITEMAP.XML EXAMPLE:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>http://kruschecompany.com/</loc>
      <xhtml:link
        rel="alternate"
        hreflang="de"
        href="http://kruschecompany.com/de/"
     />
     <xhtml:link
        rel="alternate"
        hreflang="en"
        href="http://kruschecompany.com/"
     />
     <lastmod>2016-05-17</lastmod>
     <changefreq>yearly</changefreq>
     <priority>1.0</priority>
  </url>
</urlset>
Using a sitemap doesn't guarantee that all the items in your sitemap will be crawled and indexed, as Google processes rely on complex algorithms to schedule crawling. However, in most cases, your site will benefit from having a sitemap, and you'll never be penalized for having one.

Since search crawlers like Google don't execute JavaScript, the content of single page application becomes unavailable, which is not applicable. So, now there is a question of how to get a search crawler to see your single-page application without using an ugly "#!" in your URL?

To explain search crawler that your application is a single-page, you have to add <meta name="fragment" content="!"> tag at the top of site . But, the best way to indicate pages that should be indexed is to use a sitemap.XML file. It's like to say to the search engine: "I’d appreciate if you could focus on these particular URLs."
The sitemap allows indicating canonical URLs (non-canonical are not applicable) of the site with page priority, last modification date, change frequency and the crucial for multilanguage websites - returning <hreflang> links.

It is worth mentioning that sitemaps require some promotion, so as the first stop of the search crawlers is a robot.TXT file. Adding the following line: "Sitemap: http://www.example.com/sitemap.xml" will discover the location of it for the first and all further visits.
The second step of sitemap promotion is submitting it to the search webmaster tools sites, which is a good way to prompt a crawl in usually next few hours.

CREATING FACEBOOK META TAGS

Integration with social media is a much-needed setting today, which is why we use such protocols like Open Graph to optimize and structure the information we want to share in social networks.
Created for Facebook, Open Graph protocol is now used to control the data when a user shares the URL link to some web-site content.

To integrate OG (Open Graph) to your Website, all you need to do is to put special <meta> tags into <head> section of the HTML page you want to share.
OG meta tags are responsible for how your web page will look like when shared in social media. When the user shares a URL link for the first time, Facebook crawler analyzes the page, collects information about it and creates a graphical object, which will then be shown on Facebook pages.

There are some required tags for OG:
  - og: title - the name (e. g. of the article);
  - og: description - short description of your data content;
  - og: type - the data type of page content (the default is "website");
  - og: image - URL address of the picture to represent the page;
  - og: url - canonical URL of the page.

If the page doesn't have OG <meta> tags, Facebook crawler will automatically search for required content and independently deliver the information found on your page.
It isn't always a suitable option because the crawler can select any information that seems relevant, but it might not meet your needs.

So, setting up Open Graph meta tags to your page is the best way to integrate website with social networks.  This is something that is easy to do, if you ever worked with meta tags before.

<head>
  <meat property="og:title" content="Some Title"/>
  <meat property="og:description" content="Short description"/>
  <meat property="og:type" content="article"/>
  <meat property="og:image" content="http://example.com/image.jpg"/>
  <meat property="og:url" content="http://example.com/current-url"/>
</head>

ADDING LINK CANONICAL

The rel=canonical link element is an HTML element that helps developers avert duplicate content. Using it will improve a site’s SEO, as Google’s bots don’t like when your website has a lot of similar content.

The idea is simple: if you have a few similar options of the same content, you choose one version and make it “canonical”, and then inform search engines about this. This helps solving the problem with the duplicate content where search engines don’t know which of the content pieces they should show.

Choosing a proper canonical URL for every set of similar URLs improves the SEO of your site. Because the search engine knows which version is authoritative, it can count all the links towards all the different versions, as links to that single version.

If you want to use rel="canonical" link element for single-page applications, you generate URL dynamically.

Also, remember that canonical and ‘sitemap.xml’s URLs must be the same!

So, the truth about SEO for single-page applications is that Javascript frameworks are neither good or bad for SEO. The use of these frameworks doesn’t automatically mean that it will be impossible for Google to index your single page app. However, you will need some time and effort to optimize your single page web application and make sure it is accessible and indexed properly by search engines.

SHARE WITH FRIENDS
You might find this interesting
Case Study
Bosch Classic Cars - Digital Engagement Platform for 19K Vintage Car Owners
Case Study
Liferay Portal Performance Tuning Services for a Major Online Gaming Software Supplier
SUCCESS-STORY
Reference: Major producer of auto electronics and spare parts
Blog post
How to Make Your Web Solution Rock: 7 Areas to Check
Blogpost
How to Motivate Your Dedicated Team to Work with Legacy Projects
Success Story
Drivelog.de — Web Marketplace for Car Owners and Service Providers
blog post
Docker: Virtualize Your Development Environment Right
eBook
How to Secure Web Product Development — FREE eBook
blog post
When Microservices Help Make Future-Ready Products
Case Study
Portal Performance Tuning For Major German Travel Agency
blog post
How to Build a Rancher & Docker Based Cloud
case study
Micro-service Architecture for New AngularJS Application - Case Study
blog post
How We Use Ansіble for Configuration of Our Environments
blog post
DevOps with Puppet: Tips on Setting it up for Configuring Servers
blog post
How We Manage Our Infrastructure with Chef
Success Story
Fast and Lightweight Mobile Application based on PhoneGap/ Cordova
blog post
Centralized Logging with Logstash, Elasticsearch & Kibana
blog post
How the QA Team Tests Your Project
blog post
4 Time-Saving Ways to Test Your Cross Platform Mobile App
blog post
Plan to Succeed: 4 Tips for Building Scalable Software
ebook
Top Tools for Cost-Effective Web Development — eBook
Blogpost
How to start services on Linux
Blog Post
Scaling software solutions - how it works
Blog Post
Angular 2.0 vs Angular 1.4. What fits you best?
Blog Post
Reasons to believe in Ionic hybrid app
Blog Post
Debunking imaginary shortcomings of cross-platform frameworks
E-book
Determining Approaches to Mobile App Development
Blog Post
Technologies that Foster Digital Transformation
Blog Post
A Guidance for Keeping Your Web Development Project Within the Budget: Three Key Pillars
Blog Post
Agile and DevOps are Key Drivers of Digital Transformation
Blog Post
Dedicated Teams for Web Development: Choice Criteria to be Checked
Blog post
Cost efficient technologies
Blog Post
Angular 4 vs React – what to choose in 2017
Blog Post
A secret formula of an agile dream team
Blog post
GoLang: Features, Pros and Cons
Blog post
K&C insights: how to make your workflow work for you
Blog post
Microservices… when do we need them?
Blog post
Use case: how to build and run Docker containers with NVIDIA GPUs
Success Story
How to apply React Native while developing heavy cross-platform mobile apps
Blog post
Cloud Deployment: Overview of Options
Success Story
Reformation of Deployment Cycle for Bosch Classic Cars Portal
Blog post
Three Authentication Approaches to Keep Your Clients Safe
Blog post
Native or Hybrid Apps: A Quick Comparison
Blog post
Big Data: Why Your Business Needs it ASAP
Blog post
Setting Up: Traefik Balancer In Rancher Cloud
Blog post
White Label: A Customized Software Solution from a Business and Tech Perspective
Blog post
Installation and setting up: Nextcloud as a local network storage on CentOS7
Blog post
How a Company Can Benefit from White Label: K&C experience
Blog post
ROCKET.CHAT as an internal messaging system and helpdesk platform
Stay tuned!
We'll gladly share fresh blog updates and our best practices to your email.
We protect your data and will notify you on important updates only.