Sep 5, 2022 1 reads

test

HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello

Sep 5, 2022 7878 reads

What is Client-Side Rendering (CSR) and Server-Side Rendering (SSR)?

All of the work done for search engine bots to better understand, crawl, and index sites written in Javascript is called Javascript SEO. Analyzing the complete crawlability of text, image, and video content is a top priority for SEO professionals. With the increase of websites written with Javascript, Javascript SEO studies have also started. Modern front-end libraries (React JS, Vue JS, Angular JS, etc.) have paved the way for a new study here. If we go much more fundamentally, as we know, web pages consist of 3 main parts. 1. HTML – We can think of it as the skeleton and content area of your website. A page consisting entirely of Html can give you information but does not offer an attractive design.2. CSS – CSS files that add visuality and design to HTML. Thanks to CSS, we can access the web page design we are familiar with.3. Javascript – It is the programming language that enables movable or changeable areas on a website. When you hover over an area, its color changes, or when you scroll the page, new content is loaded at the bottom thanks to javascript. According to the user's movement, Javascript files are run in the background and the final structure to be shown to the user is presented. With the developments on the software side, websites have recently started to be coded only with JS. Code lines are not presented individually in HTML, but are given directly over JS files. So, how well could Google adapt to these developments?Google & Javascript Relationship Google Javascript sites have started to understand and make sense of it much better in recent years. However, crawling sites written directly in JS is very costly for Google. Compared to a normal site, it both spends more time browsing and exhausts its servers. So what is Google doing to optimize this expense? Google uses a method called 2-stage crawling to crawl pages written in Javascript. In the first stage, Googlebot enters your site, scans the HTML and CSS, and adds it to its index. It also sees the Javascript files here but leaves it to the 2nd time to scan and understand them. In the meantime, it starts to show the results as far as the user sees in the first stage. It puts your site in a row within itself for 2nd wave scanning. This can take hours or days. It evaluates your site in order of its own priority based on its value and authority. When it comes to the 2nd wave, it also scans the Javascript files and adds them to the index. Thus, it starts to show the user the final version that you actually planned. How Is Javascript Different From Other Languages For Google? The browsers we use parse HTML, CSS, and JS through render engines. Therefore, it must be rendered first. Languages such as PHP and Python stand out as languages rendered on the server side. Alternatives such as Angular and React from languages coded with JS can be rendered with both Server Side Rendering (SSR) and Client Side Rendering (CSR) methods. How Does GoogleBot Crawl Javascript Sites There are 2 different methods for the correct crawling and indexing of sites written in Javascript by search engine bots. Client Side Rendering (CSR) (Including Dynamic Rendering) Server Side Rendering (SSR) Client-Side Rendering (CSR) The user or the browser of the search engine makes a request to your address. The server accepts the request and returns the response. The browser downloads the content and accompanying JS files. The browser executes JS files to view the content. The content becomes interactable by users and bots. Pros and Cons of CSR (+) Faster processing after first-page load (+) Puts less load on the server (+) Provides rich site interaction (+) Provides fast website navigation (fewer HTTP requests to the server as it doesn't have to be re-downloaded for every page load) (-) Slower loading of the first page (due to loading of assets required for multiple pages) (-) Delayed loading on devices with low processors. (-) Late loading when the internet connection is weak. (-) It negatively affects SEO if not implemented properly. (The page will appear blank until the Javascript codes are run and the content is created at the opening of the page) (-) External libraries are needed very often. Risks of CSR SEO Your page, which you have prepared using the most modern technologies, may appear as a blank page for Google. If you have a site written with modern Javascript libraries, frequently check how Google understands your site via the "Show Crawled Page" button in the URL Checking tool via Google Search Console. If your page is still not in the Google index, you can also test it on the live URL. Dynamic Rendering Dynamic Rendering is a method used for websites created in CSR to be SEO compatible. The main difference lies in offering different rendering formats to GoogleBot and users. When the server request is made, it is understood whether the request is made via GoogleBot or by the user on the server side. If rendered by GoogleBot, it returns an HTML response that will be rendered on the server. Users continue to view your site as CSR. Server-Side Rendering (SSR) The user or the browser of the search engine makes a request to your address. The server accepts the request, renders the entire HTML and returns the response. The browser downloads the generated HTML and JS files. The content becomes interactable by users and bots. Pros and Cons of SSR (+) Improves user experience by making pages load faster. (+) It is advantageous in terms of SEO. (+) It is a much more ideal structure for sites that offer static content. (+) Fewer JS dependencies are available. (+) Also ideal when the user's internet connection is slow. (-) When the server has a large number of visitors or the site is large, it can cause significant slowdowns in page rendering. (TTFB time may be affected) (-) It has to reload the whole page on each navigation. (-) Server costs will be high to provide higher performance.

