Sep 3, 2022 1403 reads

What is JavaScript SEO and How is it Done?

One of the most common problems faced by people doing SEO work is that JavaScript content is not discovered by search engines. If you are dealing with sites built with JavaScript, the issues you encounter will be quite different from classic content management systems.If you want to succeed in search engines with a JavaScript-heavy site, you need to carry out JavaScript SEO. You must ensure that your site’s pages are created correctly, indexed, and are search-engine friendly.What is JavaScript?JavaScript is highly valuable when it comes to web development solutions. HTML and CSS are the foundation, but many developers prefer to leverage JavaScript. The reason is that JavaScript makes it possible to make sites more interactive.When JavaScript is used, it becomes easier to update the content on pages dynamically. For example, websites that share constantly streaming data like match scores use JavaScript. This way, data is updated in real time with minimal delay.Without JavaScript, you would need to refresh the page constantly to follow such data. Therefore, even if you build the foundation of the site using HTML and CSS, you need JavaScript to make the site interactive and perform real-time updates.What is JavaScript SEO?JavaScript SEO is part of technical SEO work. It is indispensable for sites built with JavaScript. JavaScript usage is quite popular. It is especially used on e-commerce sites to generate main content or to link to similar products.Despite its popularity, sites built with JavaScript often perform poorly in search engines. The main reason is that JavaScript SEO efforts have not been carried out correctly.Google Index and JavaScriptUsing JavaScript is great for users. However, the same cannot be easily said for search engines like Google. Getting JavaScript content indexed by Google does not always happen. Google’s approach to this is a bit different.While Google can easily index some content created with JavaScript, it may not index other content. Here, it’s important that the site using JavaScript content is structured correctly. However, you may encounter a similar situation even if your site is built with HTML. JavaScript Crawling Difficulty: On HTML sites, crawling content is quite easy. Search engine crawlers scan everything quickly. On JavaScript sites, the crawler visits the site but cannot find the links. It downloads and renders JS files and then examines them. Crawler Limitations: Google’s crawler does not always crawl all content. If the content on your site depends on cookies and other stored data, the crawler may not see them. Therefore, it’s not easy to say Google is excellent at JavaScript rendering. Despite these challenges and limitations, Google continues to improve its search crawler. As long as content is important to Google, it is considered worth rendering. In addition, when the rendering process takes too long, Google’s crawler is designed to skip it.Is Using JavaScript Bad for SEO?JavaScript makes it harder to detect various SEO problems because it’s not guaranteed that Google will execute every JavaScript snippet on a page. While trying to make your site successful, you must put in extra effort—and most importantly—apply JavaScript SEO methods.JavaScript is not entirely bad for SEO. Many sites that use JavaScript extensively still enjoy strong organic visibility. In modern web development, JavaScript is a necessity—just like HTML and CSS.Is JavaScript SEO Mandatory?If you own a JavaScript-heavy site, JavaScript SEO is mandatory. Without this work, you’ll struggle to ensure your content is discovered by Google. If the content located within the JavaScript section isn’t discovered, this may also mean the page itself isn’t discovered.Even though Google is getting better at reading and interpreting JavaScript content day by day, you still need to take the necessary steps to be discoverable. If your site content is tied to JavaScript, you should use JavaScript SEO methods to ensure it gets indexed.JavaScript SEO: Core RequirementsOnce you clearly understand the relationship between JavaScript and SEO, you can take the first step toward JavaScript SEO. If you want your JavaScript-built site to perform well on Google, you should know you must dedicate time to JavaScript SEO. Google should be able to crawl your site, understand its structure, and discover its valuable assets. Google should be able to render your site without difficulty. Google should not consume excessive crawl budget while crawling and rendering your site. If you want to succeed in JavaScript SEO, you must meet these three requirements. JavaScript rendering is a serious burden in terms of crawl budget. Once you exhaust the crawl budget Google allocates to you, some of your pages will be ignored by Google.Search-Engine-Friendly JavaScript ContentThere are two important ways to check whether JavaScript content is detected and indexed by Google. The quickest method is to use the “site:” search operator. The other method is to check your Google Search Console property. But first, you should perform the following checks: Make sure Google can technically render JavaScript content easily. It’s not enough to open Google Chrome and check the site. Instead, go to your Google Search Console property and inspect your site with the URL Inspection Tool. During checks, verify whether the main content appears. See whether Google can access the related posts or similar products section. If you notice issues during these checks, you should make the necessary adjustments as part of JavaScript SEO. If Google is having trouble rendering your site, the reasons may include timeouts, various errors, or blocked JavaScript files.After the basic checks, you should verify whether your site is on Google. To do this, search for “site:https://www.analyticahouse.com/tr/blog/seo-terimler-sozlugu” and check whether the content is on Google.If the URL you checked appears on Google, you can move on to a detailed review. Take the content located in the JavaScript-rendered section on your site and search for it on Google. From this, you can learn whether the JavaScript content has been crawled.So far, the method we tried was the simplest. However, if you want to perform a much more advanced examination, you should turn to Google Search Console. To perform the necessary checks in your GSC property, follow these steps: Log in to Google Search Console and paste the relevant URL into the URL Inspection tool. Review the inspected URL and check the content rendered with JavaScript to perform the necessary checks. Repeat similar steps for different URLs on your site. Remember that a single URL is not sufficient for verification. During checks, you may find that JavaScript content is not being crawled. The reasons can include the Googlebot timing out, rendering issues in the content, some resources being skipped, low-quality content, and the page not being discovered.Delivering JavaScript Content to GoogleAfter making your JavaScript content search-engine friendly, you need to ensure it is delivered to Google correctly. At this point, two different methods are used: server-side rendering and client-side rendering. Rendering: Rendering is the process of presenting site content, templates, and other features to the user. Rendering has two types: server-side rendering (SSR) and client-side rendering (CSR). Server-Side Rendering: With SSR, when a user visits the site, the page is rendered on the server and sent to the browser. Since JavaScript doesn’t need to be rendered separately, this is generally the most suitable method for SEO. Client-Side Rendering: CSR can be problematic in terms of performance. Slow-loading pages negatively affect overall page rankings. To avoid problems, JavaScript SEO methods and CSS should be used effectively. Some sites use both main rendering methods together. This approach is called dynamic rendering. In dynamic rendering, the site switches between the two rendering techniques depending on who is accessing the site. Thus, pre-rendered pages are served to users.When JavaScript content is delivered correctly, Google notices JavaScript code immediately and processes it properly. Google’s crawler attempts to crawl millions of sites, so there is a crawl budget allocated to each site.Google’s crawler handles JavaScript sites in two stages. In the first stage, the crawler looks at the HTML content and evaluates the site using it. Then, the JavaScript that needs to be rendered is processed. When SSR is used, indexing the site is easier.Anyone who wants to benefit from JavaScript SEO should use as much HTML content as possible. This way, critical information will be sent to the crawler in the first stage, making it possible for the site to be ranked based on that information.Common Mistakes in JavaScript SEO WorkAlthough JavaScript is uniquely important in site development, it can be a headache when not used correctly. No matter how good the site is, there will be technical shortcomings if JavaScript is misused. Therefore, you should pay attention to common mistakes when using JavaScript:Ignoring HTML: The most important information on the site should be delivered with HTML, not JavaScript. Search engine crawlers process the initial HTML. If you want your site to be indexed quickly, create critical information with HTML.Incorrect Use of Links: Links help people interact better with your site. When using JavaScript, you need to structure links correctly. If the site is structured with JavaScript, Google recommends not using HTML elements for links.Blocking Google Bots: Unless Google’s crawlers revisit your site, they cannot detect JavaScript code. Some developers use the “noindex” tag, making this revisit impossible. Make sure you don’t have this kind of issue on your site.JavaScript and PaginationMany sites use pagination to spread long content across multiple pages. However, most of these sites only allow Google to visit the first page. Therefore, when Google crawls, it cannot notice the other valuable content.The reason for this error is the link structure. Sites do not use to implement pagination. Instead, they perform pagination based on a user’s click action. As a result, Google’s crawler must “click” to view other pages.When Google’s crawler visits a site, it does not click or scroll. For Google to notice the next page, links must be used. When links are not used in this way, they are not noticed by Google and your content cannot be discovered.Use of Hashes and RedirectsOne of the most common situations in JavaScript sites is creating URLs using a hash (#). Google may have trouble crawling a page where a hash is used. You should use the correct URL structure to make Google’s job easier.Incorrect URL: https://www.analyticahouse.com/tr/#/seo-glossary Incorrect URL: https://www.analyticahouse.com/#seo-glossary Correct URL: site:https://www.analyticahouse.com/tr/blog/seo-terimler-sozlugu If you use incorrect URLs of the types mentioned, you are quite likely to face various crawling problems. Even overlooking a tiny detail means taking a problematic step in terms of JavaScript SEO. You should perform the necessary checks to avoid such situations.In addition to the use of hashes, you should pay attention to various redirects. If you are implementing redirects via JavaScript on your site, you may run into issues. Therefore, it is much better to perform redirects with server-side 301s.JavaScript SEO work is part of technical SEO. While trying to improve your site in terms of technical SEO, you should not forget the JavaScript side of things. Not every error is caused by JavaScript. Therefore, performing the correct SEO audits is very important.

