One of my favorites is Detailed, which displays important metadata like title tags, meta descriptions, and other relevant information. 

With the use of ChatGPT, you can create your own SEO Chrome Extension tool with minimal coding experience. 

I recommend having some working knowledge of HTML and Javascript to understand the differences between the files you’ll need to submit to Chrome For Developers. Additionally, some knowledge of code management tools like Github is useful. 

To help other SEO professionals, I provided a simple guide to help you create your own SEO Chrome Extension with an example of accessing indexed results in Google in incognito mode.

Determine the SEO Problem

Before you begin creating your extension, you need to determine what problem you are trying to solve. Not asking these initial questions can make the whole process less productive leading to wasted time. When determining a problem, it is best to have a more succinct problem rather than a complex problem. Questions you may need to ask yourself during this step: 

• Is there a solution that already exists?
• What data will the extension use?
• Will the extension be public-facing?

For example, a current problem I identified was that Google had recently changed the UI and functionality of Google Search when a user types in “site:[URL]” in Google Search. I recently wrote code with ChatGPT code to make an extension that would site search results automatically without having to click “Tools.” You can view the final code on my company GitHub account. 

Current UI/UX for Site Searches in Google Search

Custom Made Chrome Extension for Site Search

What You’ll Need to Create a Chrome Extension

Before you can create an extension, compile a checklist of different file types and tools you’ll need.

Some of those items are listed below: 

Different Items Needed To Make a Chrome Extension

• ChatGPT
• Chrome Developer Tools
• Basic knowledge of file types like JSON, HTML, and Javascript 
• GitHub, Visual Studio Code, or another programming GUI (graphical user interface).

If you are unsure about what items to include in your project, I recommend starting small with a simpler project and basing it on the tutorial code provided by the Chrome team. As you can see below, the Chrome team used HTML, PNG (images), JSON, and Javascript. 

Tutorial Code From Chrome – GitHub

Different Files Types Used in Chrome Extensions

There are various types of file types you can include in your Chrome extension to add different styles and functionality. I added a few different types below that are essential to the creation of a Chrome Extension. 

The Manifest File (JSON) – This is a required file for every Chrome Extension. It contains essential metadata that is referenced in the overall folder structure with the JSON format. It also includes relevant information like the name of the extension, version, and permissions required. 

HTML/CSS – This file creates the user interface and basic layout for your extension. HTML files can include CSS and Javascript to enhance their appearance and functionality. 

Javascript – Javascript is the code that executes actions on an extension or a webpage. These files add interactivity and functionality to your extension. You can have JavaScript files for various purposes, such as handling events in your popup or content scripts that modify the behavior of web pages the extension interacts with.

Request a Solution From ChatGPT

To properly get the response you want from ChatGPT, I recommend being very clear about what you want in your SEO extension by interacting with ChatGPT. The more detail you can provide to ChatGPT the better.

How To Create Code For Your SEO Chrome Extension

#1 – Determine the Knowledge of ChatGPT By Asking Preliminary Questions 

For the first step, determine if what ChatGPT is describing its knowledge of ChatGPT makes sense to you. It can give you a helpful overview of the process, but it can also act as a way to test whether the output will be trustworthy. 

#2 – Tell ChatGPT direct instructions about what you will need

To get the best result, you need to specify clearly what you want. To continue with the site search example, I provided ChatGPT with the problem, and what I needed, and specified the elements/source code that might interact with the javascript. 

#3 – Review and Copy Output From ChatGPT into a Codespace

Once you submit your detailed prompt into ChatGPT, review it for any possible errors. It will output the various file types needed with the code for each file type. 

To actually use the code that is created in ChatGPT, you need a space to add your code and ready it for export to Google Chrome. I recommend something like GitHub since it is used in the original coding space for the tutorial from the Chrome team. Lastly, it’s a useful tool if you ever plan to pursue web development or software engineering. 

To create a repository to store your code, do the following: 

#1 – Click New Repository and follow the steps for adding details like the name and if a readme file is requested (I recommend this option)

#2- Click “Creating a new file”

#3- Click “Create new file”

#4 – Add a file that corresponds with the files created in ChatGPT after the repository name. 

How To Upload Your Extension Code Locally

There are different ways of uploading your code to Google Chrome. It ultimately depends on who you want to see the extension. There is a local method which means that only you can use your SEO Chrome extension. The other method is uploading to the Chrome Store which requires a $5 fee and a review process. Below I expanded upon how to upload code locally for your personal or internal use. 

Steps To Upload Your SEO Extension Into Google Chrome (Locally) 

1. Open chrome://extensions/ in your Google Chrome Browser. 
2. Turn on “Developer Mode” in the right-hand side of your screen.
3. Select “Load Unpacked” in the top left corner.
4. Import Your ZIP File

The last step is uploading ZIP files locally. As mentioned before, GitHub is a great space to write and store your code. To export your ZIP file for the important into the Chrome browser, select “Download Zip” after clicking the green button that says “<> Code”

