Is your Website AI-Friendly?

How To M­­­­arkup your Site for ChatGPT

OpenAI, the artificial intelligence company responsible for the development of ChatGPT, has recently announced ChatGPT users are now able to access the Internet using the popular AI chatbot. One of Mobomo’s core services revolves around emerging technologies, so we’re paying attention.

While some website operators scramble to block the automated ingestion of their content using robots.txt, others ask themselves (or ask ChatGPT!), "Is my website AI-Friendly? How do I markup my website for ChatGPT?"

At this time, there are no new markup or content structuring guidelines for readability by AI models like ChatGPT. The guidelines for making your website more readable by ChatGPT and other natural language processing models are essentially identical to the guidelines for enhancing accessibility, search engine optimization (SEO), and user experience. These guidelines include:

.spaced-list > li {
margin-bottom: 20px; /* This will add space below each list item within .spaced-list */
}

1. Use Semantic HTML: Ensure your website uses proper HTML tags to structure content. If applicable, use structured data markup like Schema.org to provide detailed information about specific types of content (e.g., events, products, reviews). Utilize semantic elements such as <header>, <footer>, <nav>, and <article>; lists (<ul>, <ol>, <li>); and paragraphs (<p>) to convey the meaning of different sections and elements on your page.
2. Metadata: Include relevant metadata using elements like <title>, <meta> tags for descriptions and keywords, and Open Graph Protocol (OGP) or Twitter Cards for social media sharing. This metadata can provide context about your website's content.
3. Alt Text for Images: Add descriptive alt text (<img alt="...">) to all images to make them accessible and to provide context to the model about the content of the images.
4. Use Descriptive Link Text: Make sure the text used for hyperlinks is descriptive and provides context. Avoid using generic phrases like "click here."
5. Valid HTML: Validate your HTML code using tools like the W3C Markup Validation Service to ensure it adheres to web standards.
6. Test with Screen Readers: Test your website's accessibility with screen reader software to ensure that visually impaired users can navigate and understand your content.

By following these best practices, you can create a website that is not only more readable by ChatGPT but also more accessible and user-friendly for all visitors.

~ For more informational thought pieces related to optimizing IT experiences for your audience, visit Mobomo’s Insights page, or contact us directly to learn about the ways in which we can improve your user experience.

// Function to make text bold up to the first colon in each list item
function makeBoldUpToColon() {
// Select all list items
var listItems = document.querySelectorAll('li');

// Iterate over each list item
listItems.forEach(function(li, index) {
// Get the HTML content of the list item
var html = li.innerHTML;

// Find the index of the first colon
var colonIndex = html.indexOf(':');

// If a colon is found and it's not at the very beginning
if (colonIndex > 0) {
// Split the HTML content at the colon
var beforeColon = html.slice(0, colonIndex + 1);
var afterColon = html.slice(colonIndex + 1);

// Replace the content of the list item, wrapping the text before the colon in
li.innerHTML = '' + beforeColon + '' + afterColon;
} else {
// Log when no colon is found or it's at the beginning
}
});
}

// Run the function when the window has finished loading
window.addEventListener('load', makeBoldUpToColon);