Sep 3, 2022 1036 reads

2022 UI Design Trends

2021 was a year full of innovations for the design world in many respects. With the emergence of the Metaverse, we began to see significant shifts in trends. In 2022, where very different topics have arisen under UI design trends, user interface design and user experience continue to offer new experiences. As experiences evolve with digital, questions like “what is UI, what is UX, and what is the difference between UI and UX” have entered our vocabulary. Briefly, UI stands for User Interface—the entirety of designs that make it comfortable for the user to spend time on an interface. UX stands for User Experience—designing the interface to be easier, more effective, and more comfortable to use. Thus, both UI design and UX design progress in the same plane to deliver a comfortable experience. Every year, there are evolving and changing topics for all these experiences. Let’s take a look at the graphic design movements that were frequently seen throughout 2022 and will continue to emerge.Minimalism and SimplificationWe’ve known the minimalist approach for a long time, and in 2022—just like in 2021—we continue to see it frequently in designs. Minimalism appears not only in design but in all areas of life, even as a lifestyle. The community of “people who are minimizing/simplifying their lives,” increasingly popular lately, keeps growing. To closely examine how major technology companies embrace minimalism, we can look at the interfaces of brands like Apple, Meta, and Oculus. This trend, with its clean designs and floating elements, grows year after year and maintains its place among UI trends.BrutalismIn contrast to the heavy gradients and cute 3D objects and shadows we frequently see, brutalism maintains its simplicity and clarity. Brutalism lays reality bare with its sharp outlines, bold typography, flat design, and contrasting colors. This movement often features delicate details, crisp visuals, and distinctive typefaces. We’ll continue to see it, especially after its appearance in Spotify Wrapped.NFT and Democratic ArtOften difficult for people to understand, NFTs have stormed into our lives and driven us into a frenzy. Now we can sell our digital creations and earn money. This movement—where anything can be art and everyone can participate—has no boundaries. In a movement that combines many topics we’ve frequently heard in 2022 UI trends, the creator decides what counts as art. NFT and democratic art will continue to grow in user experience designs.Claymorphism in 3D3D as we know it is evolving. This simplified version is called Claymorphism. Claymorphism’s heavy light-and-shadow effects, vibrant color transitions, and soft tactile feel immerse us in true virtuality. This trend has begun appearing frequently in mobile app UI designs. Technology companies widely use it in both mobile and web interfaces, creating a “playful” vibe that meshes seamlessly with technology. Many game companies have also embraced this trend, which will continue to shape game UI design.Wild TypographyHistorically, designers aimed for “sequential consistency, absolute order, and fixed dynamism” in typography. Now, we can decorate text any way we want—tilt, stretch, slice, fragment, even swap letters with emojis. Yet we must always keep the user’s readability and comfort in mind. Wild typography, as its name suggests, favors sharp layouts and is often chosen for bold statements. It’s firmly established itself in the UI and UX world. Game studios in particular are using this style, and it shows no signs of fading.Eco-Friendly “Cardboard” StyleAs environmental awareness rises, we gravitate toward everything recyclable. This “recyclability” trend has cemented its place among UI trends. In user interface designs, gray backgrounds—evoking cardboard—and cold, muted palettes dominate, while lively 3D objects are absent in favor of a natural aesthetic. This trend highlights real life and naturalness, offering users a delightful experience in UI and UX contexts.HolographyOnce criticized for being jarring, over-the-top holographic patterns continue to thrive in 2022 design trends. This style meshes perfectly with the metaverse, holograms, and VR worlds, boosting creativity to the max. Neon gradients and bright shapes define it, making it eye-catching and futuristic. The crypto world also widely adopts holography. In UI design, it remains a powerful way to captivate users. It’s especially prevalent in gaming, where vibrant lights, reflections, and luminous visuals enhance the dreamlike quality.Aura BackgroundsThis background style uses soft brush strokes behind focal elements in gradient hues. It conveys the floating, color-rich emptiness of virtual spaces. Soft brushes, gentle colors, and subtle blur suffice to evoke this effect. We’ll see even more of these aura backgrounds across industries, as the trend continues to grow.Glassmorphism and Glass-Inspired ElementsGlassmorphism draws from real-world glass objects, giving a blurred, semi-transparent feel. Background blur, translucent elements, and gentle color blends create a captivating flow. Banks, games, and financial apps often rely on this style. Its polished, immersive look endures in many digital experiences.

