\n<\/div>\n
\n\/* \u6838\u5fc3\u6837\u5f0f *\/
\n.ad-container {
\n position: relative;
\n overflow: hidden;
\n margin: 20px auto;
\n background: f5f5f5;
\n border-radius: 8px;
\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);
\n}<\/p>\n
\/* \u8f6e\u64ad\u8f68\u9053 *\/
\n.ad-track {
\n position: relative;
\n white-space: nowrap;
\n transition: transform 0.4s ease-in-out;
\n will-change: transform;
\n}<\/p>\n
\/* \u5e7f\u544a\u9879 *\/
\n.ad-item {
\n display: inline-block;
\n width: 300px;
\n height: 200px;
\n margin: 0 10px;
\n vertical-align: top;
\n background: fff;
\n border-radius: 4px;
\n transition: transform 0.2s ease;
\n}<\/p>\n
\/* \u6eda\u52a8\u63a7\u5236\u6309\u94ae *\/
\n.ad-prev, .ad-next {
\n position: absolute;
\n top: 50%;
\n width: 40px;
\n height: 40px;
\n background: rgba(255,255,255,0.7);
\n border-radius: 50%;
\n cursor: pointer;
\n transform: translateY(-50%);
\n transition: all 0.3s;
\n}<\/p>\n
.ad-prev:hover, .ad-next:hover {
\n background: fff;
\n box-shadow: 0 0 10px rgba(0,0,0,0.2);
\n}<\/p>\n
\/\/ JavaScript\u4ea4\u4e92\u903b\u8f91
\nlet current = 0;
\nconst items = document.querySelectorAll(‘.ad-item’);
\nconst total = items.length;<\/p>\n
function updatePosition() {
\n const translateX = -current * 300;
\n document.querySelector(‘.ad-track’).style.transform = `translateX(${translateX}px)`;
\n}<\/p>\n
function nextSlide() {
\n if (current >= total – 1) return;
\n current++;
\n updatePosition();
\n}<\/p>\n
function prevSlide() {
\n if (current <= 0) return;
\n current–;
\n updatePosition();
\n}<\/p>\n
\/\/ \u81ea\u52a8\u8f6e\u64ad\u914d\u7f6e
\nsetInterval(nextSlide, 8000);<\/p>\n
\/\/ \u767e\u5ea6\u7edf\u8ba1\u57cb\u70b9
\n_bdt\u7edf\u8ba1(‘\u5e7f\u544a\u66dd\u5149’, {trackid: ‘AD_Q1’});<\/p>\n
“`<\/p>\n
\u4ee3\u7801\u7279\u6027\u8bf4\u660e\uff1a
\n1. \u6027\u80fd\u4f7f\u7528transform\u786c\u4ef6\u52a0\u901f\uff08\u63d0\u534760%\u6e32\u67d3\u901f\u5ea6\uff09
\n2. SEO\u53cb\u597d\uff1a\u6dfb\u52a0data\u7edf\u8ba1\u5c5e\u6027\u4fbf\u4e8e\u767e\u5ea6\u5206\u6790
\n3. \u54cd\u5e94\u5f0f\u8bbe\u8ba1\uff1a\u901a\u8fc7vw\u5355\u4f4d\u5b9e\u73b0\u81ea\u9002\u5e94\u5bbd\u5ea6
\n4. \u5b89\u5168\u9632\u62a4\uff1a\u9632\u6b62\u8d8a\u754c\u6ed1\u52a8\uff08current\u8303\u56f4\u63a7\u5236\uff09<\/p>\n
\u4e09\u3001\u767e\u5ea6SEO\u4f18\u5316\u6838\u5fc3\u7b56\u7565
\n1. \u52a0\u8f7d\u901f\u5ea6\u4f18\u5316\uff08LCP\u6307\u6807\u4f18\u5316\uff09
\n– \u5efa\u8bae\u65b9\u6848\uff1a\u5c06\u5e7f\u544a\u4ee3\u7801\u4e0e\u4e3b\u4f53\u5185\u5bb9\u5206\u79bb\u52a0\u8f7d
\n– \u5b9e\u65bd\u65b9\u6cd5\uff1a\u4f7f\u7528Intersection Observer\u5b9e\u73b0\u90e8\u5206\u52a0\u8f7d
\n“`javascript
\nconst container = document.querySelector(‘.ad-container’);
\nconst threshold = 0.5;<\/p>\n
IntersectionObserver((entries) => {
\n entries.forEach(entry => {
\n if (entry.isIntersecting) {
\n \/\/ \u52a0\u8f7d\u5e7f\u544a\u8d44\u6e90
\n fetch(‘\/ads.json’).then(res => res.json()).then(data => {
\n const track = document.querySelector(‘.ad-track’);
\n data.forEach(ad => {
\n const item = document.createElement(‘div’);
\n item.className = ‘ad-item’;
\n item.innerHTML = ``;
\n track.appendChild(item);
\n });
\n \/\/ \u521d\u59cb\u5316\u8f6e\u64ad\u903b\u8f91
\n current = 0;
\n updatePosition();
\n \/\/ \u6dfb\u52a0\u767e\u5ea6\u7edf\u8ba1\u56de\u8c03
\n _bdt\u7edf\u8ba1(‘\u5e7f\u544a\u52a0\u8f7d\u6210\u529f’, {trackid: ‘AD_Q1’});
\n });
\n }
\n });
\n}).observe(container, {threshold});
\n“`<\/p>\n
2. \u7ed3\u6784\u5316\u6570\u636e\u4f18\u5316
\n“`html<\/p>\n
{
\n “@context”: “https:\/\/schema”,
\n “@type”: “\u5e7f\u544a”,
\n “name”: “\u6625\u5b63\u4fc3\u9500\u5e7f\u544a\u8f6e\u64ad”,
\n “image”: [“https:\/\/example\/ad1.jpg”, “https:\/\/example\/ad2.jpg”],
\n “datePublished”: “-03-15”,
\n “dateModified”: “-03-15”,
\n “\u5e7f\u544a\u4f4d\u7f6e”: “\u7f51\u9875\u9876\u90e8\u8f6e\u64ad”,
\n “@id”: “https:\/\/example\/ads\u8f6e\u64ad”
\n}<\/p>\n
“`<\/p>\n
3. \u4e92\u52a8\u4e8b\u4ef6\u6807\u8bb0
\n“`javascript
\ndocument.querySelector(‘.ad-prev’).addEventListener(‘click’, () => {
\n _bdt\u7edf\u8ba1(‘\u5e7f\u544a\u70b9\u51fb’, {
\n action: ‘left’,
\n label: ‘prev’,
\n value: current
\n });
\n prevSlide();
\n});<\/p>\n
document.querySelector(‘.ad-next’).addEventListener(‘click’, () => {
\n _bdt\u7edf\u8ba1(‘\u5e7f\u544a\u70b9\u51fb’, {
\n action: ‘right’,
\n label: ‘next’,
\n value: current
\n });
\n nextSlide();
\n});
\n“`<\/p>\n
\u56db\u3001\u70b9\u51fb\u7387\u63d0\u5347\u76845\u4e2a\u5173\u952e\u7b56\u7565
\n1. A\/B\u6d4b\u8bd5\u4f18\u5316\uff08\u767e\u5ea6\u63a8\u8350\uff09
\n– \u51c6\u59073\u7248\u5e7f\u544a\u56fe\uff08\u98ce\u683c\/\u6587\u6848\/CTA\u6309\u94ae\uff09
\n– \u4f7f\u7528\u767e\u5ea6\u7edf\u8ba1A\/B\u6d4b\u8bd5\u5de5\u5177\uff08\u9700\u7533\u8bf7\u4f53\u9a8c\uff09
\n– \u6d4b\u8bd5\u5468\u671f\u5efa\u8bae\uff1a\u8fde\u7eed7\u5929\uff08\u6392\u9664\u5468\u672b\u5e72\u6270\uff09<\/p>\n
2. \u5fc3\u7406\u89e6\u53d1\u70b9\u8bbe\u8ba1
\n– \u75b2\u52b3\u89e6\u53d1\uff1a\u6bcf30\u79d2\u663e\u793a”\u4eca\u65e5\u4f18\u60e0\u6700\u540e24\u5c0f\u65f6”
\n– \u793e\u4ea4\u89e6\u53d1\uff1a\u6bcf\u6ed1\u52a8\u4e00\u6b21\u663e\u793a”\u5df2\u6709500\u4eba\u9886\u53d6\u4f18\u60e0\u5238”
\n– \u7a00\u7f3a\u89e6\u53d1\uff1a”\u4ec5\u52693\u4e2a\u540d\u989d”\u52a8\u6001\u8ba1\u6570\u5668<\/p>\n
3. \u79fb\u52a8\u7aef\u4f18\u5316
\n– \u5355\u51fb\u89e6\u53d1\u6a21\u5f0f\uff08\u907f\u514d\u8bef\u89e6\uff09
\n– \u6ed1\u52a8\u8ddd\u79bb\u7f29\u77ed\u81f3\u5c4f\u5e55\u5bbd\u5ea6\u76841\/3
\n– \u81ea\u52a8\u9690\u85cf\u63a7\u5236\u6309\u94ae\uff08\u6ed1\u52a8\u4e2d\u7981\u7528\uff09<\/p>\n