Fallback Images crawled by google
Answered
German Shepherd Dog posted this in #help-forum
German Shepherd DogOP
I have a large database which I am showing on my website, and I store images to most of the items on AWS. Not all items have an image, so instead i created a fallback image component that will instead show a different image if there is no image available:
const ImageWithFallback = (props) => {
const { src, fallbackSrc, ...rest } = props;
const [imgSrc, setImgSrc] = useState(src);
return (
<Image
{...rest}
src={imgSrc}
onError={() => {
setImgSrc(fallbackSrc);
}}
/>
);
};
However, I see google trying to index the image paths that error'd out and dont exist, and of course returns 404s. Is there perhaps a better way to do what I'm trying to do?
const ImageWithFallback = (props) => {
const { src, fallbackSrc, ...rest } = props;
const [imgSrc, setImgSrc] = useState(src);
return (
<Image
{...rest}
src={imgSrc}
onError={() => {
setImgSrc(fallbackSrc);
}}
/>
);
};
However, I see google trying to index the image paths that error'd out and dont exist, and of course returns 404s. Is there perhaps a better way to do what I'm trying to do?
Answered by German Shepherd Dog
yea, issue is that the images come from a completely different source and also get updated, so i'd constantly need to update the DB, too. I just had the idea to create a custom error response for my image bucket to return the fallback image on 404
10 Replies
@German Shepherd Dog I have a large database which I am showing on my website, and I store images to most of the items on AWS. Not all items have an image, so instead i created a fallback image component that will instead show a different image if there is no image available:
const ImageWithFallback = (props) => {
const { src, fallbackSrc, ...rest } = props;
const [imgSrc, setImgSrc] = useState(src);
return (
<Image
{...rest}
src={imgSrc}
onError={() => {
setImgSrc(fallbackSrc);
}}
/>
);
};
However, I see google trying to index the image paths that error'd out and dont exist, and of course returns 404s. Is there perhaps a better way to do what I'm trying to do?
yea, you can do it like this:
const ImageWithFallback = (props) => {
const { src, fallbackSrc, ...rest } = props;
// no need for a client component
return (
<Image
{...rest}
src={src ?? fallbackSrc}
/>
// if source is not available the fallbackSrc will be used
);
};German Shepherd DogOP
well the issue is that I don't know beforehand which items have images and which dont, so in either case i would pass a URL to the component and src wouldnt be null
to clarify my scenario: i will try to fetch myimageurl.com/<itemId>, not knowing if that item has an image or not. If it doesn't have one (-> the url returns a 404), I want to display a fallback image
@German Shepherd Dog to clarify my scenario: i will try to fetch myimageurl.com/<itemId>, not knowing if that item has an image or not. If it doesn't have one (-> the url returns a 404), I want to display a fallback image
When you load it like the way you doing now and have your network tab open and click inside the document after reloading the page, do you see now the fallback image or src image?
German Shepherd DogOP
with the way ive been doing it, it is correctly showing the fallback image. you can see in the network tab that it attempts to fetch an image first, gets a 404 and then sets the fallback:
i dont like intentionally using errors as part of the solution, but i feel like it would also be too much effort to adjust every item in my database with a "hasImage" column
@German Shepherd Dog i dont like intentionally using errors as part of the solution, but i feel like it would also be too much effort to adjust every item in my database with a "hasImage" column
yea, normally your database should have some field like
thumbnailStorageKey or similar and this one points to a specific path on your storage server like /media/item-12345/thumbnail.png or similar (without the domain in front). When there is a key, the file exists, if there is no key, the storage key is empty as well. You might need to migrate your database a bit...German Shepherd DogOP
yea, issue is that the images come from a completely different source and also get updated, so i'd constantly need to update the DB, too. I just had the idea to create a custom error response for my image bucket to return the fallback image on 404
Answer
German Shepherd DogOP
a bit hacky but should be better than my current solution
@German Shepherd Dog yea, issue is that the images come from a completely different source and also get updated, so i'd constantly need to update the DB, too. I just had the idea to create a custom error response for my image bucket to return the fallback image on 404
yea, like that you may be able to provide google directly the correct image