Sep 3, 2022 3501 reads

How to Write SEO-Friendly Content in 4 Steps?

Search engine optimization (SEO) refers to the improvements made to increase organic traffic and comply with search engine parameters. The priority of SEO optimizations and search engines is to provide users with a great experience and high-quality content. Search engines reward websites that deliver quality content by ranking them higher.SEO-friendly content is: optimized according to search engine parameters, built around a primary keyword, targeted to the right audience, responsive to user intent, valuable to users, easy to read, engaging, aligned with the brand’s voice, enriched with images and infographics, comprehensive, natural, and original. How to Write SEO-Friendly ContentThere are steps to follow before, during, and after writing SEO-friendly content. The first two are deciding your topic and outlining your content.1. Define Your TopicChoose niche topics that your target audience will easily consume and find interesting. Your content should relate to your website and the services you offer. Search engines emphasize content that adds value to users, so your articles need to provide up-to-date information.You can discover what interests your audience by examining competitors’ blogs, as well as forums and news sites to find questions users ask but haven’t had answered.In short, when choosing your topic, you can look at: your competitors’ blog pages, forums and news sites. 2. Analyze and Research KeywordsAfter choosing your topic, identify relevant keywords. These fall into primary and secondary keywords.Once your content is indexed, it will rank for those queries. Your main target query is your primary keyword—it summarizes and best represents your content’s focus. Secondary keywords (like subheadings) support the main topic. For instance, if “search engine optimization” is your primary keyword, “organic traffic” could be a secondary keyword.Three factors are crucial when selecting keywords: user intent, search volume, and competition.Your chosen keywords should match user intent. To verify intent suitability, search your keyword and compare the results to your planned content.For example, if your article covers “digital marketing trends,” targeting “digital marketing” is too broad, as Google returns “What is Digital Marketing?” pages for that query.Search Volume: Average monthly searches indicate how often a keyword is queried. High search volume doesn’t guarantee more traffic for you—it also means stronger competition.Competition: Difficulty levels (low, medium, high) show how hard it is to rank for a keyword. New or smaller sites should aim for low- to medium-difficulty terms first.Tools like Google Ads Keyword Planner, Ahrefs Free Keyword Generator, and Answer the Public help you find search volumes and competition. Google Ads – Keyword Planner Google holds about 86.64% of global search market share (Statista, Sept. 2021). Its Keyword Planner suggests new keyword ideas and shows average search volumes and competition levels per term.Enter your product or service to get related suggestions. You can enter multiple terms, filter by language/region, or paste your site or a competitor’s URL to see which keywords they rank for. “Avg. monthly searches” shows volumes; “competition” shows how contested each term is. Ahrefs Free Keyword Generator Ahrefs’ Free Keyword Generator shows search volumes and keyword difficulty (KD) for each term. Filter by country (e.g., Turkey) or by other search engines (Bing, Amazon, YouTube). KD is on a log scale: 0–10 (easy), 10–30 (moderate), 31–70 (hard), 70–100 (very hard). Answer The Public Answer the Public organizes queries around your keyword, showing alphabetical combinations and questions. It doesn’t display volume or competition data, and it lacks Turkish localization—but it can still surface Turkish queries if you set the region accordingly.3. Research User IntentUser intent explains why a user makes a search. Four main types exist: Informational (seeking knowledge—e.g., “What is SEO?”), Navigational (seeking a specific site—e.g., “AnalyticaHouse”), Commercial (researching before purchase—e.g., “best SEO tools”), Transactional (ready to buy—e.g., “buy iPhone 13”). 4. Outline Your ContentDecide on your content’s: length, and headings. Your article must be comprehensive and up-to-date. To outrank competitors, cover topics more thoroughly than they do.HeadingsUse competitor posts to identify key subtopics and include them plus new insights. Tools like Answer the Public’s “Questions” and Google’s “People also ask” can reveal popular questions to answer. Maintain a clear hierarchy with H1, H2, H3 tags and matching font sizes. Include your primary keyword in headings.LengthBacklinko’s analysis of 912 million blogs suggests 1,000–2,000 words is ideal. Longer posts also attract more backlinks. Quality matters more than sheer length.5. Ensure ReadabilityYour SEO-friendly article must read naturally and engagingly. Avoid robotic language. Keep paragraphs around 100–150 words, avoid repetition, and present each main idea clearly.Use and Optimize ImagesEnhance clarity with relevant images, videos, or infographics. Name files with keywords—e.g., “sunflower-oil.jpg” rather than “IMG1234.jpg.”Benefits of SEO-Friendly ContentHigh-quality content differentiates you from competitors and builds authority. Ranking for multiple keywords boosts visibility, making it easier to attract prospects. In short, SEO-friendly articles enhance your: conversion rate, organic traffic, brand awareness, and loyalty. SEO-Friendly Content ChecklistHere’s a 13-point checklist for SEO-friendly content: 1. Outperforms competing articles in depth and breadth. 2. Accurate, reliable information. 3. Written by a subject-matter expert. 4. Enriched with images and infographics. 5. Focused on a high-volume, medium-competition primary keyword. 6. Uses semantically related secondary keywords. 7. Each heading covers one main idea plus supporting points. 8. No redundant repetitions. 9. Primary keyword in headings. 10. Consistent heading hierarchy and font sizes. 11. Consistent tone of address (“you” vs. “we”). 12. Consistent verb tenses. 13. Clear, engaging writing with no spelling/grammar errors. 14. No duplicate content across platforms.