Sep 5, 2022 3636 reads

How to Check Google Index in 10 Steps?

Updates in search engine algorithms have made many metrics and technical infrastructure important for providing a more successful user experience. In the period from 2015 to 2022, users' mobile and tablet usage increased significantly, while desktop and laptop usage decreased. This situation has caused poor user experiences, especially on sites with large page sources.For example, users visiting a website from mobile devices experience excessive resource consumption and wasted time while loading websites with high-volume images and unused CSS and JS files. This is because the loading times and site speeds of such websites provide an inadequate experience for users, and since the user accesses the site from a search engine, it also causes search engines to lose image.Aware of this, search engines have started to pay significant attention to website speed and resource consumption with the latest updates in their algorithms. To optimize this situation, website owners have strengthened their optimizations in this regard by analyzing the speed and resource consumption of their websites with measurement tools such as Pagespeed and GTMetrix.Pagespeed Page Speed AnalysisAmong the most important performance tools used when optimizing a website, Pagespeed and GTMetrix tools undoubtedly come first. Pagespeed, in particular, developed by Google, shares with us the speed metrics that prevent a successful user experience on websites.One of the metrics that website owners frequently encounter and often fail to solve in Pagespeed analyses is the removal of unused CSS files.Unfortunately, Pagespeed and GTMetrix tools do not share with us which lines in the unused CSS files are actively used, but only provide us with estimated savings and files. This warning alone is not enough to solve this problem.What Are Unused CSS Files?In today's modern web programming technologies, many developers prefer ready-made libraries instead of coding HTML & CSS from scratch. Libraries like Boostrap and Tailwind are examples of these structures. The difference of ready-made CSS libraries is that they collect many button, navbar, grid structure, visual and design commands under certain classes in a single library. In this way, web site developers can easily use all style and CSS arrangements by giving a class to the relevant HTML element, instead of writing separate CSS commands for each structure and module. For example, while many lines of CSS code need to be written to give a button various color and radius styles and hover effects, the desired style arrangements can be obtained by giving a single class since the relevant commands and lines are included in the ready-made library.Although ready-made CSS libraries are very practical for developers, they can cause some problems in SEO-related arrangements as they increase the query and resource consumption on the website. For example, when you include the bootstrap library on your website, you can actively use only 1 or 2 of the 16 different button styles in it. The remaining 14 button styles continue to be included in the CSS file and increase the page's resource consumption even though they are not actively used.In these cases, performance tools that measure speed, such as PageSpeed, inform us that there are actively unused CSS files on the website and ask us to make optimizations related to this.How to Detect Unused CSS Files?There are several ways to detect unused CSS lines on a website. You can use modules like purgeCSS or manually view these lines from the page inspection.To detect unused CSS files, the first thing you need to do is right-click on the page and click on the "Inspect" option.Then click on the three dots on the right side of the window that opens and click on the More Tools > Coverage option.You will see a record button in the section that opens at the bottom. Click this button and refresh the page with CTRL + F5 or Command + F5. After the page is refreshed, you will see that many CSS and JS files have appeared below.The rates on the right side in this section show the unused rate in the relevant CSS file at the moment the page is loaded.When you click on any CSS file, the relevant file opens in the window, and you can again view the unused CSS lines in red and the actively used ones in blue.The important detail here is to determine which code is used on different pages and which lines are active on mobile and tablet devices.How to Remove Unused CSS Files?We learned where to see the unused CSS lines on the website. However, the important part here is to be able to analyze well which CSS line is really used and which is not. Because some CSS lines may be included in a single file for different pages, as well as being included in mobile and tablet devices.For this reason, you should first copy the unused lines from the ready-made library codes in the CSS lines, then navigate to the service, category, product, contact, etc. pages of the site and perform the coverage process we shared above on each page.In addition to this process, you should switch to the mobile and tablet views of your website from the device selection area in the inspect section and, in the same way, visit all pages and copy the unused CSS lines to one side.In the final stage, you can clean the common and actively unused CSS lines among all the CSS lines you have copied.Note: It is recommended that you perform all these operations on the test version of your website and, after performing the cleaning, carry it to the main version if no problems are observed.

