📁 SEO
Alt Text Prompt: Image Descriptions for Web Pages and SEO
Write alt text for every image on a web page: role-based descriptions, empty alt for decorative images, link alt, chart summaries, and an image SEO pass.
0Reviews
Prompt
Act as a web accessibility specialist and image SEO editor who writes alt text for the images on one web page, decides each image's role first (informative, functional, decorative, or complex), and keeps descriptions short, specific, and honest to what the image actually shows. Inputs: - Page URL or name, and what the page is for: [PageContext] - Each image, uploaded or described in my own words, with its file name: [Images] - Which images are links or buttons, and where they go: [LinkedImages] - Text that already sits next to each image (captions, headings, nearby copy): [NearbyText] - Charts, maps, or infographics, with the data or facts they show: [ComplexImages] - The search topic this page targets, if any: [PageTopic] Generate: 1. Image role table: every image in Images with its role (informative, functional, decorative, complex) and one line on why, using LinkedImages and NearbyText. 2. Alt text for informative images: one sentence each that says what the image shows that matters on this page. No "image of" or "photo of", no repeating the caption word for word. 3. Alt text for functional images: describe the action or destination from LinkedImages (for example "Order a sourdough loaf"), not the picture. 4. Decorative images: mark them alt="" so screen readers skip them, and say why each one adds no information. 5. Complex images: a short alt naming the chart or map and its main takeaway, plus a longer text version built only from the data in ComplexImages, to place on the page. 6. Image SEO pass: where PageTopic fits naturally in one or two alt texts, use it; never stuff it into every image. Suggest clearer file names in lowercase with hyphens. 7. Gaps: list any image I described too vaguely to write accurate alt text, with the question you need answered. Rules: - Describe only what is visible in the image or stated in my inputs. If you cannot see the image, work from my description and say so. - Keep each alt text to what a sighted visitor would take from the image in context; put long detail on the page, not in alt. - Output an HTML snippet with the final alt attributes for each image.
Instructions
Upload or describe every image on one page, say which ones are links, and paste the nearby captions and any chart data. The prompt sorts images by role, writes alt text for each, marks decorative images with empty alt, and adds a text version for charts. Check each alt against the real image before publishing. This follows WCAG 2.2 success criterion 1.1.1 (non-text content) and Google's image SEO guidance: describe what the image contributes in context, keep it concise, use alt="" for purely decorative images, and do not stuff keywords or start with "image of".
Generated Output
This image was generated using the prompt above.
Examples
Example Input
PageContext: Linden Street Bakery homepage. Goal: show the bread, get visitors to order for pickup, and show opening hours. Images: 1. hero-1.jpg: three round sourdough loaves with flour-dusted, scored tops cooling on a wire rack on a marble counter, warm morning light 2. btn-order.png: small photo of one loaf with the button label "Order for pickup" next to it 3. wheat-divider.svg: thin line drawing of a wheat stalk between sections 4. team.jpg: two bakers in aprons shaping dough at a floured wooden bench 5. hours-graphic.png: graphic listing opening hours LinkedImages: btn-order.png links to the online order page NearbyText: hero has the heading "Bread baked before sunrise"; team.jpg caption "Ana and Rui start at 4 a.m." ComplexImages: hours-graphic.png shows Tue to Fri 7am to 3pm, Sat 8am to 2pm, closed Sun and Mon PageTopic: sourdough bread bakery
Example Output
1. IMAGE ROLE TABLE | Image | Role | Why | | hero-1.jpg | Informative | Shows the product the page sells | | btn-order.png | Functional | Links to the order page | | wheat-divider.svg | Decorative | Visual separator only | | team.jpg | Informative | Shows who bakes; caption names them | | hours-graphic.png | Complex | Holds the opening hours as an image | 2. INFORMATIVE ALT TEXT hero-1.jpg: "Three flour-dusted sourdough loaves with scored tops cooling on a wire rack in the bakery" team.jpg: "Two bakers in aprons shaping dough at a floured wooden bench" (the caption already names Ana and Rui, so the alt does not repeat it) 3. FUNCTIONAL ALT TEXT btn-order.png: "Order bread for pickup" (describes the destination; the loaf photo is not the point) 4. DECORATIVE wheat-divider.svg: alt="" because it only separates sections and adds no information. 5. COMPLEX IMAGE hours-graphic.png alt: "Opening hours, listed below" Text version to place on the page: Opening hours: Tuesday to Friday, 7am to 3pm. Saturday, 8am to 2pm. Closed Sunday and Monday. Hours in a graphic cannot be read by screen readers or found by search, so keep this text on the page. 6. IMAGE SEO PASS PageTopic "sourdough bread bakery" fits naturally in the hero alt (it already says sourdough loaves and bakery). Left out of the other alts on purpose. File names: hero-1.jpg -> sourdough-loaves-cooling-rack.jpg; team.jpg -> bakers-shaping-dough.jpg; btn-order.png -> order-bread-pickup.png 7. GAPS None blocking. Optional: if the order button has visible text "Order for pickup" in HTML, the image can be alt="" and the text does the work. HTML SNIPPET <img src="sourdough-loaves-cooling-rack.jpg" alt="Three flour-dusted sourdough loaves with scored tops cooling on a wire rack in the bakery"> <a href="/order"><img src="order-bread-pickup.png" alt="Order bread for pickup"></a> <img src="wheat-divider.svg" alt=""> <img src="bakers-shaping-dough.jpg" alt="Two bakers in aprons shaping dough at a floured wooden bench"> <img src="hours-graphic.png" alt="Opening hours, listed below"> Written from your descriptions; check each alt against the actual image before publishing.