Testing Your Chrome Extension For Errors

Once you upload your code to Google Chrome, it may result in errors. If you encounter an error as shown below with the bubble “Errors,” click the Errors button to view the error message.

After you have viewed the error message, ask ChatGPT to diagnose the issue, rework your code, and try again. This step may take a while unless your code is pristine, but it’s still good practice to learn coding by making mistakes and learning what different errors mean.

Uploading Your SEO Extension to the Chrome Store

If you would like to make your extension public, it requires additional steps that take time, most notably the review process. Below are the general steps for uploading your extension. See the Chrome For Developers Guide for additional details. 

#1 – Ensure You Have Your Files Ready To Go 

Once you have tested your Chrome extension locally, prepare your files to be ready to be sent to the store. Ensure that you have the files needed and understand how the files work. 

Are they requesting data from the user, do they need anything that might affect the privacy of the users? Understanding these details will help you in the review process. 

#2 – Create a Developer Account

To create and register for a Developer account, you must sign into Google and pay a $5 registration fee. Afterward, fill in any remaining information about yourself, and then verify your email address. 

#3 – Add a New Item

Once you’re in the Chrome Web Store Developer Dashboard, select “New Item.” You will then be asked to upload the Zip Files.  

#4 – Fill in Details and Click Publish

Once you have submitted your ZIP file, you will need to complete a series of fields to explain the purpose of the extension and how it works. Some of these fields include privacy details. 

Extension Name: The name of your extension.

Detailed Description: A description that explains what your extension does.

Screenshots: Upload screenshots that showcase your extension’s features.

Category: Choose the appropriate category for your extension.

Website URL: Optional, but recommended if your extension has a dedicated website.

Privacy Policy: Required if your extension collects user data.

Contact Email: Your email address for support inquiries.

Countries: Select the countries where you want your extension to be available.

#5 – Wait For Your Extension to Be Reviewed

Once you have uploaded your extension, and filled out the information, your extension must be reviewed and approved. This process can take weeks to complete. Extensions that use user data may take longer to complete. 

The Chrome team writes “If your extension is pending review for more than three weeks, please contact developer support to request assistance.”

Conclusion

Congratulations! 

You made your first SEO Chrome extension. Don’t stop there. Continue developing new ways to create extensions that can solve problems for your business, agency, or organization. If you made your extension in the Chrome Developer Store, share it with the SEO community! 

Reach out if you have any questions or would like to schedule a request for a custom proposal from our SEO team.

How to Create a SEO Chrome Extension with ChatGPT is an original blog post first published on Go Fish Digital.

Mobile-first indexing is a practice adopted by search engines like Google to primarily use the mobile version of a website’s content for indexing and ranking in search results. 

In the past, Google primarily indexed and ranked websites based on the desktop version. However, as mobile usage surpassed desktop usage, Google shifted its focus to prioritize mobile content. With mobile-first indexing, Google’s bots crawl and index the mobile version of a website first. 

Site owners should be aware of the potential impact mobile-first indexing has on a website and the best practices to ensure a website meets the best standards for a mobile experience.

A Short History of Mobile-First Indexing

Google has implemented a sequence of updates since November 2016 to enhance search results’ relevance by focusing on mobile user experiences. Check the Google Search Console Blog to keep up with further developments in mobile indexing. 

• November 2016: Google first announced mobile-first indexing, signaling a significant shift in how the search engine would prioritize mobile content for indexing and ranking.
• March 2018: Google commenced the gradual rollout of mobile-first indexing, marking the beginning of prioritizing mobile versions of websites over desktop versions for indexing and ranking.
• July 2019: Google made mobile-first indexing the default approach for new websites, emphasizing the importance of mobile-friendly design and content presentation from the outset.
• September 2020: Google announced the full implementation of mobile-first indexing across all websites, underscoring the critical importance of optimizing websites for mobile devices to maintain visibility and competitiveness in search results.

Does Mobile-First Indexing Affect My Rankings?

Yes, mobile-first indexing can affect the ranking of a website. Google states that “Google predominantly uses the mobile version of a site’s content, crawled with the smartphone agent, for indexing and ranking. “ 

Google prioritizes mobile-friendly websites because of the increasing number of users accessing the internet via mobile devices. So, having a mobile-friendly website is crucial for maintaining or improving search engine rankings, especially considering Google’s mobile-first indexing approach. 

If a website isn’t optimized for mobile devices, it may experience lower rankings, decreased visibility, and potentially reduced traffic from search engines.

Best Practices For Mobile-First Indexing 

Here are some best practices for mobile-first indexing to enhance user experience and search engine visibility.

Ensure Your Content is Mobile-Friendly and Responsive 

For a seamless experience across mobile and desktop platforms, it’s essential to ensure a responsive design that caters to both users and search engines. Key aspects of responsive mobile design include adaptability to various screen sizes, orientations, and devices.

Furthermore, mobile versions of pages should include:

• Consistent on-page information between mobile and desktop versions.
• Clearly defined HTML headers (H1, H2, etc.).
• Structured data for meta information.