Sep 5, 2022 855 reads

Creating Personas and Funnels in Digital Media Planning

In digital marketing—and especially in e-commerce—identifying potential customers and reaching them at the right time, in the right place, is essential.In traditional marketing, the first step to identifying target customers is creating personas and developing individual strategies for each. However, this is not enough to get ahead of your competitors. The tools of digital marketing have introduced an unprecedented level of data and customer insight into the marketing world.This boundless sea of marketing data has made it necessary to create more nuanced personas and develop micro-level strategies tailored to these segments. Undoubtedly, in today’s marketing world, the leading brands are those that can interpret this data most effectively and turn their learnings into powerful strategies.The key to interpreting data and creating strategies lies in understanding the source of the data—in other words, identifying the users from whom the data is gathered. Comparing different customer groups using the same metrics is often the first and most critical mistake made.To put it simply: while strategy creation requires creativity, reading data requires numerical and analytical thinking. Identifying the customer, on the other hand, is a part of marketing that draws heavily from social sciences like psychology, philosophy, and sociology.1. First Step in Defining the Customer: Persona CreationAlthough there are various approaches today, the widely accepted method for persona creation in marketing is based on consumption motivation. Since personas are often associated with demographic details like age and gender, these are usually the first elements considered. But this is a mistake.Potential customers should first be segmented based on the motivations that drive them to purchase. Then, the demographic characteristics of these personas can be examined. In other words, demographics are not the cause—they are the result.Pro Tip: The personas you create may overlap or be interchangeable. For example, imagine you're managing an e-commerce platform that sells stationery products. A 30-year-old white-collar male with a university degree might purchase products for his company, buy colored pencils for his child to use at school, or make a personal purchase simply because he enjoys drawing.These three different purchasing motivations require three different strategies. Therefore, a defined demographic group can include multiple personas (overlap), and the same user can belong to different personas at the same time (interchangeability).2. Second Step in Defining the Customer: Funnel CreationThe persona definition provides a general and static profile of your target customer. However, your communication with the customer is constantly changing and evolving based on actions you take and macro variables. Within the same persona, you may have both potential customers who don’t know you and loyal customers who frequently purchase from you.Trying to reach consumers at different communication stages (brand awareness) with the same ad (message) or the same advertising channel will lower the efficiency you get from that persona. Therefore, you need to define communication stages with your customers on a persona-based level and structure it within a funnel (user funnel).Although standard funnel structures are often used in marketing, digital user funnels based on personas are more complex than basic steps like awareness, consideration, and engagement.Most importantly, when defining funnel steps, it’s more functional to name them based on the user’s current milestone rather than their place in the brand communication journey. Regardless of persona, every target customer will fall into one of the groups below:2.1. New User AcquisitionNote: Users in this funnel step do not include those who have already progressed to later stages. Users who recognize your brand and logo in the context of your industry. Users who know and are convinced of the unique features that distinguish your product/service from competitors. Users who are not actively searching but may enter the search phase when approached. Users who are actively searching for a product/service. Users who have visited your digital sales channel at least once during their active search. (Retargeting begins here and continues through subsequent steps.) Users who have engaged with your platform at above-average levels (e.g., membership, favorites list). Users who have completed at least one purchase (new customers). 2.2. Remarketing Previous customers who were satisfied with their last purchase. Former customers reminded of their positive past experience. Former customers not currently searching but may become active again when approached (by you or competitors). Former customers who might specifically choose you if they re-enter the purchase phase. Past customers who have recently visited your sales channel again during an active search. Customers who have made repeat purchases (loyal customers). 2.3. EngagementWhile engagement is typically defined as strengthening interaction and communication with users who have not yet made a purchase, it also includes efforts to maximize the lifetime value of existing loyal customers.Note: Remarketing and engagement efforts are carried out simultaneously for users who have completed at least one purchase. The main goal of engagement is not just repurchasing, but generating different customer values. Former customers who were satisfied with their last purchase. Customers who have shared positive experiences in digital or social settings. Customers who have decided never to choose another brand (lovemark). Further actions depend on your marketing team’s brand vision. In the media planning phase, applying the approach above with 100% precision may not always be feasible due to the limitations of ad platforms’ infrastructure and content-advertising models. Therefore, when choosing ad platforms, it’s best to evaluate their targeting and data capabilities and decide where your funnel steps can realistically be applied.