Sep 3, 2022 1449 reads

What Should You Pay Attention to in SEO Compatibility When Creating a New Website?

When building a website, it is the best time to make the easiest optimizations and infrastructure setups in terms of search engine compatibility. Many SEO metrics such as speed, visuals, canonical and meta editing can be easily organized during the website construction phase, coded within certain rules, and provide great convenience after the website goes live.1- Speed FactorsSpeed is one of the most important factors for successful search engine optimization and user experience. Among the most obvious factors affecting the speed of websites are: Visual & Media Content CSS Files JS Files Server Quality When preparing a website, first of all, all the images on the site must be optimized and sized in a way that does not compromise efficiency. For this, it is important to use images in WebP, JPEG2000, JPEG, SVG formats. Since the WebP format is not displayed in Safari browsers, the “on-error” function can be used in the HTML part so that the JPEG version of the image is shown in Safari browsers while the WebP format is shown in other browsers (Chrome, Mozilla, Opera, etc.). It is extremely important that visual and media content is optimized as much as possible. Compressing images under 150 KiB positively affects browser loading speed. It is also important that visual and media content is not larger than the area in which they are placed. For example, if an image is to be added to an average 400x400 pixel area in a grid module on the homepage, the image should not be larger than 400px. Otherwise, while the image covers an area of 400px in the browser, it will load with higher size and resolution during loading, which will negatively affect the opening speed.The most obvious mistake made with JS (JavaScript) and CSS files is the use of ready-made JS and CSS libraries without optimization. For example, the jQuery JS library or the Bootstrap CSS library contains many classes and functions. However, we generally use only a few of these classes and functions in our websites. Therefore, before being included on the page, unnecessary classes and functions should definitely be cleaned from these files and compression operations should be performed.Another factor affecting website speed is server quality. When a user visits a web page, the loading of DOM elements on the page by the server and the late response of request queries by the server negatively affect page performance. Therefore, it is important for the website to be hosted on a quality server in terms of processor, CPU, and RAM, and to have high bandwidth.2- Meta EditsA web page has indispensable metas. Meta title, meta description (meta keywords for search engines other than Google) are the main ones. First of all, the meta title and description fields must be editable and customizable on the CMS side. However, since a page's metas must not be empty, and sometimes some pages may be overlooked, if no custom meta description is entered, metas can be generated by defining a rule. For example:Page H1 + Site Name In this way, on forgotten/overlooked pages, instead of meta tags appearing empty, they will be generated based on a standard rule. Meta tags must be included among the tags of the page.3- Canonical TaggingCanonical tags are one of the most important markers that determine a web page's crawling and indexing criteria. To avoid duplicate page issues on websites and to indicate whether a page is its original version or another version, canonical tagging is used. Canonical tagging must be editable and customizable on the CMS side. However, since there may be pages that are forgotten or overlooked, just like in meta edits, canonical tagging should be created on all pages by defining a rule. For example:In this way, canonical tagging that automatically points to itself will be created on all pages that are not optionally edited. Canonical tagging must be included among the tags of the page.4- H1 Heading TagThe H1 heading tag is the main title of a web page. It directly carries the targeted keyword of the relevant page and reflects the title of all the content on the page. Each page must have exactly 1 H1 tag. H1 tags must be editable and customizable on the CMS side. However, as in meta and canonical, a rule can be defined so that it does not appear empty on pages where it is forgotten to be edited. For example:Page NameThere must be a maximum of 1 H1 heading tag per page. Therefore, if there are areas on the page that contain different H1 tags, these areas should be defined with or tags instead of H1.5- Robots.txt FileThe Robots.txt file is a kind of entry navigation that search engine bots first visit on a website. The pages/folders that are desired to be crawled or not crawled within the site, and the path of the sitemap, are specified in the robots.txt file. The line starting with the “Allow” command indicates a crawlable web page, while the “Disallow” command indicates pages that are not desired to be crawled. The “User-agent” command specifies which bots the commands will apply to. For example, a website can be open to crawling for Google bots but closed for crawling bots like Screaming Frog. The “*” symbol means that commands apply to all bots. For a web page with an admin panel, a standard robots.txt file can be created as follows:User-agent: * Allow: / Disallow: /admin Sitemap: https://sitename.com/sitemap.xmlThe Effect of Robots.txt on the SiteWhen a robots.txt file is created, the commands defined here must have a dynamic effect on the pages within the site to help with the crawl budget.For example, we give disallow to the /myaccount URL in the robots.txt file to block it from crawling. In this case, to help search engine bots, a “nofollow” tag should be dynamically added to all links pointing to the /myaccount address within the site. Otherwise, search engine bots may crawl a page that should not be crawled in robots.txt by following internal links. This negatively affects the crawl budget. In addition to the nofollow tag, if a page is disallowed in the robots.txt file, a meta robots tag should be added directly into this page. Example:Pages disallowed in the robots.txt file should also not be included in the sitemap. All of this process should be dynamically created during website construction. If a page disallowed in robots.txt is linked within the site, adding nofollow to all of them and adding a meta robots tag to the page itself should be dynamic. 6- Sitemap – Sitemap.xmlThe sitemap is a kind of navigation file that facilitates navigation and crawling for search engine bots visiting the website. Sitemaps should be generated dynamically, not manually. All pages listed for the user, such as service, blog, product pages, should be included in the sitemap. Of course, while generating the sitemap dynamically, the primary factor must be the robots.txt file. If a page/URL is blocked from crawling by adding disallow in the robots.txt file, this page/URL must not be included in the sitemap. Sitemaps must be in .xml extension and readable. For an example sitemap model, you can visit Google documentation:https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap 7- Pagination & Infinite Scroll UsageEspecially in e-commerce sites’ product listing and blog listing pages, pagination must be used. Listing all products/content of a category on the same page when a category page is visited negatively affects browser performance and user experience. To prevent this and increase page efficiency, a pagination structure should be used on the page. There are several types of pagination. For example:Pagination done by page numbering:Or infinite scroll pagination, where content loads as the page is scrolled. Among these types of pagination, the most widely used today are Load More and Infinite Scroll pagination. Because instead of directly switching to different pages, content/products loading as the page is scrolled increases the user experience. Today, Google is also switching to infinite scroll pagination and recommends it. Example Google documentation:https://developers.google.com/search/blog/2014/02/infinite-scroll-search-friendly8- Language / Hreflang TagsIf a website uses multiple language options, hreflang tags must be used on the site to avoid duplicate issues and to ensure more relevant results in location-based searches. These tags should mark the alternative language pages on each language page. For example, if a web page that opens in Turkish by default has an English version:The hreflang to be placed on the Turkish page:The hreflang to be placed on the English page:9- Structured Data MarkupStructured Data Markup is a kind of schema markup that allows a web page to be more easily interpreted by search engines. There are many types of structured data markup for web pages. To give examples of the most commonly used structured data markups: Organization MarkupOrganization markup is a type of markup that should only be placed on the homepage of a website and represents the business card of the website. This markup includes the organization of the website, contact information, etc. Organization markup can be done as follows:  {"@context": "http://schema.org", "@type": "Organization", "name": "SITE NAME", "logo": "LOGO URL”, "url": "https://sitename.com/", "email": "SITE EMAIL", "address": "COMPANY ADDRESS", "telephone": "CONTACT PHONE" } Breadcrumb MarkupBreadcrumb markup is beneficial because it presents the existing breadcrumb structure more neatly to search bots, so we strongly recommend using it on all pages to show hierarchy.The breadcrumb markup to be placed on all inner pages should mark all categories that precede it hierarchically. Example: { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "item": { "@id": "https://sitename.com/", "name": "Home" } }, { "@type": "ListItem", "position": 2, "item": { "@id": "https://sitename.com/category", "name": "Category Name" } }, { "@type": "ListItem", "position": 3, "item": { "@id": "https://sitename.com/category/product-name", "name": "Product Name" } } ]}Product Markup (For E-Commerce Sites)Product markup is used for product pages and directly contains information about the product. Example: { "@context": "http://schema.org/", "@type": "Product", "name": "PRODUCT NAME", "url": "PRODUCT URL", "description": "PRODUCT DESCRIPTION", "sku": "PRODUCT SKU", "brand": { "@type": "Thing", "name": "BRAND NAME" }, "offers": { "@type": "Offer", "url": "PRODUCT URL", "priceCurrency": "CURRENCY, e.g.: USD", "price": "PRODUCT PRICE", "availability": "http://schema.org/InStock", "seller": { "@type": "Organization", "name": "BRAND NAME" } } } Service Markup (For Service Pages)For sites that sell services in consulting, education, etc., service markup can be used instead of product. Example usage: { "@context": "https://schema.org/", "@type": "Service", "provider": { "@type": "Service", "name": "SERVICE NAME", "description": "SERVICE DESCRIPTION" }, "providerMobility": "dynamic", "url": "SERVICE URL" } BlogPosting Markup (For Blog Pages)BlogPosting markup is used for blog pages on the website. Example usage: { "@context": "https://schema.org", "@type": "BlogPosting", "mainEntityOfPage": { "@type": "WebPage", "@id": "BLOG URL" }, "headline": "BLOG NAME", "image": [ "FEATURED IMAGE URL" ], "url": "BLOG URL", "datePublished": "PUBLISH DATE", "dateModified": "LAST UPDATE DATE", "author": { "@type": "Organization", "name": "SITE NAME" }, "publisher": { "@type": "Organization", "name": " SITE NAME ", "logo": { "@type": "ImageObject", "url": "SITE LOGO" } }, "description": "BLOG DESCRIPTION" } FAQ Markup (For FAQ Pages)FAQ markup is used for frequently asked questions pages on websites. The most important benefit of this markup is that it appears in search results, called Google snippets. Example FAQ markup usage: { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{ "@type": "Question", "name": "QUESTION 1", "acceptedAnswer": { "@type": "Answer", "text": "ANSWER 1" } },{ "@type": "Question", "name": "QUESTION 2", "acceptedAnswer": { "@type": "Answer", "text": "ANSWER 2" } },{ "@type": "Question", "name": "QUESTION 3", "acceptedAnswer": { "@type": "Answer", "text": "ANSWER 3" } } ] } 10- Breadcrumb StructureBreadcrumb is a type of header navigation that makes site navigation easier. It is a structure that allows users to see hierarchically which page they are on, which category the relevant page belongs to, and to easily navigate between categories and pages. The breadcrumb structure must be created dynamically and placed at the top of the page. An example breadcrumb usage may look like this:An example for e-commerce sites:Home > Category > Product NameFor more information, you can visit the W3 documentation:https://www.w3schools.com/howto/howto_css_breadcrumbs.asp 

