{"id":372,"date":"2026-08-05T07:33:58","date_gmt":"2026-08-05T07:33:58","guid":{"rendered":"https:\/\/winniemuriuki.co.ke\/blog\/?p=372"},"modified":"2026-08-22T12:50:52","modified_gmt":"2026-08-22T12:50:52","slug":"javascript-seo-how-search-engines-crawl-and-index-modern-web-applications","status":"publish","type":"post","link":"https:\/\/winniemuriuki.co.ke\/blog\/javascript-seo-how-search-engines-crawl-and-index-modern-web-applications\/","title":{"rendered":"JavaScript SEO: How Search Engines Crawl and Index Modern Web Applications"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Modern web applications have changed the way businesses build digital products. Today, companies are no longer limited to traditional websites with static pages and simple interactions. Developers can now create highly interactive experiences using powerful JavaScript frameworks such as React, Vue, Angular, and Next.js.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These technologies have made it possible to build applications that feel fast, responsive, and similar to native software experiences. From SaaS platforms and business dashboards to e-commerce systems and customer portals, JavaScript applications have become a foundation for modern digital products.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, building a great user experience is only one part of creating a successful application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A modern application also needs to be discoverable.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A beautifully designed application that search engines cannot properly understand may struggle to attract organic traffic, reach new users, or compete in search results. This is where JavaScript SEO becomes an important consideration for developers, founders, and technical teams.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript SEO is not simply a marketing concern. It is an engineering consideration that affects how applications are designed, how content is delivered, and how users discover digital products.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While building and analyzing modern software systems, I have learned that decisions made during development can influence search visibility. Choices around rendering strategies, application architecture, routing, <a href=\"https:\/\/winniemuriuki.co.ke\/services\/technical-seo\">site performance optimization<\/a>, and content delivery all play a role in how search engines interact with an application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A developer may focus on creating reusable components, clean code, scalable APIs, and excellent user experiences. These are important. However, if public-facing pages are not accessible to search engines, the application may lose valuable opportunities for visibility.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this article, I will explain how JavaScript SEO works, how search engines process modern applications, why JavaScript applications face unique SEO challenges, and the engineering practices that help create applications that are both user-friendly and search-engine friendly.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Is JavaScript SEO?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript SEO is the process of optimizing JavaScript-powered applications so that search engines can discover, process, understand, and index their content correctly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Traditional websites usually work by sending complete HTML documents from the server to the browser. When a user or search engine accesses a page, the content is already available inside the HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The process is relatively simple:<\/p>\n\n\n\n<div style=\"max-width:760px;margin:40px auto;font-family:Arial,Helvetica,sans-serif;line-height:1.6;color:#333;\">\n\n  <div style=\"background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:28px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n    <div style=\"font-size:18px;font-weight:700;color:#111827;margin-bottom:8px;\">\n      1. Browser Requests a Page\n    <\/div>\n\n    <p style=\"margin:0;color:#475569;\">\n      A user or search engine crawler requests a URL from the server. \n      The request tells the server which page content needs to be delivered.\n    <\/p>\n\n  <\/div>\n\n\n  <div style=\"text-align:center;font-size:32px;color:#64748b;margin:18px 0;\">\n    \u2193\n  <\/div>\n\n\n  <div style=\"background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:28px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n    <div style=\"font-size:18px;font-weight:700;color:#111827;margin-bottom:8px;\">\n      2. Server Returns Complete HTML\n    <\/div>\n\n    <p style=\"margin:0;color:#475569;\">\n      The server sends a complete HTML document containing the page structure,\n      headings, text content, links, images, and important metadata.\n    <\/p>\n\n  <\/div>\n\n\n  <div style=\"text-align:center;font-size:32px;color:#64748b;margin:18px 0;\">\n    \u2193\n  <\/div>\n\n\n  <div style=\"background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:28px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n    <div style=\"font-size:18px;font-weight:700;color:#111827;margin-bottom:8px;\">\n      3. Browser Displays Content\n    <\/div>\n\n    <p style=\"margin:0;color:#475569;\">\n      The browser reads the HTML document and immediately displays the page\n      content to the user without needing additional JavaScript processing.\n    <\/p>\n\n  <\/div>\n\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Modern JavaScript applications often work differently.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Many applications initially return a basic HTML document and then use JavaScript to create the final user interface inside the browser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The process may look like this:<\/p>\n\n\n\n<div style=\"max-width:760px;margin:40px auto;font-family:Arial,Helvetica,sans-serif;line-height:1.6;color:#333;\">\n\n  <div style=\"background:#eff6ff;border:1px solid #bfdbfe;border-radius:16px;padding:28px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n    <div style=\"font-size:18px;font-weight:700;color:#1e3a8a;margin-bottom:8px;\">\n      1. Browser Requests the Application Page\n    <\/div>\n\n    <p style=\"margin:0;color:#475569;\">\n      The user or search engine crawler requests a URL from the application.\n      At this stage, the browser is asking for the resources needed to load the\n      web application.\n    <\/p>\n\n  <\/div>\n\n\n  <div style=\"text-align:center;font-size:32px;color:#64748b;margin:18px 0;\">\n    \u2193\n  <\/div>\n\n\n  <div style=\"background:#eff6ff;border:1px solid #bfdbfe;border-radius:16px;padding:28px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n    <div style=\"font-size:18px;font-weight:700;color:#1e3a8a;margin-bottom:8px;\">\n      2. Server Returns the Application Shell\n    <\/div>\n\n    <p style=\"margin:0;color:#475569;\">\n      Instead of sending a fully populated webpage, the server may return a\n      basic HTML structure containing the application container, references to\n      JavaScript files, stylesheets, and other required resources.\n    <\/p>\n\n    <div style=\"margin-top:18px;background:#ffffff;border:1px solid #cbd5e1;border-radius:10px;padding:15px;text-align:left;font-family:monospace;font-size:14px;color:#334155;\">\n      &lt;div id=&#8221;root&#8221;&gt;&lt;\/div&gt;\n    <\/div>\n\n  <\/div>\n\n\n  <div style=\"text-align:center;font-size:32px;color:#64748b;margin:18px 0;\">\n    \u2193\n  <\/div>\n\n\n  <div style=\"background:#eff6ff;border:1px solid #bfdbfe;border-radius:16px;padding:28px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n    <div style=\"font-size:18px;font-weight:700;color:#1e3a8a;margin-bottom:8px;\">\n      3. JavaScript Files Load and Execute\n    <\/div>\n\n    <p style=\"margin:0;color:#475569;\">\n      The browser downloads JavaScript bundles containing the application logic,\n      components, routing, and functionality required to build the interface.\n    <\/p>\n\n  <\/div>\n\n\n  <div style=\"text-align:center;font-size:32px;color:#64748b;margin:18px 0;\">\n    \u2193\n  <\/div>\n\n\n  <div style=\"background:#eff6ff;border:1px solid #bfdbfe;border-radius:16px;padding:28px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n    <div style=\"font-size:18px;font-weight:700;color:#1e3a8a;margin-bottom:8px;\">\n      4. Application Generates the Content\n    <\/div>\n\n    <p style=\"margin:0;color:#475569;\">\n      JavaScript executes in the browser and dynamically creates the page\n      content, including components, data displays, and interactive elements.\n    <\/p>\n\n    <div style=\"margin-top:18px;background:#ffffff;border:1px solid #cbd5e1;border-radius:10px;padding:15px;text-align:left;font-family:monospace;font-size:14px;color:#334155;\">\n      HTML Shell + JavaScript + Data = Rendered Application\n    <\/div>\n\n  <\/div>\n\n\n  <div style=\"text-align:center;font-size:32px;color:#64748b;margin:18px 0;\">\n    \u2193\n  <\/div>\n\n\n  <div style=\"background:#ecfdf5;border:1px solid #a7f3d0;border-radius:16px;padding:28px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n    <div style=\"font-size:18px;font-weight:700;color:#065f46;margin-bottom:8px;\">\n      5. User Interacts With the Application\n    <\/div>\n\n    <p style=\"margin:0;color:#475569;\">\n      The application is now fully loaded. Users can navigate, submit forms,\n      interact with components, and use features without traditional page\n      reloads.\n    <\/p>\n\n  <\/div>\n\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This approach provides developers with flexibility and allows them to create rich experiences. However, it also introduces additional steps that search engines must process.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The challenge is not that JavaScript is bad for SEO. Modern search engines are capable of processing JavaScript. The challenge is ensuring that the application architecture allows search engines to access important content efficiently.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A well-designed JavaScript application can achieve excellent SEO performance. The difference comes down to how the application is built.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why JavaScript SEO Matters for Modern Applications<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript is now used across many types of digital products.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>SaaS platforms with dashboards and user portals<\/li>\n\n\n\n<li>E-commerce applications with dynamic product experiences<\/li>\n\n\n\n<li>Business management systems<\/li>\n\n\n\n<li>Customer relationship management platforms<\/li>\n\n\n\n<li>Interactive documentation websites<\/li>\n\n\n\n<li>Web applications built with modern frameworks<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In many cases, the application itself may not require search visibility because users access it after authentication.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, a private dashboard containing customer reports or internal business data does not need to rank on Google.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, most digital products also have public-facing pages that need visibility.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These may include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Homepage<\/li>\n\n\n\n<li>Product pages<\/li>\n\n\n\n<li>Feature pages<\/li>\n\n\n\n<li>Pricing pages<\/li>\n\n\n\n<li>Documentation<\/li>\n\n\n\n<li>Blog articles<\/li>\n\n\n\n<li>Landing pages<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These pages help attract visitors, educate potential customers, and support business growth.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This is especially important for SaaS products.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A SaaS application may have a private dashboard where users manage their accounts, but the company still needs search-friendly pages to attract new customers.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This creates an important distinction:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The application experience and the marketing experience may use similar technologies, but they have different SEO requirements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Understanding this difference helps developers make better architectural decisions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Search Engines Process JavaScript Applications<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To understand JavaScript SEO, it is important to understand the stages search engines use when processing pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The main stages are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Crawling<\/li>\n\n\n\n<li>Rendering<\/li>\n\n\n\n<li>Indexing<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Each stage affects whether a page can appear in search results.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Crawling: How Search Engines Discover Pages<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Crawling is the process where search engines discover URLs and collect information about available pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For traditional websites, search engines can often discover pages through:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>links<\/li>\n\n\n\n<li>sitemaps<\/li>\n\n\n\n<li>website navigation<\/li>\n\n\n\n<li>external references<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Modern applications need to follow the same principles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A common mistake in JavaScript applications is creating navigation systems that work perfectly for users but make discovery difficult for search engines.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A user may click a button that triggers JavaScript and loads new content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From the user&#8217;s perspective, everything works.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, if there is no proper URL associated with that content, search engines may struggle to discover and understand the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A search-friendly application should provide meaningful URLs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;example.com\/products\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">is more useful than:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;example.com\/#\/products\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Clean URLs provide better context for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>search engines<\/li>\n\n\n\n<li>users<\/li>\n\n\n\n<li>sharing<\/li>\n\n\n\n<li>analytics systems<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The URL structure is part of the application architecture and should be considered early during development.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Rendering: How Search Engines See JavaScript Content<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After discovering a page, search engines need to process the content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This process is called rendering.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Rendering allows search engines to execute JavaScript and understand the final version of the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A JavaScript application may initially provide something like:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"root\"&gt;&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The actual content appears only after JavaScript executes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before JavaScript execution:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"root\"&gt;&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">After JavaScript execution:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;Enterprise Payroll Software&lt;\/h1&gt;\n&lt;p&gt;Manage employee payments, reporting, and compliance.&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The difference between these two states is important.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If important content only exists after complex JavaScript processing, search engines may take longer to understand the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This does not mean JavaScript applications cannot rank. It means developers need to think carefully about how content is delivered.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Indexing: How Pages Enter Search Results<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">After crawling and rendering, search engines analyze the content and decide whether it should be stored in their index.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For a page to have strong search visibility, search engines need to understand:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>what the page is about<\/li>\n\n\n\n<li>which topics it covers<\/li>\n\n\n\n<li>how it relates to other pages<\/li>\n\n\n\n<li>whether it provides useful information<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This is why technical SEO and content strategy work together.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A technically perfect application with poor content may struggle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A great article hidden behind poor rendering may also struggle.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Successful applications need both:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>strong engineering foundations<\/li>\n\n\n\n<li>valuable content<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Why JavaScript Applications Face SEO Challenges<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript frameworks provide many advantages, but they introduce technical decisions that developers must handle carefully.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The main challenges usually involve rendering, metadata, routing, and performance.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Client-Side Rendering Challenges<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Client-side rendering is one of the most common approaches in JavaScript applications.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With client-side rendering, the browser receives the application code and creates the page dynamically.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The process looks like this:<\/p>\n\n\n\n<div style=\"max-width:760px;margin:40px auto;font-family:Arial,Helvetica,sans-serif;line-height:1.6;color:#333;\">\n\n  <div style=\"background:#fefce8;border:1px solid #fde68a;border-radius:16px;padding:28px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n    <div style=\"font-size:18px;font-weight:700;color:#854d0e;margin-bottom:8px;\">\n      1. User Requests a Page\n    <\/div>\n\n    <p style=\"margin:0;color:#475569;\">\n      The user enters a URL or clicks a link to access the web application.\n      The browser sends a request to the server asking for the resources needed\n      to load the application.\n    <\/p>\n\n  <\/div>\n\n\n  <div style=\"text-align:center;font-size:32px;color:#64748b;margin:18px 0;\">\n    \u2193\n  <\/div>\n\n\n  <div style=\"background:#fefce8;border:1px solid #fde68a;border-radius:16px;padding:28px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n    <div style=\"font-size:18px;font-weight:700;color:#854d0e;margin-bottom:8px;\">\n      2. Server Sends the JavaScript Application\n    <\/div>\n\n    <p style=\"margin:0;color:#475569;\">\n      Instead of sending a fully rendered webpage, the server delivers the\n      application structure, JavaScript files, stylesheets, and supporting\n      resources required for the browser to build the interface.\n    <\/p>\n\n  <\/div>\n\n\n  <div style=\"text-align:center;font-size:32px;color:#64748b;margin:18px 0;\">\n    \u2193\n  <\/div>\n\n\n  <div style=\"background:#fefce8;border:1px solid #fde68a;border-radius:16px;padding:28px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n    <div style=\"font-size:18px;font-weight:700;color:#854d0e;margin-bottom:8px;\">\n      3. Browser Downloads JavaScript Files\n    <\/div>\n\n    <p style=\"margin:0;color:#475569;\">\n      The browser downloads the required JavaScript bundles containing the\n      application logic, components, routing, and interactive functionality.\n    <\/p>\n\n    <div style=\"margin-top:18px;background:#ffffff;border:1px solid #cbd5e1;border-radius:10px;padding:15px;text-align:left;font-family:monospace;font-size:14px;color:#334155;\">\n      main.js + components + application logic\n    <\/div>\n\n  <\/div>\n\n\n  <div style=\"text-align:center;font-size:32px;color:#64748b;margin:18px 0;\">\n    \u2193\n  <\/div>\n\n\n  <div style=\"background:#fefce8;border:1px solid #fde68a;border-radius:16px;padding:28px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n    <div style=\"font-size:18px;font-weight:700;color:#854d0e;margin-bottom:8px;\">\n      4. JavaScript Creates the Interface\n    <\/div>\n\n    <p style=\"margin:0;color:#475569;\">\n      The browser executes JavaScript code and dynamically generates the user\n      interface by creating components, loading data, and updating the page\n      content.\n    <\/p>\n\n    <div style=\"margin-top:18px;background:#ffffff;border:1px solid #cbd5e1;border-radius:10px;padding:15px;text-align:left;font-family:monospace;font-size:14px;color:#334155;\">\n      JavaScript execution \u2192 Components \u2192 Rendered UI\n    <\/div>\n\n  <\/div>\n\n\n  <div style=\"text-align:center;font-size:32px;color:#64748b;margin:18px 0;\">\n    \u2193\n  <\/div>\n\n\n  <div style=\"background:#f0fdf4;border:1px solid #bbf7d0;border-radius:16px;padding:28px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n    <div style=\"font-size:18px;font-weight:700;color:#166534;margin-bottom:8px;\">\n      5. User Sees and Interacts With Content\n    <\/div>\n\n    <p style=\"margin:0;color:#475569;\">\n      The application is now visible and interactive. Users can navigate\n      between views, submit information, and use application features without\n      traditional full-page reloads.\n    <\/p>\n\n  <\/div>\n\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This approach is known as Client-Side Rendering (CSR). The browser is responsible for creating the final page after downloading and executing JavaScript. This provides developers with powerful tools for creating highly interactive experiences, but it also introduces additional considerations for SEO because the initial HTML response may not contain the complete page content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">These challenges are especially common with Single Page Applications (SPAs), where content delivery depends heavily on JavaScript execution. I explored this topic in more detail in my guide on <a href=\"https:\/\/winniemuriuki.co.ke\/blogs\/single-page-application-seo-how-to-make-javascript-applications-search-engine-friendly\"><strong>Single Page Application SEO: How to Make JavaScript Applications Search Engine Friendly<\/strong>.<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For applications where search visibility is important, developers need to carefully consider whether pure client-side rendering is the right choice or whether approaches such as Server-Side Rendering (SSR), Static Site Generation (SSG), or hybrid rendering would provide better results. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This approach works extremely well for interactive applications. It is commonly used for:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>dashboards<\/li>\n\n\n\n<li>productivity tools<\/li>\n\n\n\n<li>internal systems<\/li>\n\n\n\n<li>complex user interfaces<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">However, public pages that depend heavily on client-side rendering require additional SEO consideration. If the initial HTML contains very little meaningful content, search engines may need extra processing before understanding the page. For applications where SEO is important, developers often consider approaches such as server-side rendering, static generation, or hybrid rendering.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Server-Side Rendering (SSR): Improving Content Delivery and Search Visibility<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Server-Side Rendering is one of the most common solutions developers consider when building JavaScript applications that require strong SEO performance.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Unlike Client-Side Rendering, where the browser creates the interface after downloading and executing JavaScript, Server-Side Rendering generates the HTML content on the server before sending it to the user.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The process changes from:<\/p>\n\n\n\n<div style=\"max-width:900px;margin:40px auto;font-family:Arial,Helvetica,sans-serif;color:#333;line-height:1.6;\">\n\n  <div style=\"text-align:center;margin-bottom:35px;\">\n    <h3 style=\"font-size:24px;color:#111827;margin-bottom:10px;\">\n      How the Rendering Process Changes\n    <\/h3>\n\n    <p style=\"font-size:16px;color:#475569;margin:0;\">\n      The main difference between Client-Side Rendering and Server-Side Rendering\n      is where the application content is generated.\n    <\/p>\n  <\/div>\n\n\n  <div style=\"display:flex;gap:25px;flex-wrap:wrap;\">\n\n    <!-- CSR -->\n    <div style=\"flex:1;min-width:300px;background:#fefce8;border:1px solid #fde68a;border-radius:16px;padding:25px;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n      <h4 style=\"text-align:center;color:#854d0e;font-size:20px;margin-top:0;\">\n        Client-Side Rendering (CSR)\n      <\/h4>\n\n      <p style=\"text-align:center;color:#713f12;\">\n        The browser creates the final interface after downloading JavaScript.\n      <\/p>\n\n\n      <div style=\"background:#ffffff;border-radius:12px;padding:15px;margin-top:20px;text-align:center;border:1px solid #e5e7eb;\">\n\n        <div style=\"font-weight:700;color:#111827;\">\n          User Requests Page\n        <\/div>\n\n        <div style=\"font-size:28px;color:#64748b;margin:10px 0;\">\n          \u2193\n        <\/div>\n\n        <div style=\"font-weight:700;color:#111827;\">\n          Server Sends JavaScript Application\n        <\/div>\n\n        <div style=\"font-size:28px;color:#64748b;margin:10px 0;\">\n          \u2193\n        <\/div>\n\n        <div style=\"font-weight:700;color:#111827;\">\n          Browser Downloads Scripts\n        <\/div>\n\n        <div style=\"font-size:28px;color:#64748b;margin:10px 0;\">\n          \u2193\n        <\/div>\n\n        <div style=\"font-weight:700;color:#111827;\">\n          JavaScript Creates Interface\n        <\/div>\n\n        <div style=\"font-size:28px;color:#64748b;margin:10px 0;\">\n          \u2193\n        <\/div>\n\n        <div style=\"font-weight:700;color:#166534;\">\n          User Sees Content\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- SSR -->\n    <div style=\"flex:1;min-width:300px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:16px;padding:25px;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n      <h4 style=\"text-align:center;color:#1e40af;font-size:20px;margin-top:0;\">\n        Server-Side Rendering (SSR)\n      <\/h4>\n\n      <p style=\"text-align:center;color:#1e3a8a;\">\n        The server creates the HTML before sending it to the browser.\n      <\/p>\n\n\n      <div style=\"background:#ffffff;border-radius:12px;padding:15px;margin-top:20px;text-align:center;border:1px solid #e5e7eb;\">\n\n        <div style=\"font-weight:700;color:#111827;\">\n          User Requests Page\n        <\/div>\n\n        <div style=\"font-size:28px;color:#64748b;margin:10px 0;\">\n          \u2193\n        <\/div>\n\n        <div style=\"font-weight:700;color:#111827;\">\n          Server Executes Application Logic\n        <\/div>\n\n        <div style=\"font-size:28px;color:#64748b;margin:10px 0;\">\n          \u2193\n        <\/div>\n\n        <div style=\"font-weight:700;color:#111827;\">\n          Server Generates Complete HTML\n        <\/div>\n\n        <div style=\"font-size:28px;color:#64748b;margin:10px 0;\">\n          \u2193\n        <\/div>\n\n        <div style=\"font-weight:700;color:#111827;\">\n          Browser Receives Content\n        <\/div>\n\n        <div style=\"font-size:28px;color:#64748b;margin:10px 0;\">\n          \u2193\n        <\/div>\n\n        <div style=\"font-weight:700;color:#166534;\">\n          JavaScript Adds Interactivity\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">With SSR, search engines and users receive meaningful HTML content earlier in the process.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This approach is particularly useful for websites and applications where content visibility directly affects business outcomes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>SaaS marketing websites<\/li>\n\n\n\n<li>E-commerce platforms<\/li>\n\n\n\n<li>Product landing pages<\/li>\n\n\n\n<li>Documentation websites<\/li>\n\n\n\n<li>Public business applications<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The main advantage of SSR is that the initial response contains the content required to understand the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instead of waiting for JavaScript execution to create the interface, the server prepares the page before delivery.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This can improve:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>initial loading experience<\/li>\n\n\n\n<li>crawlability<\/li>\n\n\n\n<li>content discovery<\/li>\n\n\n\n<li>performance perception<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">However, SSR is not a replacement for good architecture.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A poorly designed SSR application can still have performance issues, unnecessary complexity, and inefficient data fetching patterns.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The goal is not simply to use SSR everywhere. The goal is to choose the rendering strategy that matches the purpose of the application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Server-Side Rendering Works<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In an SSR application, the server is responsible for preparing the first version of the page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, imagine a SaaS website displaying a pricing page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With client-side rendering, the browser may need to:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Load the application<\/li>\n\n\n\n<li>Download JavaScript<\/li>\n\n\n\n<li>Execute the code<\/li>\n\n\n\n<li>Fetch pricing information<\/li>\n\n\n\n<li>Generate the interface<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">With server-side rendering:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>User requests the pricing page<\/li>\n\n\n\n<li>Server retrieves the required information<\/li>\n\n\n\n<li>Server creates the HTML<\/li>\n\n\n\n<li>Browser receives the completed page<\/li>\n\n\n\n<li>JavaScript enhances the experience<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">The user receives meaningful content sooner, while JavaScript still provides the interactive experience modern applications require.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Frameworks such as Next.js have made SSR easier to implement by providing built-in rendering capabilities and application architecture patterns.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">When Should Developers Use SSR?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">SSR is useful when pages need to be discovered, indexed, and ranked.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Marketing Pages<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A company homepage, product page, or service page benefits from being immediately understandable to search engines.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A page targeting:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8220;custom SaaS development services&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">should expose meaningful content in the initial response.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Content Platforms<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Blogs, documentation, and knowledge bases rely heavily on search visibility.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Users should be able to discover individual articles through search engines.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Product Pages<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">E-commerce and software product pages often depend on organic traffic.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Search engines need access to product information, descriptions, pricing details, and structured data.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Static Site Generation (SSG): Building Pages Before Users Request Them<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Static Site Generation takes a different approach.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instead of generating pages on demand, pages are created during the build process.<\/p>\n\n\n\n<div style=\"max-width:760px;margin:40px auto;font-family:Arial,Helvetica,sans-serif;line-height:1.6;color:#333;\">\n\n  <div style=\"background:#f0fdf4;border:1px solid #bbf7d0;border-radius:16px;padding:28px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n    <div style=\"font-size:18px;font-weight:700;color:#166534;margin-bottom:8px;\">\n      1. Content Source\n    <\/div>\n\n    <p style=\"margin:0;color:#475569;\">\n      Content comes from sources such as a CMS, database, Markdown files,\n      APIs, or application data. This is the information that will be used\n      to generate the final pages.\n    <\/p>\n\n  <\/div>\n\n\n  <div style=\"text-align:center;font-size:32px;color:#64748b;margin:18px 0;\">\n    \u2193\n  <\/div>\n\n\n  <div style=\"background:#f0fdf4;border:1px solid #bbf7d0;border-radius:16px;padding:28px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n    <div style=\"font-size:18px;font-weight:700;color:#166534;margin-bottom:8px;\">\n      2. Build Process Generates Pages\n    <\/div>\n\n    <p style=\"margin:0;color:#475569;\">\n      During the build process, the application framework collects the content,\n      runs the required code, and creates complete HTML pages before deployment.\n    <\/p>\n\n  <\/div>\n\n\n  <div style=\"text-align:center;font-size:32px;color:#64748b;margin:18px 0;\">\n    \u2193\n  <\/div>\n\n\n  <div style=\"background:#f0fdf4;border:1px solid #bbf7d0;border-radius:16px;padding:28px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n    <div style=\"font-size:18px;font-weight:700;color:#166534;margin-bottom:8px;\">\n      3. Pre-Generated HTML Pages\n    <\/div>\n\n    <p style=\"margin:0;color:#475569;\">\n      The finished HTML files are created and stored before anyone visits the\n      website. These pages are ready to be delivered immediately when requested.\n    <\/p>\n\n    <div style=\"margin-top:18px;background:#ffffff;border:1px solid #cbd5e1;border-radius:10px;padding:15px;text-align:left;font-family:monospace;font-size:14px;color:#334155;\">\n      Build completed \u2192 HTML pages ready for delivery\n    <\/div>\n\n  <\/div>\n\n\n  <div style=\"text-align:center;font-size:32px;color:#64748b;margin:18px 0;\">\n    \u2193\n  <\/div>\n\n\n  <div style=\"background:#ecfdf5;border:1px solid #a7f3d0;border-radius:16px;padding:28px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n    <div style=\"font-size:18px;font-weight:700;color:#065f46;margin-bottom:8px;\">\n      4. Users and Search Engines Receive Pages\n    <\/div>\n\n    <p style=\"margin:0;color:#475569;\">\n      When users or search engines request a page, the server delivers the\n      already-generated HTML quickly without needing to create the page at that\n      moment.\n    <\/p>\n\n  <\/div>\n\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This approach works extremely well for content that does not change frequently.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Examples include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>blogs<\/li>\n\n\n\n<li>documentation<\/li>\n\n\n\n<li>company websites<\/li>\n\n\n\n<li>portfolio websites<\/li>\n\n\n\n<li>landing pages<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The advantage is speed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Because the pages already exist, the server does not need to generate them for every visitor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The result is often:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>faster loading<\/li>\n\n\n\n<li>simpler hosting<\/li>\n\n\n\n<li>excellent scalability<\/li>\n\n\n\n<li>strong SEO performance<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">For a technical blog or personal brand website, SSG can be an excellent choice because articles and pages are usually updated less frequently than application data.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Choosing Between SSR and SSG<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The choice between SSR and SSG depends on how often content changes and how users interact with the application.<\/p>\n\n\n\n<div style=\"max-width:820px;margin:40px auto;font-family:Arial,Helvetica,sans-serif;line-height:1.6;color:#333;\">\n\n  <div style=\"text-align:center;margin-bottom:35px;\">\n\n    <h3 style=\"font-size:24px;color:#111827;margin-bottom:10px;\">\n      A Modern SaaS Application Can Use Multiple Rendering Strategies\n    <\/h3>\n\n    <p style=\"margin:0;color:#475569;\">\n      Not every part of an application has the same requirements.\n      Public pages need search visibility, while private application areas\n      need speed, security, and rich user interaction.\n    <\/p>\n\n  <\/div>\n\n\n  <div style=\"display:flex;gap:25px;flex-wrap:wrap;\">\n\n\n    <!-- Marketing Website -->\n\n    <div style=\"flex:1;min-width:300px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:16px;padding:25px;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n      <h4 style=\"text-align:center;color:#166534;font-size:20px;margin-top:0;\">\n        Public Marketing Website\n      <\/h4>\n\n\n      <div style=\"background:#ffffff;border-radius:12px;padding:18px;text-align:center;border:1px solid #d1d5db;\">\n\n        <div style=\"font-weight:700;color:#111827;\">\n          Marketing Website\n        <\/div>\n\n        <p style=\"font-size:14px;color:#64748b;margin:8px 0;\">\n          Homepage, pricing pages, feature pages, blogs, documentation\n        <\/p>\n\n\n        <div style=\"font-size:28px;color:#64748b;margin:12px 0;\">\n          \u2193\n        <\/div>\n\n\n        <div style=\"font-weight:700;color:#111827;\">\n          Static Site Generation (SSG)\n        <\/div>\n\n        <p style=\"font-size:14px;color:#64748b;margin:8px 0;\">\n          Pages are generated before users visit the website.\n        <\/p>\n\n\n        <div style=\"font-size:28px;color:#64748b;margin:12px 0;\">\n          \u2193\n        <\/div>\n\n\n        <div style=\"font-weight:700;color:#166534;\">\n          Fast SEO-Friendly Pages\n        <\/div>\n\n        <p style=\"font-size:14px;color:#475569;margin:8px 0 0;\">\n          Search engines can easily crawl content and users receive pages quickly.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n\n    <!-- Dashboard -->\n\n    <div style=\"flex:1;min-width:300px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:16px;padding:25px;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n      <h4 style=\"text-align:center;color:#1e40af;font-size:20px;margin-top:0;\">\n        Private Application Dashboard\n      <\/h4>\n\n\n      <div style=\"background:#ffffff;border-radius:12px;padding:18px;text-align:center;border:1px solid #d1d5db;\">\n\n        <div style=\"font-weight:700;color:#111827;\">\n          User Dashboard\n        <\/div>\n\n        <p style=\"font-size:14px;color:#64748b;margin:8px 0;\">\n          Reports, workflows, settings, analytics, user-specific features\n        <\/p>\n\n\n        <div style=\"font-size:28px;color:#64748b;margin:12px 0;\">\n          \u2193\n        <\/div>\n\n\n        <div style=\"font-weight:700;color:#111827;\">\n          Client-Side Rendering (CSR)\n        <\/div>\n\n        <p style=\"font-size:14px;color:#64748b;margin:8px 0;\">\n          The browser creates a highly interactive application experience.\n        <\/p>\n\n\n        <div style=\"font-size:28px;color:#64748b;margin:12px 0;\">\n          \u2193\n        <\/div>\n\n\n        <div style=\"font-weight:700;color:#1e40af;\">\n          Interactive Application Experience\n        <\/div>\n\n        <p style=\"font-size:14px;color:#475569;margin:8px 0 0;\">\n          Users interact with a responsive application without traditional page reloads.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n  <\/div>\n\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">A blog article published once may work perfectly with static generation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A personalized dashboard showing real-time user information requires a different approach.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A modern application may combine multiple strategies.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This hybrid approach is common in modern SaaS platforms.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The public website focuses on discoverability and conversion.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The private application focuses on usability and functionality.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Hybrid Rendering: Combining Different Approaches<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Modern frameworks increasingly allow developers to combine rendering strategies instead of choosing only one.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A real-world SaaS application may include:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Static Pages<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>homepage<\/li>\n\n\n\n<li>about page<\/li>\n\n\n\n<li>blog articles<\/li>\n\n\n\n<li>documentation<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These pages benefit from SSG because they are content-focused.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Server Rendered Pages<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>pricing pages<\/li>\n\n\n\n<li>frequently updated product information<\/li>\n\n\n\n<li>dynamic landing pages<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These may benefit from SSR.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Client Rendered Pages<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Examples:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>dashboards<\/li>\n\n\n\n<li>analytics tools<\/li>\n\n\n\n<li>user settings<\/li>\n\n\n\n<li>internal workflows<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These usually require the interactivity provided by CSR.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This approach allows developers to optimize each part of the product based on its purpose.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A common mistake is treating an entire application as one rendering problem.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In reality, different parts of the same product often have different requirements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">JavaScript SEO Challenges Developers Need To Consider<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Understanding rendering strategies is important, but developers also need to address specific technical challenges that affect JavaScript SEO.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Empty HTML Content<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">One common challenge with JavaScript applications is the initial HTML response containing very little content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div id=\"root\"&gt;&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">From the user&#8217;s perspective, this is not a problem because JavaScript quickly creates the interface.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, the initial response provides limited information before rendering happens.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For important public pages, developers should ensure that meaningful content is available as early as possible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This includes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>headings<\/li>\n\n\n\n<li>paragraphs<\/li>\n\n\n\n<li>navigation links<\/li>\n\n\n\n<li>structured information<\/li>\n\n\n\n<li>metadata<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Dynamic Metadata Problems<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Metadata provides important information about a page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Search engines use elements such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>title tags<\/li>\n\n\n\n<li>meta descriptions<\/li>\n\n\n\n<li>Open Graph information<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">to understand and present pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A common problem in JavaScript applications is accidentally sharing the same metadata across multiple pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;title&gt;My Application&lt;\/title&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Every route should not have the same title.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A better approach:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;title&gt;Payroll Software for Growing Businesses | Company Name&lt;\/title&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Each important page should communicate its purpose clearly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A SaaS homepage might focus on the product.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A feature page might focus on a specific capability.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A blog article should describe the topic being discussed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">JavaScript Routing and Search-Friendly URLs<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Routing determines how users move through an application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It also affects how search engines discover pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Modern applications should create meaningful URLs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Example:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Poor:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>example.com\/#\/features<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Better:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>example.com\/features<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Clean URLs provide several benefits:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>easier sharing<\/li>\n\n\n\n<li>clearer structure<\/li>\n\n\n\n<li>better analytics<\/li>\n\n\n\n<li>improved understanding by search engines<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Applications should also ensure important pages are connected through proper links.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A page that exists but has no discoverable path may struggle to receive visibility.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Performance Optimization and JavaScript SEO<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">SEO is not only about whether content exists.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Performance also affects user experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Modern applications often include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>large JavaScript bundles<\/li>\n\n\n\n<li>multiple dependencies<\/li>\n\n\n\n<li>third-party scripts<\/li>\n\n\n\n<li>complex components<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Without optimization, these can slow down the application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Important performance considerations include:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">JavaScript Bundle Size<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Large bundles require more time to download and execute.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Developers can improve performance through:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>code splitting<\/li>\n\n\n\n<li>removing unnecessary dependencies<\/li>\n\n\n\n<li>lazy loading components<\/li>\n\n\n\n<li>optimizing libraries<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Core Web Vitals<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Performance metrics such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Largest Contentful Paint<\/li>\n\n\n\n<li>Interaction to Next Paint<\/li>\n\n\n\n<li>Cumulative Layout Shift<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">help measure user experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A technically advanced application should still feel fast and responsive.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">JavaScript SEO With React, Vue, Angular, and Next.js<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Different JavaScript frameworks provide different approaches to SEO.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">React SEO<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">React provides developers with a powerful component-based architecture.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, a React application requires careful consideration around:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>rendering strategy<\/li>\n\n\n\n<li>routing<\/li>\n\n\n\n<li>metadata<\/li>\n\n\n\n<li>performance<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">A React SPA can rank, but developers need to ensure search engines can access important content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Frameworks such as Next.js extend React with features like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>server rendering<\/li>\n\n\n\n<li>static generation<\/li>\n\n\n\n<li>improved routing<\/li>\n\n\n\n<li>metadata management<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Vue SEO<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Vue provides a flexible approach to frontend development.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For SEO-focused Vue applications, frameworks such as Nuxt provide additional rendering capabilities.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nuxt allows developers to build applications with:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>server rendering<\/li>\n\n\n\n<li>static generation<\/li>\n\n\n\n<li>improved content delivery<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Angular SEO<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Angular applications can also achieve strong SEO performance.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Solutions such as Angular Universal allow developers to generate server-rendered content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The important lesson across all frameworks is that SEO depends less on the framework name and more on architecture decisions.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">JavaScript SEO for SaaS Applications<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">As someone who builds software systems, I see JavaScript SEO as especially important for SaaS products.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A SaaS application is usually not just one website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It normally consists of multiple experiences serving different purposes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The public side exists to attract users.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The application side exists to serve users.<\/p>\n\n\n\n<div style=\"max-width:760px;margin:40px auto;font-family:Arial,Helvetica,sans-serif;line-height:1.6;color:#333;\">\n\n  <div style=\"text-align:center;margin-bottom:30px;\">\n\n    <h3 style=\"font-size:24px;color:#111827;margin-bottom:10px;\">\n      A Typical SaaS Application Structure\n    <\/h3>\n\n    <p style=\"margin:0;color:#475569;\">\n      A SaaS product usually combines a public-facing website for attracting\n      users and a private application for delivering business functionality.\n    <\/p>\n\n  <\/div>\n\n\n  <div style=\"background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:25px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);\">\n\n\n    <div style=\"background:#ffffff;border:1px solid #cbd5e1;border-radius:12px;padding:18px;\">\n\n      <div style=\"font-size:18px;font-weight:700;color:#111827;\">\n        Marketing Website\n      <\/div>\n\n      <p style=\"margin:8px 0 0;color:#64748b;\">\n        Landing pages, product pages, blog content, documentation, and SEO-focused resources.\n      <\/p>\n\n    <\/div>\n\n\n    <div style=\"font-size:32px;color:#64748b;margin:15px 0;\">\n      \u2193\n    <\/div>\n\n\n    <div style=\"background:#ecfdf5;border:1px solid #bbf7d0;border-radius:12px;padding:18px;\">\n\n      <div style=\"font-size:18px;font-weight:700;color:#166534;\">\n        Search Visibility\n      <\/div>\n\n      <p style=\"margin:8px 0 0;color:#475569;\">\n        Users discover the product through search engines, content marketing,\n        and organic traffic.\n      <\/p>\n\n    <\/div>\n\n\n    <div style=\"font-size:32px;color:#64748b;margin:15px 0;\">\n      \u2193\n    <\/div>\n\n\n    <div style=\"background:#ffffff;border:1px solid #cbd5e1;border-radius:12px;padding:18px;\">\n\n      <div style=\"font-size:18px;font-weight:700;color:#111827;\">\n        User Signup\n      <\/div>\n\n      <p style=\"margin:8px 0 0;color:#64748b;\">\n        Visitors become users by creating accounts, starting trials, or subscribing\n        to the service.\n      <\/p>\n\n    <\/div>\n\n\n    <div style=\"font-size:32px;color:#64748b;margin:15px 0;\">\n      \u2193\n    <\/div>\n\n\n    <div style=\"background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:18px;\">\n\n      <div style=\"font-size:18px;font-weight:700;color:#1e40af;\">\n        Application Dashboard\n      <\/div>\n\n      <p style=\"margin:8px 0 0;color:#475569;\">\n        The authenticated product experience where users manage data, workflows,\n        settings, reports, and business processes.\n      <\/p>\n\n    <\/div>\n\n\n    <div style=\"font-size:32px;color:#64748b;margin:15px 0;\">\n      \u2193\n    <\/div>\n\n\n    <div style=\"background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:18px;\">\n\n      <div style=\"font-size:18px;font-weight:700;color:#9a3412;\">\n        Business Operations\n      <\/div>\n\n      <p style=\"margin:8px 0 0;color:#475569;\">\n        The software delivers measurable value by improving efficiency,\n        automating processes, and helping businesses achieve their goals.\n      <\/p>\n\n    <\/div>\n\n\n  <\/div>\n\n<\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">A SaaS application is not only the dashboard that users interact with after signing in. It is an entire ecosystem that begins before a user creates an account.<\/p>\n<\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">The marketing website is responsible for discovery. This is where SEO plays a critical role because potential customers need to find the product through search engines. Blog articles, landing pages, documentation, and product pages help attract users who are searching for solutions.<\/p>\n<\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Once a visitor discovers the product, the journey moves toward signup and onboarding. After authentication, the user enters the application dashboard where the focus changes from visibility to functionality.<\/p>\n<\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">This separation is important when making architecture decisions. The public-facing parts of a SaaS platform often benefit from SSR or SSG because they require search visibility. The authenticated application area can rely more heavily on CSR because the priority is a smooth and interactive user experience.<\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">The marketing website needs:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>SEO<\/li>\n\n\n\n<li>content<\/li>\n\n\n\n<li>landing pages<\/li>\n\n\n\n<li>documentation<\/li>\n\n\n\n<li>product information<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The application dashboard usually needs:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>authentication<\/li>\n\n\n\n<li>security<\/li>\n\n\n\n<li>performance<\/li>\n\n\n\n<li>usability<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">It does not necessarily need to rank because users access it after signing in.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Understanding this separation helps developers build better SaaS products.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">How I Approach JavaScript SEO When Building Applications<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">When building modern applications, I believe SEO should be considered during architecture planning rather than added after development.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Many SEO problems are actually engineering problems.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">They often begin with decisions around:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>rendering strategy<\/li>\n\n\n\n<li>routing architecture<\/li>\n\n\n\n<li>content delivery<\/li>\n\n\n\n<li>application structure<\/li>\n\n\n\n<li>performance optimization<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Before building a public-facing application, I consider questions such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Which pages need search visibility?<\/li>\n\n\n\n<li>Which pages require dynamic functionality?<\/li>\n\n\n\n<li>Should this section use SSR, SSG, or CSR?<\/li>\n\n\n\n<li>How will content be delivered?<\/li>\n\n\n\n<li>How will search engines discover important pages?<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">These decisions influence the long-term success of the application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A well-designed application should not force a choice between user experience and search visibility.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With the right architecture, developers can build products that are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>fast<\/li>\n\n\n\n<li>scalable<\/li>\n\n\n\n<li>secure<\/li>\n\n\n\n<li>interactive<\/li>\n\n\n\n<li>discoverable<\/li>\n<\/ul>\n\n\n\n<h1 class=\"wp-block-heading\">JavaScript SEO Checklist for Developers<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Before launching a JavaScript application, developers should review:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Use Search-Friendly URLs<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Create clear URLs that represent real pages and resources.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Provide Unique Metadata<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ensure every important page has relevant titles and descriptions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Choose the Right Rendering Strategy<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use CSR, SSR, SSG, or hybrid rendering depending on the purpose of each page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Optimize JavaScript Performance<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Reduce unnecessary scripts and improve loading efficiency.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Create Crawlable Navigation<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use proper links so search engines can discover important content.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Monitor Search Performance<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use tools such as Google Search Console to understand indexing and visibility.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Test Pages Before Launch<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Review how pages appear without relying only on the browser experience.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\">Final Thoughts<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript has transformed modern web development by allowing teams to build powerful and interactive applications.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">However, building a successful application requires more than writing frontend code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The architecture behind the application determines how well it performs, how users experience it, and how easily search engines can understand it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript SEO is not about avoiding modern frameworks.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is about making thoughtful engineering decisions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Whether building a SaaS platform, business application, or modern website, developers need to consider both the user experience and the search experience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The best applications are not only functional.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">They are scalable, accessible, fast, and discoverable.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Modern web applications are powerful, interactive, and scalable, but search visibility depends on the architecture behind them. In this guide, I explain how JavaScript SEO works, how search engines process JavaScript applications, and the rendering strategies developers can use to build fast, crawlable, and SEO-friendly products.<\/p>\n","protected":false},"author":1,"featured_media":376,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[23,119],"tags":[62,56,51,60,57,37,59,61,34,30,50,64,55,52,54,36,63,53,58],"class_list":["post-372","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-engineering","category-technical-seo","tag-angular-seo","tag-client-side-rendering","tag-frontend-development","tag-full-stack-development","tag-javascript-applications","tag-javascript-seo","tag-modern-web-development","tag-next-js-development","tag-react-seo","tag-saas-development","tag-search-engine-optimization","tag-seo-friendly-applications","tag-server-side-rendering","tag-single-page-applications","tag-static-site-generation","tag-technical-seo","tag-vue-js-development","tag-web-application-development","tag-web-performance-optimization"],"_links":{"self":[{"href":"https:\/\/winniemuriuki.co.ke\/blog\/wp-json\/wp\/v2\/posts\/372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/winniemuriuki.co.ke\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/winniemuriuki.co.ke\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/winniemuriuki.co.ke\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/winniemuriuki.co.ke\/blog\/wp-json\/wp\/v2\/comments?post=372"}],"version-history":[{"count":6,"href":"https:\/\/winniemuriuki.co.ke\/blog\/wp-json\/wp\/v2\/posts\/372\/revisions"}],"predecessor-version":[{"id":406,"href":"https:\/\/winniemuriuki.co.ke\/blog\/wp-json\/wp\/v2\/posts\/372\/revisions\/406"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/winniemuriuki.co.ke\/blog\/wp-json\/wp\/v2\/media\/376"}],"wp:attachment":[{"href":"https:\/\/winniemuriuki.co.ke\/blog\/wp-json\/wp\/v2\/media?parent=372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/winniemuriuki.co.ke\/blog\/wp-json\/wp\/v2\/categories?post=372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/winniemuriuki.co.ke\/blog\/wp-json\/wp\/v2\/tags?post=372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}