Sep 5, 2022 4719 reads

What is SEO Title Layout? What Should the Heading Hierarchy Be Like?

One of the metrics frequently encountered in search engine optimization (SEO) work is related to the proper heading structure. One of the questions that people new to or completely unfamiliar with SEO find difficult to understand is what the SEO heading structure should be. When creating an SEO-friendly page, the titles on the page with heading tags are very important. Heading tag types are used to correctly reflect the page content, and to give the user and search engine bots the content parts and focus titles on the page. So why are heading title types so important? In our article, we have included this information for you!What Are Heading Tags?Search engine bots aim to show the most accurate and rich websites with content to users who are searching for a topic. However, since search engine bots are not human, they try to make sense of web sites by scanning them within a certain set of algorithm rules. During this interpretation process, they try to learn what the page content is about and what it explains by taking some metrics as a basis.Heading tags are one of the very important SEO metrics that help search engine bots make sense of the page. Heading tags are usually written in the "" code block and proceed hierarchically from 1 to 6.Why Should We Use Heading Tags?Heading tags are highlight texts that allow the page content to be interpreted by both the user and search engine bots. By default, style structures such as size and thickness are different and more prominent than other text. When interpreting web pages, search engines want the pages to be prepared in accordance with the user's reading and navigation order. This is because providing websites that allow users to access the information they need in the most efficient and practical way increases the reliability and prestige of search engines.For this reason, search engines want page contents to be created in an academic structure and hierarchy. Heading tags play an important role in determining this hierarchy. Because the heading tags added hierarchically on the page interpret the "main topic > sub-topic > sub-heading and description" structure and list the site results in the SERP according to the order of importance within this heading structure for the user performing the search.The use of heading tags not only helps search engines interpret the page, but also allows users visiting the web page to easily access the titles and information texts they need. Therefore, the use of heading tags is one of the most important metrics for creating an SEO-friendly web page.What Are Heading Tags?There are different types and usage examples of heading tags from 1 to 6. These heading types vary from a larger and more prominent style to a more normal and smaller font style according to the number they take. Heading types are as follows: H1: It is the main title of the page. There should be only 1 H1 tag on each page. The H1 tag specifies what topic the relevant page provides information/content about and reflects the main keyword that the page is intended to be visible for in the SERP. H2: These are the topic titles that support the main title of the page (H1). H2 tags refer to the main titles in the page content. H3: These are the subheadings that support the main headings on the page. It is used to specify titles and topics related to that tag under the H2 tag. H4, H5 and H6: They are used to specify subheadings if needed in the page content. For example, if the H3 title and texts used under the H2 main title need to be divided into more subheadings, H4, H5 and H6 headings can be used. How Should the Heading Hierarchy Be?If heading tags are to be used on a web page, these tags must be added hierarchically to the page in a way that ensures topic integrity. For example, if a web page content is created with the title Digital Marketing and this content has subheadings and topics; the heading hierarchy of the relevant content could be as follows:H1: Digital Marketing H2: What is Digital Marketing? H2: Why Digital Marketing? H2: Advantages and Disadvantages of Digital Marketing H3: Advantages of Digital Marketing H3: Disadvantages of Digital Marketing H2: Digital Marketing Courses H3: Which Course Should I Take for Digital Marketing? H4: Udemy Digital Marketing CourseWhat is important when creating the heading hierarchy is that the titles maintain their topic integrity and that the subheadings are always added after the main headings related to that topic. For example, while there is an H2 in the Digital Marketing Courses title, the title Which Course Should I Take for Digital Marketing? should be a subheading of the Digital Marketing Courses title. Therefore, this title is added in the H3 tag and this title should be placed immediately after the Digital Marketing Courses H2 title.Common Mistakes in Using Heading TagsMany websites make mistakes in topic integrity and heading hierarchy when using heading tags in their content. These mistakes make it difficult for search engine bots to interpret and make sense of the page, while also providing the user with an aesthetically inefficient content. Common mistakes when using heading tags are usually as follows:Adding All Content Titles with H2 TagGenerally, due to its style and font size, websites can only use H2 in content titles. However, this is a very wrong method. This is because the style and font sizes of the headings (H2, H3, H4, etc.) can be adjusted with the help of CSS and brought to the desired size and highlighting tones. The main reason for using heading tags in the content is not style and form, but to help search engine bots understand the page hierarchy. Therefore, using all headings within H2 tags is a very wrong method.Using H2 Heading Without Adding Text After H1One of the mistakes many websites make is to add the H1 tag used on the page just for the sake of using it. However, the H1 tag is arguably the most important heading tag that reflects the main keyword of the page content. Therefore, a text content of 100-150 words should be included after the H1 tag. This text content supports the H1 heading tag by providing a summary of the page and the main topic of the page. After that, H2, H3 and other subheadings should be included.Placing All Subheadings at the End of the ContentSome websites misunderstand the heading hierarchy and add all H2 headings first, then all H3 headings on the page. The hierarchy here is related to the topic integrity of the writing and headings. Therefore, using heading types in order on the page is a wrong hierarchy. The correct heading usage structure is as we gave in the example above: Main Heading > Subheading that concerns the Main Heading if any. So, after using H2 and then H3 on the page, if a different main heading that does not concern the used H2 and H3 headings is to be added, it should be added to the page again with the H2 tag.Using Heading Tags in Fixed Areas of the PageHeading tags are often used in many fixed areas on pages due to their form and font size. For example, using heading tags in menu links in the header, in social media links, or in links and category sidebars in the footer is a method that spoils the interpretation of the page content. This is because heading tags are used to ensure the heading hierarchy and topic integrity of the page content. Therefore, for fixed areas and links on pages, instead of headings, span tags can be used and their form and font size can be adjusted with the help of CSS.Hiding H1 Tag with CSSOn many websites, the H1 tag is not wanted to be used because of its font size and form. This is because the H1 tag is the tag with the largest and most prominent font on the page. In this case, websites hide the H1 tag they added just to have used H1 on the page by making it display:none or visibility:hidden with the help of CSS. However, this method is old and provides no benefit. This is because search engine bots can interpret texts and headings that are hidden on the page. Therefore, when the H1 added to the page is hidden with the help of CSS and not shown to the user, it is considered invisible to search engine bots and cannot provide the benefit it should. Instead of hiding the H1 tag added to the page with the help of CSS, the size and form of the H1 tag can be adjusted in the same CSS code line to make it compatible with the page aesthetics.

