Alt tags in CCv5 for SEO

[attaboy_jhb]

I am a beginner and have read numerous threads for adding alt tags to images in CC. Some say you have to add them when you upload the images but I tried that and it doesnt work. When uploading images there is only a "browse" button and nothing else on the page. I need to update all of the image alt tags for all the existing images already loaded into CC for SEO purposes so if there is a way to do it without having to upload each one again, even better.

 

Where can I add/edit this info?

 

THanks in advance for your help

[attaboy_jhb]

When I use firebug to inspect an image I get this HTML code for it in one example:

<img style="width: 250px; height: 118px; margin: 5px 0px; float: right;" src="images/source/category_buttons/leangenie_need_extra_cash.jpg" alt="Supplement your income by selling our range of fantastic products to friends and family!">

I need to change the "alt" tag. Is this possible?

[attaboy_jhb]

was my question no good ?

[bsmither]

Your question is excellent. Sometimes it takes a while for someone to answer.

 

Let's look at a CubeCart skin template file. Using a programmer's text editor, open this file:

/skins/kurouto/templates/content.product.php, near line 90 (and 94):

<img src="{$PRODUCT.medium}" alt="{$PRODUCT.name}" id="preview" />

The 'alt' attribute is the Smarty variable $PRODUCT.name. So, when Smarty renders this template, the 'alt' attribute will equal "Fantastic FooBar" (or whatever the name is that you called the product).

 

Your example above suggests the page you are viewing is from a custom skin. So you will need to find the appropriate file in that skin.

 

alt="Supplement your income by selling our range of fantastic products to friends and family!"

 

This isn't the name of a product, so please tell us what skin you are using, and what page you are viewing.

[attaboy_jhb]

Thanks for that explanation.

 

The skin is a custom skin called "vector" and I am wanting to change the "alt" tags of the home page images as well as images located on the home page slider. Is that enough info for you to help me out?

 

PS: Not sure if this is of any use but I located the file content.homepage.php in the "vector" folder on the server and it only contains the following code:

<!-- Latest Products Listings -->
{if isset($fusion) && is_object($fusion) && $LATEST_PRODUCTS}
    <div class="row-fluid">
        <div class="products latest-products" data-columns="{$fusion->get('latest_product_listings_grid_columns')}">
            {foreach from=$LATEST_PRODUCTS item=product}
                {include iteration="{$product@iteration}" columns="{$fusion->get('latest_products_per_row')}" file="skins/{$SKIN_FOLDER}/templates/element.product.php"}
            {/foreach}
        </div>
    </div>
{/if}

Appreciate further feedback about this

[bsmither]

That template then uses this template: element.product.php

[attaboy_jhb]

thanks again for all your help

Ok so I checked and there is no HTML on that page with ALT tags. Please code below:

{$span = floor(12 / (int)$columns)}
{$firstInRow = (($iteration - 1) % $columns == 0) ? "firstInRow" : ""}
{$lastInRow = ($iteration % $columns == 0) ? "lastInRow" : ""}
{if $firstInRow}<div class="products-row">{/if}
<div id="product-{$product.product_id}" class="span{$span} {$firstInRow} {$lastInRow} product">
    <div class="wrapper">
        <form action="{$VAL_SELF}" method="post" enctype="application/x-www-form-urlencoded" class="ajax">
            <input type="hidden" name="add[{$product.product_id}][quantity]" value="1" class="quantity" />
            <div class="product-image">
                {$skinData = $GLOBALS['gui']->getSkinData()}
                {$height = $skinData.images.small.maximum}
                <a href="{$product.url}" title="{$product.name}" {if $height}style="height: {$height}px; line-height: {$height}px;"{/if}>
                      <img src="{if $product.small}{$product.small}{else}{$product.image}{/if}" alt="{$product.name}" />
                </a>
            </div><!-- /.product-image -->
            <div class="product-details">
                <div class="product-title">
                    <a href="{$product.url}" title="{$product.name}">{$product.name}</a>
                </div>
                {if strlen({$product.description_short})}
                    <div class="product-description">
                        {strip_tags($product.description_short)}
                    </div>
                {/if}
                {if $product.review_score}
                    <div class="product-rating">
                        {for $i = 1; $i <= 5; $i++}
                            {if $product.review_score >= $i || ($product.review_score > ($i - 1) && $product.review_score < $i)}
                                <img src="{$STORE_URL}/skins/{$SKIN_FOLDER}/img/star-on.png" alt="" />
                            {else}
                                <img src="{$STORE_URL}/skins/{$SKIN_FOLDER}/img/star-off.png" alt="" />
                            {/if}
                        {/for}
                    </div>
                {/if}
                {if !$CATALOGUE_MODE}
                    <div class="product-price">
                        {if $product.ctrl_sale}{$product.sale_price}{else}{$product.price}{/if}
                    </div>
                {/if}
            </div><!-- /.product-details -->
            {if !$CATALOGUE_MODE}
                <div class="product-actions">
                    {if ($product.ctrl_stock || $product.ctrl_purchase) && !$CATALOGUE_MODE}
                        <a href='#submit' class="btn btn-primary" title="{$LANG.catalogue.add_to_basket}">
                            <i class="icon-shopping-cart icon-white"></i> {$LANG.catalogue.add_to_basket}
                        </a>
                    {elseif !$CATALOGUE_MODE && $LANG.catalogue.out_of_stock_short}
                        <a href="{$product.url}" class="btn btn-danger">
                            <i class="icon-shopping-cart icon-white"></i> {$LANG.catalogue.out_of_stock_short}
                        </a>
                    {/if}
                </div>
            {/if}
            {if $product.ctrl_sale}
                {strip}
                    <a href="{$product.url}" class="sale-badge">
                        <span class="saving">{$LANG.catalogue.saving}</span>
                        <span class="value">{round(100*($product.price_unformatted-$product.sale_price_unformatted) / $product.price_unformatted)}</span>
                        <span class="percentage">%</span>
                    </a>
                {/strip}
            {/if}
        </form>
    </div><!-- /.wrapper -->
</div><!-- /.product -->
{if $lastInRow}</div>{/if}

[bsmither]

Of the code above, line 13:

<img src="{if $product.small}{$product.small}{else}{$product.image}{/if}" alt="{$product.name}" />

[attaboy_jhb]

but the alt tags in the OP are

 

alt="Supplement your income by selling our range of fantastic products to friends and family!

 

and that does not equal to the product name. something doesn't add up.... or am I missing something?

[bsmither]

I understand now!

 

You are actually getting this phrase in your browser, but cannot figure out where it is coming from.

 

Please verify that the following image exists in your CubeCart store, and that it was you who put this image on your site:

images/source/category_buttons/leangenie_need_extra_cash.jpg

 

Please verify you get the same results when you use a friend's web browser on a different computer. (Just make sure your browser isn't infected and causing this code.)

 

Is your site viewable by the public? If so, what is its address?

[attaboy_jhb]

Yes, when I inspect the image with firebug I can see that alt HTML code and I need to change it for all the images on the site.

 

I am a very novice PHP programmer so was hoping to be able to do it via admin for SEO purposes

 

the site is www.leangenie.co.za

[bsmither]

What I see is that within the <div class="homepage-content padding"> is the Homepage Document (just above "Customer Favourites") and that the images and phrases are coded in that Homepage document.

 

In admin, Documents, click the edit icon of the document chosen as the Homepage. You should now find what you are looking for on the Content tab. You may need to switch to Source mode to see the raw HTML. In Normal mode, you will need to select the image, then click the Image tool icon to get the Image Properties dialog to let you edit the alt attribute.

[attaboy_jhb]

I found it thank you, however, what about the images for the slider in a DIV called flexslider?? Where are those "alt" tags input? the HTML in the area you mentioned only begins after the slider.

 

Also, how do I change the alt tags on the product images from the shop? for SEO I need to change all of those

 

cheers!

[bsmither]

The alt tags on the product images are as discussed earlier. Viewing a Product, viewing a Category list of products, the Latest Products, and Featured Product all come from a template.

 

You might try changing the template code:

Was:
<img src="{if $product.small}{$product.small}{else}{$product.image}{/if}" alt="{$product.name}" />
Now:
<img src="{if $product.small}{$product.small}{else}{$product.image}{/if}" alt="{$product.seo_meta_keywords}" />

 

As for the slider, that is a third-party feature and I would not know how it is implemented. Some sliders I have looked at will have you create an array of images with titles and captions. If the slider is a feature of a third-party skin, you may wish to contact the publisher of the skin.

[attaboy_jhb]

<img src="{if $product.small}{$product.small}{else}{$product.image}{/if}" alt="{$product.seo_meta_keywords}" />

How can I just put in a variable if it is not defined?? $product.seo_meta_keywords is a variable or did you put in the $ by accident?

[bsmither]

Things you should know:

 

CubeCart has chosen to use the file suffix .php for the skin template filenames. The templates are actually HTML with {$placeholders} for dynamic data.

 

The template rendering engine is called Smarty, and it's job is to replace the {$placeholders} with that data, and execute other {commands} that control what parts of the HTML actually get included in the final rendered output. The Smarty variable syntax does include a $ (no relation to the PHP $ indicator). Array elements can be separated by periods.

 

When CubeCart has collected all the data pertaining to a product it is about to display (from the database, for example), that data is assigned to a Smarty variable ({$product}, for example). If {$product} is an array, an element of that array is expressed as {$product.seo_meta_keywords}.

 

In almost all cases, the SEO keywords you give to the Add/Edit Product screens in admin will be fetched from the database (along with nearly everything else in the item's database record) and included in the {$product} array.

[attaboy_jhb]

Thank you for that. However, this is getting quite advanced just to add alt tags to images. I am not lazy but I just don't want to have to understand the workings of cubecart & smarty to add alt image tags to product images.

 

I understand how a site interacts with a database but why can you not change all these alt tags in the admin side?? Why must you source files and cut up lines of "smarty" code.

 

In the admin side there is a SEO page under each product. Why is there no space for alt tags there?

[harrisorganic]

attaboy_jhb thats a good question. I would like to see some alt tab  definitions on the admin side too. 

Meanwhile I like Brian's idea of using the meta keyword area as mine are all blank. Traffic Travis keeps telling me I have duplicate alt tags on some pages. The last one I looked at had the same alt tag for the page icon and the image.

Al, is this something that can be listed on Github?

[bsmither]

What's a "page icon"?

[harrisorganic]

Hi Brian, I meant logo, instead of icon.

As you can see below, the alt tag is duplicated on one particular page:

<a href="https://www.harrisorganicwine.com.au/shop" class="main-logo"><img src="/shop/images/logos/logo-trans-60.png" alt="Organic Brandy 750mL - Harris Organic Distillers"></a>

<a href="#" class="open-clearing" data-thumb-index="0"><img src="https://www.harrisorganicwine.com.au/shop/images/cache/Wine/brandy-750-1024.500.jpg" alt="Organic Brandy - 750mL - Harris Organic" id="img-preview"></a>

I have found some pages have duplicate alt tags as above and others are OK. Dont know why. I thought the answer could be in content.product.php but I can not find the logo mentioned on that page.

[bsmither]

I see what you mean.

The alt attribute for the product's image tag uses the product's name.

The alt attribute of the store logo image tag uses the result of the function SEO->meta_title(). This function uses a combination of Store Meta Data and/or Product, Category & Document Meta Data, depending on the setting of Meta Data Behaviour in admin, Store Settings, Search Engines tab (Global Only, Merge with Global, Replace Global).

If the store is using Merge or Replace, and for the product, if there is is no Meta Data Title, CubeCart will use the name of the product.

Does it make sense to have the product, category, or document name as part of the store logo's alt attribute? I think no, but others may have a different point of view.

We certainly have other options: Store Name or Store Title, perhaps.

In the template main.php and main.checkout.php:

From:
<img src="{$STORE_LOGO}" alt="{$META_TITLE}">

To:
<img src="{$STORE_LOGO}" alt="{$CONFIG.store_name}">

Or:
<img src="{$STORE_LOGO}" alt="{$CONFIG.store_title}">