Check if You Are Blocking Mobile Resources

For Google to index content from a website, it must request to crawl a website. According to Google, “A page is indexed by Google if it has been visited by the Google crawler (“Googlebot”), analyzed for content and meaning, and stored in the Google index. “  

A Robots.txt File instructs search engines, guiding crawlers like GoogleBot when they navigate your site. It allows you to advise GoogleBot against crawling specific pages or resources.

However, issues can arise if you use a robots.txt file or a meta tag to block crucial mobile resources.

For example, the code below in a robots.txt file would block mobile resources from search engines. 

Another mistake is adding meta tags on a page preventing Google from crawling your webpage. 

If you intend to use meta tags to prevent Google from crawling a page, make sure that tags like “nofollow” and “noindex” are applied consistently across both mobile and desktop versions of the page.

Optimize Images and Other Media for Mobile & Desktop

Images come in vastly different sizes, therefore, image SEO can be troublesome, especially on mobile devices. Ensuring that images are appropriately sized and compressed can significantly improve page load times and overall user experience on mobile devices. 

• Use High-Quality Images: High-quality images enhance the visual appeal of your website and convey professionalism to your audience.
• Don’t Use Unsupported Image Formats: Avoid using image formats that may not be compatible with all browsers or devices to ensure a consistent viewing experience for all users.
• Don’t Use URLs that change as the Page Loads: Stable URLs prevent disruption in loading images and maintain a smooth browsing experience for users as they navigate your site.
• Ensure that the Alt Text is consistent across Mobile and Desktop: Consistent alt text ensures that users, regardless of their device, receive accurate descriptions of images, aiding accessibility and search engine optimization.
• Use Similar titles, captions, and file names across Mobile and Desktop: Consistency in titles, captions, and filenames facilitates seamless navigation and helps users easily identify and understand the content across different devices.

4 Free Mobile-First Indexing Auditing Tools

Here are several cost-effective methods you can use to audit web pages and determine whether they adhere to best practices for mobile-first indexing.

Google Search Console

The most efficient method to determine whether your content is being crawled by Google SmartPhone is by utilizing the Google Search Console Inspection Tool to open a URL.

To determine if Google is crawling your website with Google Smartphone, do the following: 

• Open Google Search Console and Add a URL in the Top Search Bar

• Click on the Dropdown Arrow To the Right of “Page is Indexed.”

• Scroll down to the section that says “Crawl” to view “Crawled as”

Rich Results Test

Google’s Rich Results serves as a valuable tool as it provides insights into how Google interacts with your content. More importantly, it can be used to see how Google views the content of competitors. 

To gain insights into how Google perceives your mobile content using the Rich Results Test, Add a URL in the “Enter a URL to test field. 

Once the test is run, you can explore different aspects of the Rich Results test, including:

• A screenshot of how Google views the Mobile content
• Detected Structured Data 
• Whether indexing is allowed
• Options to view the Desktop Version of a Rich Results Test

Main Rich Results Test Page

Additional Information about Crawling and Indexing

Options for Smartphone and Desktop

Chrome Developer Tools

At first glance, Chrome Developer Tools can appear too technical or overwhelming, but it’s one of the most useful tools for seeing how your website looks on different mobile devices. Chrome Developer Tools is a comprehensive suite of web development and debugging tools that also offer valuable assistance in identifying issues specific to mobile devices.

For example, one of the audits you can run in Google Developer Console is how your page looks on different mobile devices. In the drop-down menu in the top left it includes devices like iPhones, Surface Pros, and a range of other devices to choose from.

PageSpeed Insights

PageSpeed Insights is a powerful tool for not only auditing page speed but also auditing the overall page experience for users. It evaluates both mobile and desktop versions of websites, offering insights into various aspects affecting performance, such as server response times, render-blocking resources, image optimization, and browser caching. 

For example, we ran a mobile PageSpeed test for the Best Buy Computer and Tablets page. Once run, Google provides four different scores to access the performance and experience of mobile and desktop sites. 

Based on the audit, there is room for improvement to improve the page performance of the Computers and Tablets page ranging from javascript issues, render-blocking resources, and not properly sizing images. 

Conclusion

In conclusion, mobile-first indexing represents a significant shift in how search engines prioritize website content, with Google leading the charge by focusing primarily on mobile versions for indexing and ranking. As the dominance of mobile usage continues to rise, understanding and adhering to mobile-first best practices become imperative for website owners. 

By implementing strategies like responsive design, optimizing images and media, and ensuring consistent metadata, site owners can enhance both user experience and search engine visibility. 

Leveraging free and authoritative tools such as Google Search Console, Rich Results Test, Chrome Developer Tools, and PageSpeed Insights can provide invaluable insights into website performance and optimization. Keeping pace with these advancements and best practices is crucial to maintaining competitiveness and visibility in today’s digital landscape.

A Guide To Mobile-First Indexing is an original blog post first published on Go Fish Digital.