自动将 Alt 标签添加到产品图片 - OSCommerce答案

【问题标题】：Automatically Add Alt Tag to Product Images - OSCommerce自动将 Alt 标签添加到产品图片 - OSCommerce
【发布时间】：2015-09-02 08:27:40
【问题描述】：

我想为我的所有产品图片自动添加 Alt 标签。

我正在使用 OSCommerce。 - 我想最好将所有产品图片的 alt 标签添加为与产品名称相同或类似的标签 - 这可以通过某种脚本来完成吗？

非常感谢您的帮助谢谢

【问题讨论】：

标签： javascript jquery html seo oscommerce

【解决方案1】：

绝对可以通过 JQuery 将 Alt 标签动态添加到页面上的所有 <img> 标签。

假设你有<img>标签如下：

<img class="productimage" title="Some Product Name" 
     src="http://someserver/somepath/images/product_1983212.jpg">

要动态添加Alt标签，您可以尝试以下方法。

1) 将JQuery 加载到HTML 页面的<head> 标记中（如果不存在）。

2) 添加 jQuery 文档就绪事件处理程序，它将动态添加 alt 标签，如下所示：

$(document).ready(function(){

   $(".productimage").each(function(){
        var currentTitle = $(this).attr("title");
        $(this).attr("alt",currentTitle);
    });

});

以上代码将遍历所有具有class="productimage" 的<img> 标签，并读取其title 并添加alt 等于title。

希望对你有所帮助。

编辑：

通过查看您的产品详细信息页面，我想出了以下代码：

$(document).ready(function(){ 
    $("#product-info-wrapper").each(function(){
        var currentProdTitle = $(this).find("#product-header").find("span[itemprop=name]").text();
        $(this).find("#product_image_holder > img").each(function(){ 
            $(this).attr("alt",currentProdTitle); 
        });
    });
});

修改了代码以考虑将多个#product-info-wrapper 放入单个页面的情况。

【讨论】：

嗨哇！伟大的建议维杰！ - 但是我不确定如何实现这一点。我可以在我的站点中看到我有标记，所以我认为这足以使“获取名称”类型功能起作用。但是他们并不都使用 class=productImage - 所以这是一个问题，不是吗？这是我的一个产品的一个例子：pmctelecom.co.uk/plantronics-hw261-supraplus-wideband-binaural 还有我应该把这个脚本放在哪个文件中，头文件？谢谢维杰
好的，这是我目前的代码： $(document).ready(function(){ $(".productimage").each(function(){ var currentTitle = $(this). attr("title"); $("img:not([alt])").attr("alt",currentTitle); }); });
哇，你真是个男人——我今天读了很多关于 Jquery 的书，我觉得我学到了很多东西——我把这段代码放在哪里？ - 它会在每次加载产品页面时运行吗？如果是这样，我可以在运行后将其删除并再次保留代码吗？非常感谢
你好史蒂夫。我刚刚检查了 PDP，发现我们没有将 jQuery 加载到该页面上。是否可以按照上面提到的步骤 1 修改该页面以添加它。
是的，我可以这样做 - 但我应该将它添加到哪个页面？我有用于索引等的 .TPL 文件，我真的不想手动将脚本添加到 1000 多页吗？另外 - 在他们被命名后，我可以删除代码并将其保存在其他地方以备将来使用吗？非常感谢