Free SEO Content Optimization Tool Get real-time SEO suggestions while writing content with keyword, readability, and engagement analysis.

The tool works under the hood by utilizing React's useState and useMemo hooks to manage state and compute suggestions based on the input content, target keyword, and selected content type. It splits the content into words, sentences, and paragraphs using regular expressions, such as /\s+/ for word separation and /[.!?]+/ for sentence separation. The tool then applies various algorithms to analyze these components, including a simple passive voice detection using patterns like /\b(is|are|was|were|be|been|being)\s+([\w]+ed|[\w]+en)\b/gi.

The keyword density check uses the target keyword to search for occurrences in the content, calculating the density as a percentage of total words. This is done by converting both the content and target keyword to lowercase and using a regular expression with word boundaries, \b, to match whole words only. The tool also checks for the presence of transition words like "however" and "therefore", and power words such as "free" and "proven", to evaluate engagement signals.

The suggestions are grouped by category, including Length, Keywords, Readability, and Engagement, using a Record data structure to store the categorized suggestions. The overall score is calculated as the percentage of successful checks out of the total number of checks performed, with each check returning a pass, warning, or error status based on predefined criteria. For example, the word count recommendation for a blog post content type is between 1000 and 2500 words, and the tool returns a warning if the content falls outside this range.

The tool's user interface is built using React components, with input fields for the target keyword and content type, and a textarea for the content itself. The suggestions are displayed in a glass card component, with each suggestion featuring an icon indicating its status, such as ✓ for success or ⚠ for warning. The score percentage is also displayed as a progress bar using SVG elements, with the strokeDasharray attribute set dynamically based on the calculated score.