I have a website made to provide free web-based tools for making indie games. Currently, it only supports artists contributing to games. The features for helping artists consist of a set of artist community tools that allow artists to upload images based on a description, then we post that image in a gallery page. Other artists can upload their images and each image can have several revisions.
The way I chose to implement the image upload and display feature is by serializing uploaded images to a byte array and storing it in the database. When I need to display the image in the UI I just call a controller action I named "GetScaledGalleryImage" and pass in the image ID. That controller action takes the binary from the database and converts it back into an image, returning the requested image back.
This works very well functionally, but the problem I realized later is that the google crawler thinks all of my images are named "GetScaledGalleryImage" so if someone searches for "sylph" on google images, nothing comes up from my site, but if someone searches for site:watermintstudios.com getscaledgalleryimage, all of my images come up.
Here is an example of the URL that is being output in my HTML http://watermintstudios.com/EarnAMint/GetScaledMedia/68?scale=128
In the past, pre-MVC I would handle 404 errors and return content based on what was requested even if the page didn't actually exist. This would of course allow me to have the images pulled back by the image name (or description).
Is that the best way to do this? Or is there a better option? Something simpler would be better like if I could just do http://watermintstudios.com/EarnAMint/GetScaledMedia/Iris%20Doll?id=68&scale=128, but based on how google indexes images, would that give me what I need? Or do I need to provide image file extensions for maximum indexability?
Thanks all
It is important when doing Search Engine Optimization to always use alt="this is a crazy robot" for your images. This will help the crawler identify them. Note: always use alt, don't always name your images this is a crazy robot.
Related
Good morning,
a customer of ours asked us if it was possible to change the image that Google shows next to his site in Google search results.
After several searches, we tried using different techniques all followed by re-indexing the page in order to instantly see the results.
We tried using structured data (both with ld+json and using microdata) and also of the attributes "og:image" and "og:title" in the "meta" tags, but none of these tests changed the image displayed on the right side next to the site in Google results.
We expected that with one of these methods would have changed the image, but nothing happened
Therefore, we wondered whether it was possible to change that image or whether Google chose the best image based on its search parameters.
Thank you for your valuable help,
Best regards
I have 4 sizes for a single image in a page of my eCommerce website.
600x600px , 350x350px , 220x220px , 110x110px
There are 3 solutions:
1- Loading the big image (600x600px) from server and cache it, then generating thumbnails using the cached one by a client-side plugin.
2- Loading the big image and thumbnails all from server. (in this case, thumbnails are generated in server)
3- Loading the big image and create thumbnails by resizing the big one using CSS. (or for example we can load 600x600px and 350x350px ones and create thumbnails by css from 350x350px one)
Which solution is the best for SEO ?
Or if there is any other way, I appreciate.
My consideration regarding your solutions, assuming you are building a "classical, Client-server paradigm" eCommerce website (not a SPA application).
I believe this solution involve some JavaScript for the
re-sizing, so image won't be visible to a Search Engine Crawlers (or
will be more difficult their indexation).
This seems the best approach. Thumbnails are generated at server side and rendered in the HTML at user/client request. Page
will be crawled by Search Engines together with your HTML for their
indexes. There is also less overhead at client side (performance) as
not dynamic image scaling is required.
The big image could potentially slow down downloading of your
page (depends of many factors), and could make your web page score
less in Search Engine algorithm. Also consider some user which can
access your page from mobile devices, speed of downloading it is
very important.
For SEO, please also consider the folowing:
Include a meaningful subject in image alt text.
Image captions are important because they are one of the most well-read pieces of content.
Use File Name using relevant keywords.
More from a reputable website:
http://searchenginewatch.com/sew/opinion/2120682/ranking-image-search
I want to design a web album with every image in the album having it's own title, and description. So, at a time only one set of image, title and description would be visible. And on clicking next button, the next set of image, title and description would appear,and so on.
So am wondering, what would be the best way to design with? HTML or AJAX?
I don't want to use the ready to use tools such as lightbox.
Do you want the browser's back button to work? If so, then you should make your life simple
and use html (since you will only be displaying one image at a time either way).
Ajax implies using html. On the other hand, using html does not necessarily imply that you need to use AJAX to load content dynamically.
What is the purpose of this project? If you are doing it for the learning experience you should go on with AJAX (from scratch). If you want speed and quality use an existing web image gallery. If you need to write it yourself use plain html (or an ajax framework such as dojo, jquery, etc. this will save you a lot of pain solving cross-browser quirks).
In addition, if you want to be able to click a button to take you to the next (previous) image
and you don't know how many images you will have beforehand, then you are looking for dynamic behavior. You can code dynamic logic either on the client side (javascript), or on the server side (let's say "php" to start with).
Also, how do you plan to keep the corresponding (image, title, description) together?
If you only have a 3 images, say you could hard code each of this into its corresponding html file. eg. 1.html, 2.html, 3.html. Then you would have to point the forward button from a.html to point to b.html. etc...
If you didn't want this boring static behavior and wanted something smarter, say you decided for AJAX. Then you would only have 1.html file and from there (using javascript) you would ask your server for the (image, title, description) and load all that (dynamically, without refreshing the browser) into the same page. The easiest way to get this from the sever is by just reading a a static (XML, or JSON) file which contains all the info (image urls, titles, descriptions). Then with javascript and using DOM manipulation you would remove the old image, and add the new one.
However, this would all be a lot simpler with server-side processing (and it's worth learning). In this case you could have a url which takes a parameter with the image number. eg. http://example.com/gallery/index.php?image=X
then before the server responds to the client with the html, it would realize that you want to load image X so it would get it's corresponding description, title, and url. and "embed" those into the file. Of course, depending on the number, it would also add the right links for the previous and next buttons. Eg. If the currently displaying image was 9 then forward button would "dynamically" be determined to link to (X+1) : http://example.com/gallery/index.php?image=10
I know this question might sound a little bit crazy, but I tough that maybe someone could come up with a smart idea:
Imagine you have 1000 thumbnail images on a single HTML page.
The image size is about 5-10 kb.
Is there a way to load all images in a single request? Somehow zip all images into a single file…
Or do you have any other suggestions in the subject?
Other options I already know of:
CSS sprites
Lazy load
Set Expire headers
Downloads images across different hostnames
There are only two other options I can think of given your situation:
Use the "data:" protocol and echo a base64 encoded version of your thumbnails directly into the HTML page. I would not recommend this since you cannot then cache those images on the users browser.
Use HTML5's Web Storage to store all the images as records with the base64 encoded image data stored as BLOBs in a column. Once the database has downloaded to the users machine, use Javascript to loop through all the records and create the thumbnails on the page dynamically using something like jQuery. With this option you would need to wait till the entire database was done downloading on the end users browser, and they will need a fairly modern browser.
I think your best bet is a combination of lazy loading, caching with expires headers and serving images from multiple hostnames.
If the images can be grouped logically, CSS sprites may also work for you in addition to everything above. For example, if your thumbnails are for images uploaded on a certain day...you may be able to create a single file for each day which could then be cached on the users browser.
This is done by using what's called a CSS sprite; a single image with all the other images inside it, with the particular part that's wanted in the html selected by css.
See one tutorial at http://css-tricks.com/css-sprites
It sounds like you want something like SPDY's server push. When the client requests the HTML page (or the first image), SPDY allows the server to push the other resources without waiting for more requests.
Of course, this is still experimental.
You could try the montage command of imagemagick to create a single image.
I am implementing the back end for an online store. The store receives new products periodically. Each product comes with a sequence of images for a 3D rotation effect on the website. What is a good approach for uploading these images onto the web store? I'm currently using a web form but uploading each image using a separate upload form element feels like a waste of time. These sequences can have anywhere from 12-50 frames. Any suggestions for a better way?
If you want a minimum amount of change from your current solution you can add the multiple attribute to your file input box, and update your back-end to support it.
You can then select multiple files at once with a modern browser, for instance Firefox 3.6. Try:
<input type="file" multiple=""/>