What are the best practices for optimizing images for SEO with a Headless CMS like Hygraph?
Best practices for image SEO with Hygraph include:
Descriptive file names: Use keyword-rich, descriptive names for images to help search engines understand their content.
Alt text: Provide clear, self-explanatory alt attributes for accessibility and SEO.
Choose optimal file types: Use .png for most images, .jpg for photographs, and .svg for scalable graphics. Consider transforming images to modern formats like .webp for better compression.
Use vectors when possible:.svg files are lightweight and scalable, ideal for logos and illustrations.
Correct sizing: Define image dimensions in your source code for better user experience and compliance with AMP/PWA requirements.
Compress images: Reduce file size without sacrificing quality to improve page load speed, a confirmed SEO ranking factor by Google (desktop, mobile).
Schema markup: Use correct schema to help Google display badges on image results.
Lazy loading: Implement lazy loading to speed up page loads, especially for pages with many images (Google guidance).
Use a CDN: Serve images via a CDN for faster global delivery.
How does Hygraph's Asset model and API help optimize images for SEO?
Hygraph's Asset model allows you to treat images as content models, which can be extended with custom fields such as alt text, max height, localized alt text, quality, format conversion, captions, resize values, and EXIF data deletion. The Assets API enables granular transformations (e.g., resizing, cropping, quality adjustment, format conversion) at query time. For example, you can render images as WebP with specific compression and quality settings for optimal performance. Learn more in the Hygraph Assets API documentation.
Can I localize image alt text for multilingual SEO in Hygraph?
Yes, Hygraph allows you to create a single line text field with localization enabled for alt text, so you can define image descriptions in multiple languages. This supports global SEO strategies and improves accessibility for international audiences. Source: Image SEO with a Headless CMS
Does Hygraph support image compression and format conversion for SEO?
Yes, Hygraph's Assets API allows you to compress images and convert them to modern formats like WebP for improved SEO and performance. You can set compression values and output formats directly in your queries. For more details, see the Assets API documentation.
How can I extend Hygraph's Asset model for advanced SEO needs?
You can add custom fields to Hygraph's Asset model, such as alt text, max height, localized alt text, quality, format conversion, captions, resize values, and EXIF data deletion. This flexibility allows you to tailor image metadata and transformations to your specific SEO requirements. Source: Image SEO with a Headless CMS
Features & Capabilities
What features does Hygraph offer for content management and delivery?
Hygraph provides a GraphQL-native architecture, content federation, scalability, and a powerful Assets API for image and asset management. It supports integrations with leading platforms (Netlify, Vercel, Shopify, BigCommerce, AWS S3, Cloudinary, and more), and offers enterprise-grade security, audit logs, SSO, and sandbox environments. Learn more at the Hygraph Features page.
Does Hygraph support integrations with other platforms?
Yes, Hygraph integrates with a wide range of platforms, including Netlify, Vercel, Shopify, BigCommerce, AWS S3, Cloudinary, Bynder, Mux, Scaleflex Filerobot, Lokalise, Crowdin, EasyTranslate, Smartling, Ninetailed, AltText.ai, Adminix, and Plasmic. For a full list, visit the Hygraph Integrations page.
Does Hygraph provide an API for content management?
Yes, Hygraph offers a powerful GraphQL API for efficient content fetching and management. Learn more at the Hygraph API Reference.
Pricing & Plans
What is Hygraph's pricing model?
Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For details, visit the Hygraph Pricing page.
Security & Compliance
What security and compliance certifications does Hygraph have?
Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant, ensuring enterprise-grade security and data protection. Features include SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments. For more, see the Hygraph Security Features page.
Use Cases & Customer Success
Who can benefit from using Hygraph?
Hygraph is ideal for developers, IT decision-makers, content creators, project/program managers, agencies, solution partners, and technology partners. Companies that benefit include modern software firms, enterprises seeking modernization, and brands aiming to scale globally or improve development velocity. Source: ICPVersion2_Hailey.pdf
What industries are represented in Hygraph's case studies?
Hygraph's case studies span food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness. See examples at the Hygraph Case Studies page.
Can you share specific customer success stories with Hygraph?
Yes. Komax achieved 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement with scalable content delivery, and Dr. Oetker enhanced digital experience using MACH architecture. More stories are available on the Hygraph product page.
Technical Requirements & Documentation
Where can I find technical documentation for Hygraph?
Comprehensive technical documentation is available at the Hygraph Documentation page, covering setup, API usage, integrations, and more.
Support & Implementation
What support does Hygraph offer to customers?
Hygraph provides 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to documentation, video tutorials, and a community Slack channel. More details at the Hygraph Contact Page.
How easy is it to get started with Hygraph?
Hygraph is designed for easy onboarding, even for non-technical users. You can sign up for a free account and access documentation, tutorials, and onboarding guides. For example, Top Villas launched a new project in just 2 months. Learn more at the Hygraph Documentation.
SEO Best Practices & Headless CMS
Is Hygraph SEO-friendly?
Yes, Hygraph enables advanced SEO strategies, including control over metadata, multilingual URL slugs, and integration with frontend frameworks for SSR/SSG. Webhooks allow automatic regeneration of static content for Google indexing. Learn more in the Hygraph SEO guide.
How does Hygraph handle SEO image optimization?
Hygraph provides advanced support for SEO image optimization, including metadata management, format conversion, and integration with frontend frameworks. More details are available in the blog post on image SEO with headless CMS.
What are some considerations when optimizing images for SEO with a Headless CMS?
Written by Ronak & Jamie
on Jan 20, 2021
We recently covered how we handle SEO with Hygraph. While that post focuses on operational and technical SEO within Hygraph, here is a quick understanding of how you can optimize our images and other assets for SEO using Hygraph.
It's a well-documented fact that Image SEO starts with the filename, however, there’s a more extensive list of best practices for Image SEO in the long run.
Name your images: When it comes to SEO, creating descriptive, keyword-rich file names is crucial. Image file names alert Google and other crawlers to the subject of the image. After all, people tend to search for pepperoni pizza considerably more often than IMG_0404
Use descriptive and self-explanatory alt text: Alt tags are a text alternative to images when a browser can’t properly render them. Similar to the title, the alt attribute is used to describe the contents of an image file. When any complications occur and images don’t load, browsers will still indicate what image should have loaded by using the alt text.
Choose the best file type: .jpg, .png, and .svg are extremely common file types for images across the web. Choose the right format when factoring in the overall size and quality. .png tends to be preferred for most images, whereas .jpg are used for heavier photographs. Ensure you’re further optimized to transform images on the fly to modern formats like .webp to further improve on compression where applicable.
Use vectors where you can: Images are heavy. In many cases, especially when uploading geometric shapes, logos, or illustrations, uploading .svg results in a much lighter end-result, compared to .png, or .jpg. Furthermore, vectors are infinitely scalable across all screen resolutions, removing the headaches of pixelated quality post-compression.
Size your images correctly: If you’re using AMP or PWAs, you are required to define your image dimensions in the source code. Even if you aren’t, it’s still a best practice to define the width and height to provide a better user experience.
Compress your images: Page load time is crucial for SEO. Google has confirmed that it’s a ranking factor on both desktop (since 2010) and mobile (since at least 2018). After choosing the most appropriate file type for each image, ensure that you’re compressing them as much as you can without compromising on the quality.
Use the correct Schema markup: You might be familiar with Schema markup for text-based results on SERPs, but images benefit from this as well. Depending on the assets and the page/posts they’re related to, Google displays a badge on image results that indicate what that image is a part of.
Implement Lazy Loading: According to Google, “lazy loading can significantly speed up loading on long pages that include many images below the fold by loading them either as needed or when the primary content has finished loading and rendering”.
Use a CDN: Most websites serve all of their files (including images) from a single server in a single location, which is fine for smaller websites with a very local audience. For larger sites with international audiences, it is infeasible to expect each session to have to wait for assets to load via a single location - which is where CDNs step in, by ensuring assets are cached along with content across several data centers around the world.
Given these points, let’s dive into how you can better optimize your Image SEO with a Headless CMS like Hygraph.
Extending Hygraph Asset model
Always ensure that any images you add or upload start with well-optimized file names. While it's always recommended to compress large files with services like Caesium or TinyPNG before uploading them - Hygraph’s Assets API allows for granular transformations to resize, modify, and optimize images when being queried.
For example, this very post renders its featured image with resize=w:960,fit:crop/quality=value:75/output=format:webp/compress/ to have the final output transformed from PNG to WebP, and optimized for greater performance.
Hygraph comes with its own Digital Asset Management (DAM) capabilities out of the box, and by default, Asset is a system content model. This means you can treat assets as content models of their own, each with the ability to be extended to your preference independent of being related to other models like posts or pages.
More operationally, the Hygraph UI allows for greater flexibility in handling images and other assets for SEO. As in the video, the asset model itself can be extended to include any attributes that you would need.
Here are a few possibilities of quick wins to extend your asset model with custom fields:
Alt Text: A Single line text field to define the alt text of your images, making them more specific and descriptive when being indexed.
Max Height: A Float field to define the max-height of your images in a measurement unit of your choosing, making them more consistent when being rendered.
Localized Alt Text: A Single line text field with localization enabled, to define the alt text of your images in several languages depending on your business model.
Quality: A Float field to set compression values on a scale of 1-100 if you don’t want to default to a project-wide quality degradation when transforming assets.
Convert: Depending on the asset type you're dealing with, it's possible to transform the output to another file type by passing a format value. Refer to our docs for more on this.
Caption: A Rich text field to caption and credit images, and have them rendered below assets.
Resize: A Float field to set values, so your final images queried are rendered at predefined values like 25%, 50%, or 75%.
Delete EXIF: A Boolean field to resolve assets at query time and run a script to delete all EXIF data before it renders.
Depending on the complexity you require and the resources at hand, there are several possibilities to further expand on this depending on your use case - max dimensions, format switches, mobile-specific images - the options are endless.
Blog Authors
Ronak Ganatra
Jamie Barton
Share with others
Sign up for our newsletter!
Be the first to know about releases and industry news and insights.