Sep 5, 2022 976 reads

How to Integrate Virtual Page with GTM Element Visibility

In this blog post, you'll find answers to the question above and gain detailed insights into what a Virtual Page is, its advantages and disadvantages, and how to manage this process without developer support by integrating it with GTM Element Visibility.In cases where the page URL does not change but the content does, you may sometimes need additional page tracking and more detailed analysis. To conduct in-depth funnel analysis in such scenarios, let's explore what these definitions mean and how you can implement them via GTM without developer assistance using Element Visibility.What is a Virtual Page (Single Page Application)?A Virtual Page, or SPA (Single Page Application), which helps your site perform faster, is a type of web application that interacts with the user by dynamically rewriting the current page instead of loading entire new pages from the server.In a SPA, all the source code loads at once when the site opens, and new pages are displayed by running frontend scripts, using the preloaded code. The advantage here is that when users navigate to a different page, they don’t have to wait for the code to reload. In short, Virtual Pages improve site speed and enhance the user experience.For example, imagine browsing an e-commerce website and opening various products. In a traditional structure, each product click sends a new request to the server, which reloads the entire page. While this may seem fine, during high traffic periods, it can significantly slow down your site.In a SPA scenario, since all source code is preloaded, user actions are managed through existing code, and page speed isn’t affected. When a page is clicked, it changes—but isn’t reloaded.However, alongside the speed advantages, SPAs can also negatively impact your site. One issue is broken source tracking, known as rogue referrer. The referrer data, which tells you where your users came from and how long they stayed, may be disrupted in SPAs.Additionally, SPA applications can pose disadvantages for SEO. Since SPAs are seen as a single page, it can hinder proper indexing by search engines and lower your page rankings.Advantages of SPA (Single Page Application): Speed / Performance: As mentioned, SPAs dynamically update the content without reloading the whole page, allowing users to take action quickly within the site. UX (User Experience): SPAs provide an experience similar to mobile apps by preventing interruptions during navigation, offering a smooth and practical experience. Caching: SPAs enable faster caching, allowing the use of local data and connection flow effectively—even during internet issues—ensuring continued usability. Disadvantages of SPA (Single Page Application): Rogue Referrer: Tracking sources may be disrupted, making it difficult to detect where users came from, which hinders detailed funnel analysis. SEO: Since SPAs appear as a single page, they may prevent your site from being indexed properly, affecting search engine rankings. The “All Pages” trigger in GTM is fired on full page loads, so it doesn't work on Virtual Pages. This becomes a limitation when detailed funnel analysis is required.To solve this, first, identify where Virtual Pages are used on your site, then see how integration is done using GTM Element Visibility.Areas Where Virtual Pages Are Used Virtual Cart Pages: These are side panels showing cart/summary without navigating to a new page. Lead Generation Pages: Often used in SMS or consent pop-ups. Common Examples of Virtual Page Use: Gmail Facebook Twitter Google Drive Google Maps Netflix How to Integrate a Virtual Page?The first method is pushing events via developer support—either natively or through GTM. While this may seem easy, relying on developers can slow things down or prevent fast intervention in case of issues.The second method—covered here—is using GTM Element Visibility. This allows fast implementation without developer involvement and supports detailed funnel tracking.Virtual Page Integration with GTM Element VisibilityWe'll use GTM for virtual cart and lead generation examples. Your website must have GTM installed. Then, you can configure the Element Visibility trigger. First, let’s understand how this trigger works.When you select “New Trigger” in GTM, you'll see the screen below.Clicking on “Trigger Configuration” asks you to select a trigger type.When you choose “Element Visibility,” the following screen appears:The Element Visibility trigger can be fired in 3 ways: Once per page: Trigger fires only once per page load—ideal for limiting duplicate hits. Once per element: Trigger fires for each instance—useful if a user reopens a pop-up multiple times. Every time an element appears on screen: Trigger fires each time the element appears according to the specified visibility threshold. Percent visible defines how much of the element is visible, while minimum percent visible is the threshold to trigger. Default is 50%.With minimum on screen duration, you can also set a minimum time (e.g., 1000 ms) before triggering.If the element loads after page load, use observe DOM changes to detect it properly.GTM Element Visibility for Virtual Cart PagesSelect your target element using browser inspector tools (Inspect > Elements).Use the most minimal and stable selector—for example:document.querySelector("box-flex. cart-summary")... Validate that the element exists only once on the page by running:document.querySelector("box-flex. cart-summary")Once the trigger is set, proceed to tag configuration. To push data as a pageview, configure it in GA and override the default page URL via More Settings > Field to Set, customizing the page name and title fields.GTM Element Visibility for Lead Generation PagesIn some cases, SMS confirmation is shown via pop-ups, not new pages. Without tracking these, it's hard to know when users exit the SMS funnel.By tracking SMS modals with Element Visibility, you can push virtual pageviews to GA and gain detailed insights.With these examples, brands using virtual cart pages or lead generation pop-ups can perform Virtual Page Integration using GTM Element Visibility—without developer support—allowing more accurate performance measurement and analysis.See you in the next post…