Sep 3, 2022 864 reads

How to Prepare Your Brand for Black Friday in 3 Steps

The big November sales are starting! Is your brand ready for Black Friday? Follow these 3 steps to get the most efficient results for your brand during this hectic period.1. Plan Your Black Friday Campaign CalendarThe planning stage before Black Friday begins is crucial. First, define your campaign calendar and decide which audience you will contact, when, and how. You should create different strategies and plans for before, during, and after Black Friday.2. Forecast Your BudgetsTo make accurate forecasts, use tools like Performance Planner, Keyword Planner, and Google Trends, and review last year’s Black Friday data in Google Analytics. This will help you estimate more accurately and manage your budgets effectively.When planning budgets, consider all dynamics: media mix, channel distribution, brand and programmatic plans for maximum visibility, and include third-party channels in your plan.3. Divide Your Plans into PhasesHistorical data shows that shopping interest ramps up before November, peaks during Black Friday week, and then tapers off afterward. Therefore, split your planning into three phases: pre-sale, sale week, and post-sale.a) Pre-Black Friday PhaseBecause competition and costs spike during the sale week, start your campaign early to build awareness and expand your remarketing audiences. By driving traffic to your site before the sale at lower cost, you’ll have data ready to retarget more efficiently when costs rise.Be sure your promotional visuals and videos are ready well before peak week—dynamic creatives work best for awareness.Update your CRM segments with last year’s online and offline purchasers in Google Ads and Facebook, so you don’t miss any high-value customers.Also, ensure your website infrastructure can handle peak traffic: verify Google Tag Manager, conversion tags, and Facebook events before the rush.On the product side, check inventory levels and variety for your best-sellers and planned discount items to avoid stockouts during the surge.b) Black Friday WeekIn Google Ads, watch for “limited by budget” alerts—manual bidding campaigns can run out of budget quickly when volume spikes. Wherever possible, use automated bidding strategies to stay competitive.To broaden your reach, diversify campaigns: alongside programmatic and third-party buys, use Google Discovery, YouTube, and Dynamic Search Ads. Don’t forget to add all relevant ad extensions.On Facebook, build separate campaigns for awareness, consideration, and conversion, each with tailored messaging.Prioritize low-competition categories to avoid skyrocketing costs. In search campaigns, favor long-tail keywords over ultra-competitive terms like “Black Friday” or “Cyber Monday.”Launch new campaigns early so they finish learning before peak week. On Facebook, use Dynamic Creative; in Google Ads, use Responsive Display and Responsive Search Ads, with varied extensions.Traffic during peak week often stays for a while after. Segment users by behavior—e.g., abandoners—and set up a post-sale phase with special offers like “We Miss You” coupons for those who added to cart but didn’t purchase.c) Post-Black Friday PhaseSince sales taper off gradually after Black Friday, plan for a smooth transition. Prepare your post-sale creatives and messaging in advance.A common mistake is forgetting to pause sale campaigns afterward. Use automated rules in all platforms to turn off or adjust campaigns, and audit any leftover promotions from last season.

