dede alt标签

alt 标签是 HTML <img> 标签的一个重要属性，它的全称是 "alternative text"（替代文本），对于 SEO（搜索引擎优化）和网站可访问性（Accessibility）alt 标签至关重要。

为什么 alt 标签如此重要？

1. SEO 优化：

   • 理解：搜索引擎的爬虫无法直接“看到”图片内容，它们通过 alt 标签来理解图片的主题和内容，一个准确描述的 alt 标签有助于图片在 Google 图片、百度图片等搜索引擎中获得更好的排名。
   • 相关性提升：alt 文本中的关键词可以增强页面与特定搜索查询的相关性，从而提升整个页面的 SEO 表现。

2. 可访问性（无障碍访问）：

   • 屏幕阅读器：对于使用屏幕阅读器的视障用户，alt 标签会朗读出来，让他们了解图片所代表的信息,这是实现网站无障碍访问的关键。
   • 图片加载失败：当图片因网络问题、路径错误等原因无法加载时，alt 标签中的文本会显示在图片的位置上,告诉用户这里本应是什么内容。

3. 用户体验：

   • 在图片加载缓慢时，用户可以看到 alt 文本作为提示,了解即将显示的内容。

在织梦CMS中，alt 标签通常出现在哪里？

织梦的 alt 标签主要用在以下两个地方：

1. 页 (article_article.htm)：文章中插入的图片。
2. 栏目封面/文章列表 (list_*.htm, article_*.htm 等)：列表页或文章页中作为缩略图或封面图显示的图片。

如何修改和优化织梦CMS中的 alt

下面我们分几种常见场景来讲解具体的修改方法。

修改文章内容中图片的 alt

这是最常见的需求，织梦在发布文章时，默认的 alt 属性是空白的，我们需要修改模板,让它自动填充有意义的文本。

方法：修改文章内容页模板

1. 登录织梦后台 -> 模板 -> 模板管理。

2. 在左侧选择你当前使用的模板，然后在右侧找到并打开 article_article.htm 文件（这是文章内容页的模板）。

3. 在文件中找到调用文章正文的代码,它通常是这样的形式：

   {dede:field.body/}

   这段代码是直接输出文章内容的，织梦默认不会给其中的图片添加 alt 属性。

4. 修改代码：我们需要用织梦的自定义函数来处理 body 字段，给图片加上 alt 属性，织梦内置了一个非常有用的函数 GetImgInfo，可以获取图片信息，但更常用的是通过修改 php 文件来实现，或者使用更灵活的 preg_replace 方法。

   推荐方法：使用 MakeHtml 函数（推荐，更灵活）

   在 article_article.htm 模板中，将 {dede:field.body/} 替换为以下代码：

   {dede:field.body function='htmlspecialchars_decode(@me)'/}

   注意：仅仅这样还不够，这只是解码了HTML实体,我们需要在织梦的核心文件中添加一个处理函数。

   更彻底的解决方案（推荐）：

   1. 打开织梦的 核心函数文件：/include/extend.func.php。
   2. 在文件的最后面（?> 之前）添加以下自定义函数：

   /**
    * 给文章内容中的图片添加alt属性
    * @param string $body 文章内容
    * @param string $title 文章标题
    * @return string 处理后的内容
    */
   function AddAltToImages($body, $title = '') {
       // 如果内容为空，则直接返回
       if (empty($body)) return $body;
       // 定义正则表达式，匹配所有img标签
       $pattern = '/<img\s[^>]*?src\s*=\s*[\'"]([^\'"]*?)[\'"][^>]*?>/i';
       // 定义替换规则，使用文章标题作为alt文本
       $replacement = '<img alt="' . $title . '" \\1';
       // 执行替换
       $new_body = preg_replace($pattern, $replacement, $body);
       return $new_body;
   }

   3. 修改 article_article.htm 模板中的调用方式：

   {dede:field.body function='AddAltToImages(@me, @me)'/}

   • @me 在这里是占位符，第一个 @me 代表文章内容，第二个 @me 代表文章标题。
   • 这样，文章中的所有图片都会被自动添加 alt="文章标题"。

   说明：

   • 这种方法的好处是，你可以在后台修改模板，而不用去动核心文件，但如果你的 extend.func.php 文件因为升级被覆盖,你需要重新添加这个函数。
   • 你也可以直接修改织梦的 arc.archives.class.php 文件，但这不推荐,因为升级后会丢失。

修改文章列表页/封面图的 alt

这个 alt 标签通常由织梦的标签系统自动生成。

方法：修改列表页模板

1. 登录织梦后台 -> 模板 -> 模板管理。

2. 找到并打开你的列表页模板，list_*.htm。

3. 找到调用文章缩略图的标签,它通常是这样的：

   <a href="[field:arcurl/]"><img src="[field:picname/]" /></a>

   或者更完整的写法：

   <li>
       <a href="[field:arcurl/]">
           <img src="[field:picname/]" />
       </a>
       <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
   </li>

4. 修改标签：直接在 <img> 标签中加入 alt 属性，并使用织梦的标签变量 [field:title/] 来填充。

   <a href="[field:arcurl/]">
       <img src="[field:picname/]" alt="[field:title/]" />
   </a>

   或者，为了更好的SEO,可以加上一些描述性文字：

   <a href="[field:arcurl/]">
       <img src="[field:picname/]" alt="[field:title/] - [field:typename/]" />

   • [field:title/] 是文章标题。
   • [field:typename/] 是文章所属的栏目名称。

方法：修改文章内容页封面图/缩略图的 alt

打开 article_article.htm 模板，找到调用文章缩略图的地方（通常在文章标题上方或下方）,代码可能是：

<img src="{dede:field name='litpic'/}" />

同样，给它加上 alt 属性：

<img src="{dede:field name='litpic'/}" alt="{dede:field name='title'/}" />

---

最佳实践和注意事项

1. 描述要准确：alt 文本应该简洁、准确地描述图片内容，避免使用“图片1”、“截图”等无意义的词语。
2. 避免关键词堆砌：不要为了SEO而在 alt 标签里堆砌大量不相关的关键词,这可能会被搜索引擎视为作弊。
3. 保持简洁：alt 文本不宜过长，通常建议在 125 个字符以内。
4. 装饰性图片：如果图片是纯粹的装饰性，不承载任何信息，可以将 alt 属性设为空，即 alt="",这样屏幕阅读器就会跳过它。
5. 使用文章标题作为 alt 是一个好习惯：对于文章内容中的图片，使用文章标题作为 alt 文本是一个简单且有效的做法,因为它与页面主题高度相关。

修改位置	模板文件	修改方法
中的图片	article_article.htm	在 /include/extend.func.php 添加 AddAltToImages 函数。 将 {dede:field.body/} 替换为 {dede:field.body function='AddAltToImages(@me, @me)'/}。
列表页/封面图	list_*.htm, article_*.htm	在 <img> 标签中直接添加 alt="[field:title/]" 或 alt="[field:title/] - [field:typename/]"。
文章页封面图	article_article.htm	在 <img> 标签中直接添加 alt="{dede:field.name='title'/}"。

通过以上方法，你就可以系统地为织梦CMS网站中的所有图片都加上优化的 alt 标签,从而提升网站的SEO表现和可访问性。