up:: [[Computing MOC]] tags:: #on/seo #on/programming # Search Engine Optimization (SEO) Search Engine Optimization is the process of creating a strategy that will increase your rankings position in search engines. [^1] ## Metadata **Metadata** is an abstract of a website's content and is used to attach a title, description, and image to the site. ### Title - One of the most important SEO elements - What users see when thy click to enter your site from search results - One of the main elements Google uses to understand what a page is about - Set using the `<title>` HTML tag ### Description - Also important, but not as much as the title - Not taken into account in rankings, but can affect your click-through rate - Use the description to complement the information in your title - Use keywords; they will appear in bold if a user's search contains them ### Open Graph Protocol - Protocol originally developed by Facebook - Standardizes how metadata is used on any given web page - Social media companies use open graph for displaying rich cards when sharing a URL - No benefit to search engine rankings, but useful since people might share links to your site ## Web Performance and Core Web Vitals [[Web Vitals]] is an initiative by Google to provide guidance for quality signals that measure end-user experience on the web.[^2] **Core Web Vitals** is a subset of Web Vitals. It currently consists of three metrics that measure loading, interactivity, and visual stability. Achieving higher scores in the Core Web Vitals metrics will create a smoother experience for users. Lower scores in these metrics will impact search engine rankings, as Google uses Core Web Vitals as a ranking factor. [[Google Lighthouse]] is a simulated environment that can be used to measure Core Web Vitals. ### Core Web Vitals Metrics Here we will discuss the three different metrics used by [[Web Vitals|Core Web Vitals]]. There are three different values when measuring Core Web Vitals: "Good", "Needs Improvement", and "Poor". #### Largest Contentful Paint **Largest Contentful Paint (LCP)** looks at the loading performance of a page. It measures the time taken to get the largest element on the page visible within the viewport. Note that this should not be confused with **First Contentful Paint (FCP)**. #### First Input Delay **First Input Delay (FID)** measures load responsiveness. It quantifies the experience user feel when interacting with unresponsive pages. FID cannot be measured in a lab (e.g. Google Lighthouse). It requires real user data. However, **Total Blocking Time (TBT)** is a separate metric that is lab-measurable and also captures issues that affect interactivity. > [!note] > FID will be replaced by **Interaction to Next Paint (INP)** in March 2024 #### Cumulative Layout Shift **Cumulative Layout Shift (CLS)** measures overall layout stability. CLS occurs when elements on a page are shifted around after initially being rendered by the DOM. Each element's layout shift score is only counted toward CLS if *unexpected* movement occurs. If a new element is added to the DOM or an existing element changes size, it doesn't count toward layout shift if the loaded elements remain in their position.[^1] ## Footnotes [^1]: “Search Engine Optimization.” Next.js. Accessed January 12, 2024. [https://nextjs.org/learn-pages-router/seo/introduction-to-seo](https://nextjs.org/learn-pages-router/seo/introduction-to-seo). [^2]: Walton, Philip. “Web Vitals.” _Web.Dev_ (blog), May 10, 2023. [https://web.dev/articles/vitals](https://web.dev/articles/vitals).