Sep 3, 2022 33622 reads

React & Google Analytics: How to Integrate GA4 in React?

It is an undeniable fact that React and Google Analytics are one of the most popular tools and libraries among the web-analyst community. Google Analytics is the most widely used web analysis tool, which helps you easily track and retarget your users.Google Analytics 4 (GA4) provides you with more comprehensive measurement methods such as personalized reports and intelligence analytics, by blending your web and mobile application together. Moreover, it provides you with better insights into your digital marketing strategies compared to Universal Analytics (UA).Known for being fast and simple, React is the most popular front-end JavaScript library in the field of web development. Using Google Analytics on your React-based website gives you the following benefits: You can find out from which country your users are driving traffic and what demographics they have. You can see how much time your users spend on which pages. You can measure the Enhanced Ecommerce and custom events. You can report bugs in your React application. You can measure user behavior for A/B tests in your application. Assuming you have a Google Analytics 4 account and a react-based website, let's see how you can set up a healthy react google analytics property step by step.First of all, you need to create a GA4 property within your current Universal Analytics account. You can use the GA4 Property Setup Assistant for this. Click on Get Started and it will be installed instantly without any pre-configuration.You can see that the GA4 installation was successful from the Connected Property section.Google Analytics 4 Measurement IDHalf of our work is done. Now that we have received the most important part, which is GA4 Measurement ID, which starts with G-, so that you can complete the GA4 installation on our React-based website.React Google Analytics IntegrationIn the React ecosystem in the digital marketing world, Static Site Generators (SSG) such as Gatsby and NextJS are generally used for page management, plugin support, CMS, site speed, and SEO compatibility concerns.Now let's start with possible integration methods.Adding Gtag ScriptFirst you need to install the react-ga package in your application.yarn add react-gaThen you have to add the react-ga package into index.js or app.js.import ReactGA from 'react-ga'; const TRACKING_ID = "UA-12341234-1"; // YOUR_OWN_TRACKING_ID ReactGA.initialize(TRACKING_ID);One of the most common problems in React applications occurs in the rendering methods, specifically, CSR (Client Side Rendering) and SSR (Server Side Rendering). You can access detailed information here for rendering methods.In your SPA (Single Page Application) applications, you should send your events with history.listen using react-router-dom in order to prevent these rendering problems.import React from 'react' import { withRouter } from 'react-router-dom'; import ReactGA from 'react-ga'; const RouteChangeTracker = ({ history }) => { history.listen((location, action) => { ReactGA.set({ page: location.pathname }); ReactGA.pageview(location.pathname); }); return ; }; export default withRouter(RouteChangeTracker);Gatsby GTAG PluginIf you use Gatsby engine on your website, adding gatsby-plugin-google-gtag /) is recommended.First of all, you need to install the gatsby-plugin-google-gtag plugin.yarn add gatsby-plugin-google-gtagThen you should update the gatsby-config.js file as follows:module.exports = { plugins: [ { resolve: `gatsby-plugin-google-gtag`, options: { trackingIds: [ "GA-TRACKING_ID", ], gtagConfig: { optimize_id: "OPT_CONTAINER_ID", anonymize_ip: true, cookie_expires: 0, }, pluginConfig: { head: false, respectDNT: true, exclude: ["/preview/**", "/do-not-track/me/too/"], }, }, }, ], }Because of the SSR, you may also have to send your custom events as shown below.typeof window !== "undefined" && window.gtag("event", "click", { ...data })Adding GTAG Script in Next.jsIn the folder where your Next.js application is located, you can open the .env.local file, so that you can add your Measurement ID.NEXT_PUBLIC_GOOGLE_ANALYTICS=You can easily add this variable in the .env.local file, for example if you are using Vercel.Then it will be enough to add the snippet into the _document.js file.import Document, { Html, Head, Main, NextScript } from 'next/document' export default class MyDocument extends Document { render() { return ( {/* Global Site Tag (gtag.js) - Google Analytics */} ) } }To pull custom events, you should use this following method;export const event = ({ action, params }) => { window.gtag('event', action, params) }As you can see, there are different Google Analytics 4 integration methods according to different frameworks.However, no matter what React framework you are using, you must first understand how Google Analytics pulls data from any web application. This will prevent possible measurement and integration errors on your website.You can access the source on how Google Analytics 4 works on the Gtag script here.